|
JavaScript - Changing An Image Daily For A Month
Greetings. I am trying to create an "image of the day" for a site where the image will change automatically every 24 hours. Currently, I have 30 images in a folder named "petday" (no quotes) and I tried the following code (found in this forum) but I cannot get it to work. Any help or suggestions would be greatly appreciated. On a side note, I am very new to JavaScript and I know there is an easier way to write this but I am not real clear on how to do it. I have been reading the lessons found at W3 schools and I think I can use a switch statement? Is that correct?
Code: <SCRIPT Language="JavaScript">
var now = new Date();
var dd = now.getDate();
if (dd==1)
document.write('<img src="petday/image1.jpg">');
else if (dd==2)
document.write('<img src="petday/image2.jpg">');
else if (dd==3)
document.write('<img src="petday/image3.jpg">');
else if (dd==4)
document.write('<img src="petday/image4.jpg">');
else if (dd==5)
document.write('<img src="petday/image5.jpg">');
else if (dd==6)
document.write('<img src="petday/image6.jpg">');
else if (dd==7)
document.write('<img src="petday/image7.jpg">');
else if (dd==8)
document.write('<img src="petday/image8.jpg">');
else if (dd==9)
document.write('<img src="petday/image9.jpg">');
else if (dd==10)
document.write('<img src="petday/image10.jpg">');
else if (dd==11)
document.write('<img src="petday/image11.jpg">');
else if (dd==12)
document.write('<img src="petday/image12.jpg">');
else if (dd==13)
document.write('<img src="petday/image13.jpg">');
else if (dd==14)
document.write('<img src="petday/image14.jpg">');
else if (dd==15)
document.write('<img src="petday/image15.jpg">');
else if (dd==16)
document.write('<img src="petday/image16.jpg">');
else if (dd==17)
document.write('<img src="petday/image17.jpg">');
else if (dd==18)
document.write('<img src="petday/image18.jpg">');
else if (dd==19)
document.write('<img src="petday/image19.jpg">');
else if (dd==20)
document.write('<img src="petday/image20.jpg">');
else if (dd==21)
document.write('<img src="petday/image21.jpg">');
else if (dd==22)
document.write('<img src="petday/image22.jpg">');
else if (dd==23)
document.write('<img src="petday/image23.jpg">');
else if (dd==24)
document.write('<img src="petday/image24.jpg">');
else if (dd==25)
document.write('<img src="petday/image25.jpg">');
else if (dd==26)
document.write('<img src="petday/image26.jpg">');
else if (dd==27)
document.write('<img src="petday/image27.jpg">');
else if (dd==28)
document.write('<img src="petday/image28.jpg">');
else if (dd==29)
document.write('<img src="petday/image29.jpg">');
else if (dd==30)
document.write('<img src="petday/image30.jpg">');
</SCRIPT>
Similar TutorialsI work at a college radio station and our brand new website just went live, but we're having one particular issue... We have a set list of shows that air each day, and on the site we have a marquee tag on the homepage that scrolls through showing each show and its broadcast time. Right now we're stuck changing this schedule each day by hand, but it's tough considering we're all college students ourselves and sometimes our own schedules simply don't allow the time. Is there a code that would allow this kind of a daily update to happen automatically? The format for the schedule is such: 4 - 5 pm // "Show 01" 5 - 6 pm // "Show 02" 6 - 8 pm // "Show 03" 8 - 10 pm // "Show 04" 10 - 12 am // "Show 05" Any help would be very much appreciated! I have one image on a page and I am trying to mix 2 javascripts actions on that image: - the first one is an automatic daily change of images (3 different images in this example) - the second one is the display of the same image in bigger when the mouse is over it. The total of images are 6 (2 different sizes for 3 images). I have made a search but I didn't find the solution. Here is the code (the daily change works but not the rollover. Thank you to correct it or giving an other solution. (My level in Javascript: low) [CODE]<SCRIPT LANGUAGE="JavaScript"> function todaysPhoto(){ var i= 3 ; var todaysFoto=new Array(); todaysFoto[1]="img1_small.jpg"; todaysFoto[2]="img2_small.jpg"; todaysFoto[3]="img3_small.jpg"; var todaysPic=new Array(); todaysPic[1]="img1_big.jpg"; todaysPic[2]="img2_big.jpg"; todaysPic[3]="img3_big.jpg"; t=new Date().getTime(); var days=Math.floor(t / 86400000) % i+1; document.getElementById("todaysfoto").src="images/photos/"+todaysFoto[days]; function SwapImg(){ document.todaysfoto.src ="images/photos/"+todaysPic[days]; return true;} function SwapBack(){ document.todaysfoto.src ="images/photos/"+todaysFoto[days]; return true;} </SCRIPT> <body onload="todaysPhoto()"> <a href="" onmouseover="SwapImg()" onmouseout="SwapBack()"> <img name="todaysfoto" width="150px" height="100px" id ="todaysfoto" /></a>[CODE] I'm using a image of the day script and my pictures will not be located at the site where the code will be. Code: images[0] = "<img src='yourimage.jpg'>" Do I/can I use the link such as <a href="http://www.sample.com/mphases.htm"> right where (yourimage) is, in between the quotes to link to an offsite picture? Could someone retype this snippet of code showing how it would look for me? Thanks I came across your forums here and it looked like a great place to get some help, and help is exactly what I need! I have been struggling with this javascript that changes an image and its corresponding useMap. For reference: - All images are the same size and located in the same directory, except the main map image - All images are preloaded (I did this just in case it was an image problem) - The page works fine in Firefox, and fine in IE until it crashes - http://www.forthecode.com/imagemap/untitled.htm The Problem: - When clicking on a state in the main image, the state image appears, if you then click on the "return to the overview" it returns to the overview image then promptly crashes IE within 1-2 seconds. - This even happens in a completely blank page (no other content) Exceptions: - Clicking on the state Mississippi does not cause this problem (you can go back and forth with Mississippi without problem) - Tennessee, Ohio, Arkansas, Illonois crash as soon as their state map comes up! The Javascript function itself: Code: <script language="Javascript">
function changemap(vari){
var vari;
var stoptime;
if(vari=="regionview"){
document.regionmap.src = "/images/branchmap2.jpg";
stoptime = setTimeout( function changemap1(){ document.regionmap.useMap="#Map"; clearTimeout(stoptime);} , 300);
}
else{
document.regionmap.src = "/images/states/" + vari + ".jpg";
stoptime = setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari; clearTimeout(stoptime);} , 300);
}
}
</script>
The image tag and image maps: Code: <img src="images/branchmap2.jpg" name="regionmap" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="144,14,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
<area shape="poly" coords="139,91,137,104,132,108,132,115,128,118,160,110,167,109,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
<area shape="poly" coords="230,138,123,139,121,131,127,122,140,117,153,115,170,107,191,90,194,85,202,87,213,90,221,91,225,90,232,92,232,100,238,107,242,114,245,119" href="#" onClick="javascript: changemap('kentucky');" alt="Kentucky" title="Kentucky">
<area shape="poly" coords="153,177,143,244,144,280,127,287,115,286,113,272,83,271,78,264,86,249,93,239,89,228,88,212,90,202,97,192,105,178" href="#" onMouseUp="javascript: changemap('mississippi');" alt="Mississippi" title="Mississippi">
<area shape="poly" coords="87,226,17,227,16,212,7,212,3,128,108,130,107,142,113,142,120,128,121,131,121,141" href="#" onClick="javascript: changemap('arkansas');" alt="Arkansas" title="Arkansas">
<area shape="poly" coords="246,118,255,98,272,87,284,64,283,11,265,17,258,25,241,31,217,18,187,18,190,81,218,90,224,87,232,92,235,100" href="#" onClick="javascript: changemap('ohio');" alt="Ohio" title="Ohio">
<area shape="poly" coords="124,116,128,121,120,128,111,140,109,129,23,127,21,70,15,60,2,33,74,33,79,39,78,51,95,76,103,77,100,87,101,95,108,103,113,111,114,118" href="#" onClick="javascript: changemap('missouri');" alt="Missouri" title="Missouri">
<area shape="poly" coords="129,117,131,109,136,104,138,91,144,80,142,19,137,4,99,3,102,14,94,22,87,22,90,34,81,45,78,50,94,75,105,77,103,88,104,97,112,107,116,114" href="#" onClick="javascript: changemap('illonois');" alt="Illonois" title="Illonois">
<area shape="poly" coords="204,177,109,176,123,139,249,139" href="#" onMouseUp="javascript: changemap('tennessee');" alt="Tennessee" title="Tennessee">
</map>
<map name="arkansas">
<area shape="rect" coords="240,135,284,163" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
<area shape="circle" coords="209,143,7" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="mississippi">
<area shape="rect" coords="20,177,64,191" href="/branches/jackson.php" alt="Jackson" title="Jackson">
<area shape="circle" coords="103,183,8" href="/branches/jackson.php" alt="Jackson" title="Jackson">
<area shape="rect" coords="217,198,277,214" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
<area shape="circle" coords="175,208,7" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
<area shape="rect" coords="222,96,279,111" href="/branches/columbus.php" alt="Columbus" title="Columbus">
<area shape="circle" coords="195,106,8" href="/branches/columbus.php" alt="Columbus" title="Columbus">
<area shape="rect" coords="222,71,261,85" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
<area shape="circle" coords="174,84,6" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="missouri">
<area shape="rect" coords="195,262,243,275" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
<area shape="circle" coords="216,199,7" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
<area shape="rect" coords="247,173,280,186" href="/branches/ozora.php" alt="Ozora" title="Ozora">
<area shape="circle" coords="206,182,6" href="/branches/ozora.php" alt="Ozora" title="Ozora">
<area shape="rect" coords="232,158,278,169" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
<area shape="circle" coords="194,165,7" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
<area shape="rect" coords="228,128,275,142" href="/branches/stlouis.php" alt="St. Louis" title="St. Louis">
<area shape="circle" coords="206,137,8" href="/branches/stlouis.php" alt="St Louis" title="St Louis">
<area shape="rect" coords="198,97,258,112" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
<area shape="circle" coords="182,130,6" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="kentucky">
<area shape="rect" coords="24,218,72,231" href="/branches/paducah.php" alt="Paducah" title="Paducah">
<area shape="circle" coords="46,190,6" href="/branches/paducah.php" alt="Paducah" title="Paducah">
<area shape="rect" coords="35,127,95,141" href="/branches/henderson.php" alt="Henderson" title="Henderson">
<area shape="circle" coords="63,174,7" href="/branches/henderson.php" alt="Henderson" title="Henderson">
<area shape="rect" coords="94,218,175,232" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
<area shape="circle" coords="127,188,6" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
<area shape="rect" coords="108,75,159,90" href="/branches/louisville.php" alt="Louisville" title="Louisville">
<area shape="circle" coords="144,130,7" href="/branches/louisville.php" alt="Louisville" title="Louisville">
<area shape="rect" coords="179,75,232,89" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
<area shape="circle" coords="193,127,8" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="indiana">
<area shape="rect" coords="18,199,73,213" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
<area shape="circle" coords="110,204,6" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
<area shape="rect" coords="210,180,273,193" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
<area shape="circle" coords="187,186,6" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
<area shape="rect" coords="211,117,276,132" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
<area shape="circle" coords="159,124,5" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
<area shape="rect" coords="211,101,250,113" href="/branches/muncie.php" alt="Muncie" title="Muncie">
<area shape="circle" coords="178,116,7" href="/branches/muncie.php" alt="Muncie" title="Muncie">
<area shape="rect" coords="212,46,257,60" href="/branches/fremont.php" alt="Fremont" title="Fremont">
<area shape="circle" coords="185,55,7" href="/branches/fremont.php" alt="Fremont" title="Fremont">
<area shape="rect" coords="36,73,92,86" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
<area shape="circle" coords="179,79,5" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
<area shape="rect" coords="36,109,87,121" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
<area shape="circle" coords="138,113,6" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="illonois">
<area shape="rect" coords="28,184,89,197" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
<area shape="circle" coords="126,192,6" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
<area shape="circle" coords="148,153,5" href="/branches/effingham.php" alt="Effingham" title="Effingham">
<area shape="rect" coords="218,146,273,159" href="/branches/effingham.php" alt="Effingham" title="Effingham">
<area shape="rect" coords="219,120,260,134" href="/branches/urbana.php" alt="Urbana" title="Urbana">
<area shape="circle" coords="164,130,6" href="/branches/urbana.php" alt="Urbana" title="Urbana">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="tennessee">
<area shape="rect" coords="0,199,49,213" href="/branches/memphis.php" alt="Memphis" title="Memphis">
<area shape="circle" coords="25,170,7" href="/branches/memphis.php" alt="Memphis" title="Memphis">
<area shape="rect" coords="41,80,90,94" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
<area shape="circle" coords="64,149,8" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="ohio">
<area shape="rect" coords="49,221,105,237" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
<area shape="circle" coords="74,162,7" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
<area shape="rect" coords="6,138,46,151" href="/branches/dayton.php" alt="Dayton" title="Dayton">
<area shape="circle" coords="91,146,6" href="/branches/dayton.php" alt="Dayton" title="Dayton">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
This is exactly how it is in my html files. I really appreciate any input, suggestions or comments you can give me. Thanks in advance! Hello All. I'm trying to create a file upload page with pre-uploading preview, and using JS to change the images src upon selecting a local file. this works great, but unfortunatelly only for some image files, even though files were taken by the same camera,the same size, and created on the same date. I can't figure out for the life of me what is going on. The Code : <script> function changeImage(newSrc) var str = newSrc.toLowerCase(); cImg=document.getElementById("chngImg"); cImg.src=str; </script> <HTML> <BODY BGCOLOR="#FFFFFF"> <FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="UploadScript1.asp" rel="nofollow" target="newWnd"> File 1:<INPUT TYPE=FILE NAME="FILE1" onchange="changeImage(this.value);"> <INPUT TYPE=SUBMIT VALUE="Upload!"> </FORM> <div><img src="oren1.jpg" id="chngImg"></div> </BODY> </HTML> Best Regards Oren Pildus First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link). I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked. Help please... Code: <script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
function changeText()
{
document.getElementById('link').innerHTML = 'View Smaller Image';
return false;
}
function changeImage()
{
var newImage = new Image();
newImage.src = "images/cottage_large.jpg";
document.getElementById('thumbnail').src = newImage.src;
return false;
}
/**/
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body>
<h3>Real Estate</h3>
<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
</body>
</html>
After you click on the last button 3 times it should change the background to the zombies image however it isn't working. I haven't found tutorials for doing it exactly as I am attempting it but I don't see why this isn't working. It runs through the code just fine and the button works as intended except for the fact that the background image isn't changing. I am still pretty new to JavaScript however so I feel I may just being calling the image incorrectly. Code: <html>
<title>Welcome :D</title>
<head>
<style type="text/css">
body {
background-color:E6E6E6;
}
</style>
<script type="text/javascript">
//Pre loading images to be used with check boxes.
function preLoad(){
Eyeball= new Image(400,200)
Eyeball.src = "Eyeball.jpg"
Smileys = new Image(400,200)
Smileys.src = "Smileys.gif"
goodAfternoon = new Image(400,200)
goodAfternoon.src = "Good Afternoon.gif"
goodAfternoonFinal = new Image(400,200)
goodAfternoonFinal.src = "Good Afternoon.gif"
zombies=new Image()
zombies.src = "Zombies.jpg"
}
function validate(){
if(document.getElementById("cb1").checked){
document.goodAfternoon.src=Eyeball.src;
}else{
document.goodAfternoon.src=Smileys.src;
}
}
function reset(){
cb1.checked=false;
document.goodAfternoon.src=goodAfternoonFinal.src;
}
var i=0;
function myalert(){
i++
if(i == 1){
alert("I dare you to press me again....");
}
if(i == 2){
}
if(i == 3){
i = 0;
document.body.background = "zombies.src";
}
}
</script>
</head>
<body onLoad="javascript:preLoad()">
This is where I learn a lot of my coding for Java, JavaScript, and HTML
<a href="http://www.thenewboston.com/"><img src="theNewBoston.gif"></a>
</br>
"Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
<img src="Good Afternoon.gif" name="goodAfternoon">
<input type="button" id="cb2" value="RESET" onClick="reset()"/>
</BR></br></br></br></br>
Hello, thank you for visiting my webpage I hope you like it.
<input type="button" onClick="myalert()"value="CLICK me"/>
</body>
</html>
Hi everyone, So I know enough to make an image change when you click on something, but not enough to do what I want to do. Code: <img name="ImageState" src="Image1.jpg" alt="Image"> <A HREF="javascript:void(0)" onclick="ImageState.src='Image1.jpg'">Link 1</A> <A HREF="javascript:void(0)" onclick="ImageState.src='Image2.jpg'">Link 2</A> <A HREF="javascript:void(0)" onclick="ImageState.src='Image3.jpg'">Link 3</A> <A HREF="javascript:void(0)" onclick="ImageState.src='Image4.jpg'">Link 4</A> <A HREF="javascript:void(0)" onclick="ImageState.src='Image5.jpg'">Link 5</A> The problem is that I want the images to only advance in the proper order. For example, if "Image2.jpg" is currently displayed, I want to make it so that only clicking on "Link 3" will advance it to "Image3.jpg" while the other links are still there but do nothing if you click on them. Can anyone tell me how to do this please? Hey, I want javascript to change the background image on hover. This is my javascript: Code: function navOver(obj){
var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
obj.style.background='imgUrl';
}
function navOut(obj){
var imgUrl = 'url(images/' + obj.id + '.png) center no-repeat';
obj.style.background='imgUrl';
}
and this is the HTML: Code: <li id="home" onmouseover="navOver(this)" onmouseout="navOut(this)"></li> This doesn't work, can anyone help me and say me what to do? I would like to change the alignment of an image which currently under div which is under iframe. the page which is called under iframe is readymade html from some other site. I dont have any control on that HTML page which is under iframe. Please tell me how to align image under iframe.
I have problem ,the code cannot operate. I would like your opinion.The user must select in dropdown list having one display of image every time.Thanks js code Code: var sel = document.getElementById("sw");
function f1(){
var imgs = ['chart1.cgi', 'chart2.cgi', 'chart3.cgi', 'chart4.cgi'];
var im = document.getElementById("pic");
im.src = imgs[this.selectedIndex];
}
html code Code: <img id="pic" src="chart1.cgi" /> <select name="sw" id="sw" onchange = "f1()" > <option value="s1">what</option> <option value="s2">whatever 2</option> <option value="s3">whatever 3</option> <option value="s4">whatever 4</option> </select> hello i have this code that tags between three images in an certain amount of time and this works fine Code: <script language = "Javascript">
<?php $count_im=1;
$req=mysql_query("select * from banner");
while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"
<?php $count_im++;
}?>
</script>
Code: <div class="banner">
<p class="banner_image">
<img src="banner/12.jpg" name="slide" width="290px">
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every ... seconds
setTimeout("slideit()",10000)
}
slideit()
//-->
</script>
</p>
</div>
and i want it also to tag between hrefs too, so tried the following but didnt work Code: <?php $count_im=1;
$req=mysql_query("select * from banner");
while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"
var link<?php echo $count_im; ?> =new String()
link<?php echo $count_im; ?>.href="<?php echo $res["banner_title"]; ?>"
<?php $count_im++;
}?>
Code: <div class="banner">
<p class="banner_image">
<a href="" rel="nofollow" target="_blank" name="links">
<img src="banner/12.12" name="slide" width="290px"></a>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
document.a.links.href=eval("link"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every ... seconds
setTimeout("slideit()",10000)
}
slideit()
//-->
</script>
</p>
</div>
anyone can help??? Hi all, I am currently working on a boids related project which involves a few fishes swimming around.(decided to start on only 1 fish 1st) Now I just want to make the fish image change accordingly to the angle that it is swimming towards by calculating the angle, assigning a position to it, and load its corresponding image. But its just not working. The fish just move up and down instead of what I programme to move all around. The image doesnt change either. Please help! Thanks! Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Moving fish, in class 2012-02-08</title>
<!-- include the Sprites library -->
<script src="Sprites3.js"></script>
<script>
var left = 40, top = 40, w = 400, h =300;//the frame
var tick = 10; //ms between redraws
//position and velocity of moving ball
var x = 40; //x position of ball
var y = 40; //y position of ball
var vx = 1; //x component of velocity
var vy = 2; //y component of velocity
var dt = 1; //simulation time step
var anglePosition=1;
//the moving image
var d = 30; //diameter of ball [w and h of sprite]
var fish = new Sprite("goldfish/fish" + anglePosition + ".png", d, d);
function moveOneStep(){
x = x + vx*dt; //new x position
y = y + vy*dt; //new y position
if (x < 0) {//hit left rail
x = -x;
vx = -vx;
}
if (y < 0){//hit bot rail
y = -y;
vy = -vy;
}
if (x > (w-d)){//hit right rail
x = 2*(w-d) - x;
vx = - vx;
}
if (y > (h-d)){//hit top rail
y = 2*(h-d) - y;
vy = - vy;
}
calculateAngle(vx,vy);
fish.redraw("goldfish/fish" + anglePosition + ".png", x, y);
}//moveOneStep
//cal angle
function calculateAngle(vx,vy)
{
var s = Math.sqrt(vx*vx + vy*vy);
var angle = Math.asin(vy/s) * (180/Math.PI);
if(vx > 0)
{
angle = 90 - (angle);
}
else
{
angle = 270 + (angle);
}
anglePosition = Math.round((((angle/360)*16)*1)/1); //16 positions
return anglePosition;
}//end of function
function init(){
initFrame(left, top, w, h, "#ccc");
fish.draw(x, y);
window.setInterval("moveOneStep()", tick);
}//init
</script>
</head>
<body onload="init()">
</body>
</html>
Hello all, I want to set dynamically a div's background image when the page loads, so I have my code like so: javascript code: window.onload = init; function init(){ $(document).ready(function(){ $('#button1').css('background', 'url(../imagenes/buttonNormal.jpg)'); $('#pg1').css('color', 'black'); $('#pg1').css('font-weight', 'normal'); }); } My CSS stylesheet is like so: #buttonsWrapper { position:relative; margin 50px 0px 0px 0px; } .buttons { text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:17px; font-weight:bold; color:#FFF; } #button1 { margin: 31px 0px 0px 0px; } #button2 { margin: -43px 0px 0px 195px; } #button3 { margin: -43px 0px 0px 390px; } #button4 { margin: -43px 0px 0px 585px; } #button5 { margin: -43px 0px 0px 780px; } #button1, #button2, #button3, #button4, #button5 { width:172px; height:33px; /* 33px */ padding-top:10px; text-align:center; } #button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover { background-image:url(../imagenes/buttonNormal.jpg); background-repeat:no-repeat; background-position:top; } My HTML sourcecode is like so: <div id="buttonsWrapper"> <div id="button1"><a href="#" id="pg1" class="buttons">link1</a></div> <div id="button2"><a href="#" id="pg2" class="buttons">link2</a></div> <div id="button3"><a href="#" id="pg3" class="buttons">link3</a></div> <div id="button4"><a href="#" id="pg4" class="buttons">link4</a></div> <div id="button5"><a href="#" id="pg5" class="buttons">link5</a></div> </div> The thing is that the background image that I'm calling (../imagenes/buttonNormal.jpg) is not loading for some reason... what am I doing wrong? Thank you so much in advance... I am trying to make a button that would change the background image whenever somebody clicks it. I have tried something along the lines of this: Quote: <input type="button" value="Pattern1" onClick="background-image: url(background.png);background-repeat: no-repeat;"> and, Quote: <input type="button" value="Pattern2" onClick="background: url(background.png);background-repeat: no-repeat;"> as you can see, I am a beginner at coding in general so any help is appreciated. My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong. I am completely a beginner at coding and really do not know much right now. This is the day of week link rotation script which works just great: Code: <script type="text/javascript">
<!--
var MyEveryDayLinks = [
['Sunday', 'http://www.google.com', 'Google'],
['Monday', 'myURL', 'LinkName'],
['Tuesday', 'myURL', 'LinkName'],
['Wednesday', 'myURL', 'LinkName'],
['Thursday', 'myURL', 'LinkName'],
['Friday', 'myURL', 'LinkName'],
['Saturday', 'myURL', 'LinkName']
];
var today = new Date();
var L = today.getDay();
document.write('Today is ' + MyEveryDayLinks[L][0] + '. My daily
URLs: <a href="' + MyEveryDayLinks[L][1] + '">' +
MyEveryDayLinks[L][2] + '<\/a>.') ;
// -->
</script>
Unfortunately I can't open urls in a new window. I would so like this to work...but don't know why i can't make it work. I've tried something like this with no luck...any ideas?: Code: <a href="javascript:[window.open(' + MyEveryDayLinks[L][1] + ', 'height=200, width=200',)];">' + MyEveryDayLinks[L][2] + '<\/a>.') ;
Using the following script: <script language="JavaScript">TargetDate = "01/22/2010 7:50 AM UTC-0500"; BackColor = "palegreen"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "Call In Now!!! Lines Are Open" </script> Want target date to equal every day so it resets after the target date and time is hit. Optionally, it would be nice to have it reset 60 minutes after target is hit (so the FinishMessage can display) but if that's too complicated, I'd be happy to not have to manually reset the date every day. I apologize in advance for being a newbie and this may be a straight-forward and simple issue. Hi there, I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links. I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated. In the <head> section i have this: <script type="text/javascript"> img1 = new Image(); img1.src = "images/party/party.jpg"; img2 = new Image(); img2.src = "images/party/icecream.jpg"; img3 = new Image(); img3.src = "images/party/juice.jpg"; img4 = new Image(); img4.src = "images/party/videogames.jpg"; function change(num){ document.images["linkpic"].src = "img" + num } </script> </head> In the <body> i have: That's my default image <table> <tr> <td width="100"> <img src="images/party/balloon1.jpg" name="linkpic"> </td> <td width="260" valign="top" align="left"> <table> <tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr> <tr><td><a href="Party2.html" onmouseover="change('2')">Icecream </a></td></tr> <tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr> <tr><td><a href="Party4.html" onmouseover="change('4')">Video Games </a></td></tr> </table> </tr> </table> </body> I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on. Any hints and help are appreciated! Thanks! I saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down? Kathy Hi I am trying to stop a preloaded images used in a rollover. The images are linked to a tab navigation system, that open on the same page. if(document.images){ var image_array = new Array(); // path to the directory with images var path = './images/food-drink/food/'; // enumeration of the "active" images image_array[0] = path + "starters_r.png"; image_array[1] = path + "mains_r.png"; image_array[2] = path + "desserts_r.png"; image_array[3] = path + "childrens_r.png"; image_array[4] = path + "sandwiches_r.png"; image_array[5] = path + "meal_r.png"; var preload_image = new Array (); for(var i=0; i<image_array.length; i++){ preload_image[i]= new Image(); preload_image[i].src = image_array[i]; } } function rollover(name, filename){ var fullpath = './images/food-drink/food/' + filename; document.images[name].src = fullpath; } I am trying to change the image with another one, which will change back when a different image is clicked. The problem seems to be that the tab navigation code is disagreeing with other code I have tried. The tab code looks like this and works fine until I add another code with document.getElementById() to the onClick event. function swichtabs(wert) { if (wert=='1'){ /*menu starters tab*/ document.getElementById('tabStarters').className='tab1 tabactive'; document.getElementById('tabMains').className='tab2'; document.getElementById('tabDesserts').className='tab3'; document.getElementById('tabChildrens').className='tab4'; document.getElementById('tabSandwiches').className='tab5'; document.getElementById('tabMeals').className='tab6'; }else if (wert=='2'){ etc... The html code for the image is: <a href="#starters" onmouseout="rollover('btnStarters','starters.png')" onmouseover="rollover('btnStarters','starters_r.png')" onClick="this.onMouseOver=null;this.onMouseOut=null; blendon('starters'); blendoff('mains');etc...; swichtabs('1');" onclick="return false;" title="Starters" id="tabStarters"> <img src="./images/food-drink/food/starters.png" name="btnStarters" width="129" height="30" border="0" /> </a> I would be grateful if you could point me in the right direction. |
|||||||