Question about images

W

windows

Guest
I have a high school football website that I run. I would like to make my banner on the top of my page have images that change periodically.<br />
<br />
What it would look like is, there would be one image, then another would pop up in its place, then another would follow, etc.<br />
<br />
Is this possible using HTML?<br />
<br />
Here is the link to my page. <br />
<br />
Valencia Football (<!-- m --><a class="postlink" href="http://www.eteamz.com/valenciafootball">http://www.eteamz.com/valenciafootball</a><!-- m -->) <br />
<br />
I'd like to make the two pictures in my banner change to two other different pictures and so on.<br />
<br />
Your help would be extremely appreciated!<br />
Thanks!<!--content-->like this:<br />
<br />
<!-- m --><a class="postlink" href="http://www.crsd.org/">http://www.crsd.org/</a><!-- m --><br />
<br />
3 images change peroidically.<br />
<br />
all you need are GIFS. or a DHTML script. not hard to find. :)<!--content-->I used to use a JavaScript that doesn what you you are looking for. It would show a picture then change it to another every 6 seconds. It done it 3 times then started over.<br />
<br />
<!-- m --><a class="postlink" href="http://www.javascripts.com">http://www.javascripts.com</a><!-- m --><br />
<br />
Is where a good place to look.<!--content-->The pictures in the link you posted is EXACTLY what I would like to do. <br />
<br />
Is there a certain code I need to use. If so, can you post it? I have the images, I just need to know how to put them up the same way your link has them.<br />
<br />
Thanks in advance.<!--content-->those are just animated gifs.<br />
<br />
~alsojeremy<!--content-->heres the javascript to do it...no animated gifs!<br />
<br />
Place this between the <HEAD> and </HEAD> tags<br />
<br />
<script language="JavaScript1.1"><br />
<!--<br />
<br />
var slideimages=new Array()<br />
var slidelinks=new Array()<br />
function slideshowimages(){<br />
for (i=0;i<slideshowimages.arguments.length;i++){<br />
slideimages=new Image()<br />
slideimages.src=http://www.htmlforums.com/archive/index.php/slideshowimages.arguments<br />
}<br />
}<br />
<br />
function slideshowlinks(){<br />
for (i=0;i<slideshowlinks.arguments.length;i++)<br />
slidelinks=slideshowlinks.arguments<br />
}<br />
<br />
function gotoshow(){<br />
if (!window.winslide||winslide.closed)<br />
winslide=window.open(slidelinks[whichlink])<br />
else<br />
winslide.location=slidelinks[whichlink]<br />
winslide.focus()<br />
}<br />
<br />
//--><br />
</script><br />
<br />
Place this anywheres between the <BODY> and </BODY> tags<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"javascript:gotoshow()"><img src="food1.jpg" name="slide" <br />
border=0 width=300 height=375></a><br />
<script><br />
<!--<br />
<br />
//configure the paths of the images, plus corresponding target links<br />
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","foo<br />
d5.jpg")<br />
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285<br />
","http://food.epicurious.com/run/recipe/view?id=10092","http://food<br />
.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.<br />
com/run/recipe/view?id=2876","http://food.epicurious.com/run/recip<br />
e/view?id=20010")<br />
<br />
//configure the speed of the slideshow, in miliseconds<br />
var slideshowspeed=2000<br />
<br />
var whichlink=0<br />
var whichimage=0<br />
function slideit(){<br />
if (!document.images)<br />
return<br />
document.images.slide.src=http://www.htmlforums.com/archive/index.php/slideimages[whichimage].src<br />
whichlink=whichimage<br />
if (whichimage<slideimages.length-1)<br />
whichimage++<br />
else<br />
whichimage=0<br />
setTimeout("slideit()",slideshowspeed)<br />
}<br />
slideit()<br />
<br />
//--><br />
</script><!--content-->wow, nice one; links and everything! Q: does that have to be run with set width/height (i.e., does every image have to be the same size)? i mean if you take out the sizing attributes in the <IMG> tag? ...and i'm guessing that if they do, scrunchage will occur if they're not?<!--content-->I couldn't get it to work?????<!--content-->Transmothra<br />
yes...but if u want banners to show, they r mosty 486 x 60 anyways (i think) so i dont think theres a problem there for what the guy wanted :)<br />
<br />
Scoutt<br />
Well if u really need to use it, u should try again! :) lol but it worked for me, and i dont see y it wouldnt work for you unless you did sumthing wrong?<!--content-->I copied the text and loaded my images and it didn't rotate or slide like it should.<br />
<br />
in fact I get an error on line 22<br />
<br />
<br />
edit: ahh nevermind, it is late.. :P<!--content-->Hey DANDAR,<br />
<br />
It worked!!<br />
<br />
Thanks a million!!!<br />
<br />
That is awesome!<br />
<br />
Now I just need to figure out how to put two of these animations on each side of a single image/banner.<!--content-->what do u mean by that?<!--content-->Not sure if you were replying to me, but if so......<br />
<br />
I want to make two areas of animation on each side of my banner. Here it is.......<br />
<br />
<!-- m --><a class="postlink" href="http://eteamz.com/valenciafootball/images/picturebanner.gif">http://eteamz.com/valenciafootball/imag ... banner.gif</a><!-- m --> <br />
<br />
I'd like to animate the two pictures on each side of the banner.<!--content-->im still not 100% sure about what u mean...but i think i know...and why dont you just use the <td> and </td> tags to do it? you can just use the same code, except take the link part out of it like this: (this is just the body part of the script, you will still have to use the head part pasted above)<br />
<br />
Place this anywheres between the <BODY> and </BODY> tags <br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"java script:gotoshow()"><img src="food1.jpg" name="slide" <br />
border=0 width=300 height=375></a> <br />
<script> <br />
<!-- <br />
<br />
//configure the paths of the images, plus corresponding target links <br />
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","foo <br />
d5.jpg")<br />
<br />
//configure the speed of the slideshow, in miliseconds <br />
var slideshowspeed=2000 <br />
<br />
var whichlink=0 <br />
var whichimage=0 <br />
function slideit(){ <br />
if (!document.images) <br />
return <br />
document.images.slide.src=http://www.htmlforums.com/archive/index.php/slideimages[whichimage].src <br />
whichlink=whichimage <br />
if (whichimage<slideimages.length-1) <br />
whichimage++ <br />
else <br />
whichimage=0 <br />
setTimeout("slideit()",slideshowspeed) <br />
} <br />
slideit() <br />
<br />
//--> <br />
</script><!--content-->
 
You must log in or register to reply here.
Back
Top