|
HTML - Picture That Changes At A Certain Time?
I was wondering if there was a simple way or script out there that anyone knows that can change a picture at a certian time?
I am doing a website for a diner and they close at 3:00pm and I was thinking about putting a sign on the website that would simply say "Open" when the diner is open and "Closed" when its obviously closed. Thanks in advanced Similar TutorialsHi! I'm working on adapting a we-based system called OTRS (open ticket request system) for our offices here and I've just finished modifying all the headers and css and stuff for our needs. Now, I did it in Firefox and I'm brand spanking new to this game so when one of the header logos didn't appear in IE7, it took me about an hour to figure out maybe it was IE7 that was the problem, and it turns out it is... so would someone mind having a look at this below? It's very basic, but what's happening is that the picture 'HeaderCropped' isn't displaying, the border outlines don't even show, only that funny little graphic that appears when a picture is missing ( I don't know what it's called). Obviously I'd like to be able to see the picture in both FF and IE7, but will this take a major overhaul of this code? (It took me quite a while to do this little bit!) Thanking you in advance! -Emily _________________________________________________________ # include Copyright.dtl $Include{"Copyright"} # set some html variables #<dtl set $Env{"Box0"} = ">> "> #<dtl set $Env{"Box1"} = " <<"> # check refresh <dtl if ($Data{"Refresh"} ne "") { $Data{"MetaHttpEquiv"} = "<meta http-equiv="refresh" content="$Data{"Refresh"}">"; }> <html> <head> $Data{"MetaHttpEquiv"} <title>$Config{"ProductName"} $QData{"TitleArea"}</title> $Include{"customer-css"} </head> <a name="top"></a> <body> #<!-- start CI layout --> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="100%" class="header"><img style= width: 454px; height: 109px; "src="/otrs-web/images/Standard/HeaderCropped.jpg"> </td> <td width="100%" class="header" title="www.alliedpensions.com"><a href="http://www.alliedpensions.com"><img border="0" src="/otrs-web/images/Standard/APTLogo.jpg" width="150" height="100"></a></td> </tr> <tr> <td colspan="2"><hr align="left" width="100%" height="2"><!-- end CI layout --><!-- end header --></td></tr></table></body></html> Hi I'm trying to make some text sit under a photo, and it works fine except in IE6, where the first word starts at the side of the photo, then the rest sits underneath. The page is at www.bigbadroo.com.au/top-stitching/www/ - the photo is of the woman on the left. Here's my html: <div id="wilma"> <img src="images/wilma.jpg" alt="Wilma" ><em><strong>Over 40 years industry experience!</strong></em> </div><!-- end #wilma --> and the CSS: #wilma { float:right; margin-top:10px; font-size:7.5pt; width:213px; } Is there anything obvious there? Thanks for your time and help Shaun I'm having trouble fixing some bugs when viewing my site on IE 6. Here is my problem........ I have IE 6 and everything looks fine to me. But on other computers it looks messed up. So.... I was wondering if someone could help me out and take a screenshot of a page using IE 6. I want to see how it looks on other computers when the page fully loads up. This is the page http://webtvdeluxe.com/v2/Art Show Thank you in advance I use HTML 4.01 transitional, with some style sheets. I'd like to put a frame around a picture on an inspirational website for purely ascetic reasons. I don't want to use a table for a frame like some folks do. It' s kind of tacky. Does anybody know what code I'd need to do this? Is there some kind of style sheet I could use? is there a specific one which i should use when making my site? jpeg or gif or any other format? Thanks If you could take a look HERE and tell me how I would do the same sort of picture menu with text to the right and in line with the centre of the pic WITHOUT using a table? The table is just giving me trouble!! Sorry to ask so many questions BTW. Hello, it seems every now and then when I create an image from a document/scan or such and I upload it, It displays fine in FireFox, however users in IE are reporting that they're not seeing the image. Can anyone take look at this image and tell me if you see this displaying in IE? http://thejf.org/images/JCC124.jpg Is this an IE bug or something? How come this image appears fine in FireFox but not IE? For the site that I am currently in charge of I removed a slideshow because it took too long to load. In it's place i tried to add just a picture, but it will not work. I uploaded the picture to the site, have the correct html, and placed the html where the code for the slideshow used to be but it doesn't appear on the page. It doesn't even give one of those X's to show you the picture isn't loading. Here is some of the code surrounding where I'd like the picture to be. <div id="text6" style="position:absolute; overflow:hidden; left:22px; top:628px; width:929px; height:205px; z-index:5"> <div class="wpmd"> <div><font face="Times New Roman" class="ws16">Mission Statement</font></div> <div><font face="Times New Roman" class="ws16"><BR></font></div> <div><font face="Times New Roman" class="ws16">A collaborative team including individuals impacted by neurological conditions, providers who serve them, members of communities in which they live, advocates, and researchers who investigate these impairments will identify, develop and disseminate information and strategies, and maximize resources to improve outcomes and quality of life. <a href="http://www.karrn.org/SCIRehabProgram.pdf">2010 SCI Rehab Conference Program</a></font></div> <div><font face="Times New Roman" class="ws16"><BR></font></div> </div></div> <div id="shape1" style="position:absolute; overflow:hidden; left:698px; top:248px; width:310px; height:320px; z-index:7"><img border=0 width="100%" height="100%" alt="" src="images/shape3078289.gif"></div> <div id="text5" style="position:absolute; overflow:hidden; left:19px; top:591px; width:238px; height:25px; z-index:8"> <div class="wpmd"> <div><font color="#000000" face="Times New Roman" class="ws18"><B>Welcome to our site</B></font></div> </div></div> The blank area there is where the code for the slideshow was. All I need is a simple picture. Anyone know why it's not working? Thanks ahead of time! how do i put a picture on the title bar? well, some sort like the bulb on this website. Hello.. i am creating a work webpage to display goodies are staff might like to buy for christmas! Ive got a slide show in the middle and other images around Ive been able to code the slide show so that when i click the image on the slide it display it in another window Im having a problem though with being able to code the images around the slide when i click the individual ones it just brings up the picture in the slide ? Ive had a little play with it and cant get my brain around it! It may be simple but ive been doing these for days and i am extremly tired from them lol.. can anyone help? i will display code below thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
<div class="image">
<img src="360s.jpg" border="0" width="200px" height="100" href="360s.jpg" />
</div>
<div class="image">
<img src="ps3.jpg" border="0" width="200px" height="100" />
</div>
<div class="image">
<img src="DS.jpg" border="0" width="200px" height="100" />
</div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
After re-structuring the whole website, i got some problems with my pictures. As you see on theese 2 pics i can't get the pictures centered, even with the <center> tag! (images removed) before re-structuring i couldn't center the pictures neither, so it isn't because of the new structure. Please take a look on this Code and tell me if you know how to fix this problem. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Urne's Website - Community</title> <link rel="stylesheet" type="text/css" href="style/style2.css"> </head> <body> <div id="container"> <div id="header"></div> <div id="left" style="width:210px;float:left;"> <a href="index.html"><img alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p> <p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> </div> <div id="main" style="margin-left: 210px;"> <h1>Urne's Tracks</h1> <p>Here i have all the tracks i ever made for Re-Volt. Please check this one weekly/monthly, because the site will be updated at least once/month.<img alt="Smiley" src="img/Smile.gif" border= "0px"/></p> <a href="Bone+Island.html"><img alt="Bone Island" src="img/Bone+Island+hot.png" height="200" width="200" border= "0px"/></a> <a href="At+The+Farm.html"><img alt="At The Farm" src="img/At+The+Farm.png" height="200" width="200" border= "0px"/></a> <a href="Forgotten+City.html"><img alt="Forgotten City" src="img/Forgotten+City.png" height="200" width="200" border= "0px"/></a> <br> <a href="Cyberspace.html"><img alt="Cyberspace" src="img/Cyberspace.png" height="200" width="200" border= "0px"/></a> <a href="Dark+Park.html"><img alt="Dark Park" src="img/Dark+Park.png" height="200" width="200" border= "0px"/></a> <a href="Pisa+Grandprix.html"><img alt="Pisa Grandprix" src="img/Pisa+Grandprix+hot.png" height="200" width="200" border= "0px"/></a> </br> </div> </div> </body> </html> Hope this can help you! Regards Urnemanden Hi everyone, I'm new here and new to html stuff. I really need to learn it to make my website. I've been messing around all day with the codes and so far all I got is this: <TABLE BORDER="0" cellpadding="0" CELLSPACING="0" bordercolor="#330000" width="100%"> <TR> <TD WIDTH="950" HEIGHT="17" BGCOLOR="#000000" VALIGN="top" align="left"> <font face="edwardian script itc" style="font-size: 65pt" color="#FFFFFF">George Gabrielle Couture </font></TD> </TR> </TABLE> <table border="0" width="20% align="right" bgcolor="FFFFFF"> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Fall/Winter</font></td> </tr> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Holiday</td> </tr> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Resort</td> </tr> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Baby</td> Now I need to add some pics to the white part of the page (left-hand side). Forgive me everyone, when you answer this please treat me like I'm a 5 year-old, LOL . I am soooo html challenged. I'm only a seamstress, and sewing clothes is all I know . Hello! I have a bunch of picture i wish to have on a internal webpage to go around the sides and bottom of the page, positioned around a slideshow in the center. I have managed to get some to go down the left, and i can get them some to go to the bottom but once there they sit on top of each other not side by side? how can i overcome this?? I have tried the 'float' but this was no luck. Also can you tell me how get the images to come down the far right hand side of the page Thanks I have inc my code.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
Hey all got bit of a prob here! I need the bg picture to fit the background plz help HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>I-C-U - The corner inside the code</title>
<meta name="author" content="DarkHat" />
<meta name="subject" content=
"anonymous, antivirus, chat, hacker, hackers, internet security, proxy, security, trading, webdesign" />
<meta name="Description" content="Trade your secrets at I.C.U" />
<meta name="Classification" content=
"I-C-U is here for you and you are there for the others who needs the help with security etc..." />
<meta name="Keywords" content=
"anonymous, antivirus, chat, hacker, hackers, internet security, proxy, security, trading, webdesign" />
<meta name="Geography" content="Sweden/Usa" />
<meta name="Language" content="English, Swedish, Danish, Norwegean" />
<meta http-equiv="Expires" content="Dec 2012 10:10:10 GMT" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta name="Copyright" content="DarkHat , -I.C.U-" />
<meta name="Designer" content="DarkHat" />
<meta name="Publisher" content="I.C.U" />
<meta name="Revisit-After" content="10" />
<meta name="distribution" content="Global" />
<meta name="Robots" content="INDEX,FOLLOW" />
<meta name="city" content="Gothenburg" />
<meta name="country" content="Sweden" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<link rel="stylesheet" href="/css/frontstyle.css" type="text/css" />
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="/ico" href="/favicon.ico" />
<script type="text/javascript" src="js/jquery-1.2.6.js">
</script>
<script type="text/javascript" src="js/startstop-slider.js">
</script>
</head>
<body>
<div id="page-wrap">
<div id="slider">
<div id="mover">
<div id="slide-1" class="slide">
<h1>LinkerZ</h1>
<p>LinkerZ nr.1 webpage for the hacker! There is links to different communitys,
movie portals, radio stations, all about the interesting world thrue the
hackers eyes</p><a href="http://i-c-u.se/LinkerZ/"><img src=
"images/slide-2-image.jpg" alt="learn more" /></a>
</div>
<div class="slide">
<h1>Designz Webdeveloper</h1>
<p>Designz Webdeveloper! oh well the name say it all. A team of web designers
that makes designs to a new level of creating living appearense</p><a href=
"http://i-c-u.se/EliteDesignz/index.html"><img src="images/slide-1-image.jpg"
alt="learn more" /></a>
</div>
<div class="slide">
<h1>I-C-U Chat</h1>
<p>The place for you that got somthing to say! A place for the sharing of
interest off all from hacking to music to security etc...</p><a href=
"http://i-c-u.se/icuchatter.html"><img src="images/slide-3-image.jpg" alt=
"" /></a>
</div>
</div>
</div>
</div>
</body>
</html>
HTML Code: { margin: 0; padding: 0; } body { font-family: "Lucida Grande", Arial, Sans-Serif;
background: #000;} a { text-decoration: none; outline: none; } a img { border: none; }
h2 { font-family: Georgia, Serif; font-size: 36px; text-align: center; font-weight:
normal; } #page-wrap { background: black; width: 980px; margin: 0 auto; padding: 50px
0; } #slider { background: white url(../images/slider-bg.jpg); height: 475px; overflow:
hidden; position: relative; margin: 50px 0; } /* DEFAULT is for three panels in width,
adjust as needed This only matters if JS is OFF, otherwise JS sets this. */ #mover {
width: 2800px; position: relative; } .slide { padding: 40px 30px; width: 900px; float:
left; position: relative; } .slide h1 { font-family: Helvetica, Sans-Serif; font-size:
30px; letter-spacing: -1px; color: #ac0000; } .slide p { color: #000000; font-size:
12px; line-height: 22px; width: 300px; } .slide img { position: absolute; top: 20px;
left: 400px; } #slider-stopper { position: absolute; top: 1px; right: 20px; background:
#ac0000; color: white; padding: 3px 8px; font-size: 10px; text-transform: uppercase;
z-index: 1000; }
I want to create this type of a navigation utility to scroll through large amounts of pictures 5 at a time. The picture links will be stored in an array. Any suggestions as to how I should code this? I work in asp if that matters. Code: <table> <tr> <td style="background-color:#cccccc;border:medium inset #ececec;padding:0;"> <input type="button" name="first" id="first" value="First 5" /> <input type="button" name="previous" id="previous" value="<<Prev 5<<" /> <input type="button" name="next" id="next" value=">>Next 5>>" /> <input type="button" name="last" id="last" value="Last 5" /> </td> </tr> </table> Thanks in advance! Hi all i have a website banner wich i want as my signature so when someone clicks on it they go to my website i just need the html code for it if anyone can help thanx alot. Cheers Jacob Hi, Maybe this has been asked a thounsand times in this forum, but I haven't been here for a while. I would like to know how this is done: You have a button with a thumbnail of a picture that you click and this zoom in in the same page, then you click it back to zoom out. Any help will be appreciated. Thanks I'm trying to make a picture button. I have a little so far can you help with the rest. <input type="button" onclick="javascript:alert('Noob, u fell for it!!!')" /> Hey everyone, im making a website for my girlfriend... lol and she wants me to upload pictures of her product on a webpage what is the code segment for doing this? thanks alot for everyones help im starting to get the hang of this Hi everyone, I have a page that displays 40 pictures (of paintings) with a short description of each. I am trying to think of a way to enable a user to add whichever paintings they want to a list. Basically, so they do not have to scroll through the whole page to view specific paintings. I thought about converting the page from XHTML to ASP.Net and then addign checkboxes under each picture. I thought about using C# to get a list of the checkboxes checked. How do I then display a new page (or somewhere on the same page) with only the selected graphics? Any ideas would be appreciated. I am a newbie at web programming. Thank you! Marc |
|||||||