Help! Need to create rotating image by mouse click HTML code for 15 images!

@scottdpSep 11.2009

I am a very novice web designer and need a mouse click picture change HTML code. I visited the rotating picture threads on here and they helped but I need something that will make the picture change each time a page/link is clicked.

Please if anyone can guide me through this or offer an example.

Thanks!

to post a comment

JavaScript

5 Comments(s) _↴

@sharonjacksonSep 11.2009 — #I am not sure what you mean.

Do you want a picture that changes every time the page loads?

Do you want a photo gallery where you click on a thumbnail and it changes the big picture?

Please be more specific.?

@scottdpauthorSep 11.2009 — #Thanks for your quick response! I actualy got something to work but I need to do more. I got my 15 images to to loop basically every 3 seconds. I would like to keep them like that but instead of looping in the same order each time I would like them to loop randomly. This is kind of different from what I initially posted but once I figured it out I changed my mind.

I would also like to know how to do what I initially asked. Each time you click a link on my page the image would change randomly. So to answer your question yeah I would like the image to change each time a page loads. If it can be done randomly that would be awesome!

Thank you so much!

@sharonjacksonSep 11.2009 — #Try putting this where you want your random photos:

<SCRIPT LANGUAGE="Javascript">

function banner() { } ; b = new banner() ; n = 0

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_1.jpg' border='0' ALT='Emily Carr'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_2.jpg' border='0' ALT='Picowso'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_3.jpg' border='0' ALT='Monkey in a Baby Carriage'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_4.jpg' border='0' ALT='Mag Pie'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_5.jpg' border='0' ALT='Goldstream Chess Set'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_6.jpg' border='0' ALT='Canadiana Chess Set'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_7.jpg' border='0' ALT='American Pie'></A>"

i=Math.floor(Math.random() * n) ;

document.write( b[i] )

</SCRIPT>

Check it out at www.kayesmillie.com/

@scottdpauthorSep 14.2009 — #This is the current code I am using for my pictures. I want something similar to this except the pictures are selected randomly. If they can't change every four seconds like they are now then on mouse click would be fine but they need to be random. They are website sponsors and I don't want to give one sponsor more credit than another.

<html>

<head>

<title>Website Sponsors</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">

img2 = new Image()

seconds = "4";

function imgOne()

{

setTimeout("imgTwo()", seconds * 1000);

}

function imgTwo()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_delta-services.gif';

setTimeout("imgThree()", seconds * 1000);

}

function imgThree()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_ace-air.gif';

setTimeout("imgFour()", seconds * 1000);

}

function imgFour()

{

document.myimg.src = ' http://miccs.squarespace.com/storage/logo_wilhelm.gif';

setTimeout("imgFive ()", seconds * 1000);

}

function imgFive()

{

document.myimg.src = ' http://miccs.squarespace.com/storage/logo_santarossa.gif';

setTimeout("imgSix()", seconds * 1000);

}

function imgSix()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_trinity.jpg';

setTimeout("imgSeven ()", seconds * 1000);

}

function imgSeven()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_ryan-fireprotection.gif';

setTimeout("imgEight()", seconds * 1000);

}

function imgEight()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_rms.gif';

setTimeout("imgNine ()", seconds * 1000);

}

function imgNine()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_premier-power.gif';

setTimeout("imgTen()", seconds * 1000);

}

function imgTen()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_pepper-construction.gif';

setTimeout("imgEleven ()", seconds * 1000);

}

function imgEleven()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_pcg.gif';

setTimeout("imgTwelve()", seconds * 1000);

}

function imgTwelve()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_milestone.gif';

setTimeout("imgThirteen ()", seconds * 1000);

}

function imgThirteen()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_laceindy.gif';

setTimeout("imgFourteen()", seconds * 1000);

}

function imgFourteen()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_frakes-engineering.gif';

setTimeout("imgFifteen ()", seconds * 1000);

}

function imgFifteen()

{

document.myimg.src = 'http://miccs.squarespace.com/storage/logo_ermco.gif';

setTimeout("imgOne()", seconds * 1000);

}

</script>

</head>

<body onload="imgOne();">

<img src="http://miccs.squarespace.com/storage/logo_ace-air.gif" name="myimg">

</body>

</head>

@avivFeb 26.2014 — #Hello,

I know that it's an old post, but i need help.

This option for random image work perfectly:

<SCRIPT LANGUAGE="Javascript">

function banner() { } ; b = new banner() ; n = 0

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_1.jpg' border='0' ALT='Emily Carr'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_2.jpg' border='0' ALT='Picowso'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_3.jpg' border='0' ALT='Monkey in a Baby Carriage'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_4.jpg' border='0' ALT='Mag Pie'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_5.jpg' border='0' ALT='Goldstream Chess Set'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_6.jpg' border='0' ALT='Canadiana Chess Set'></A>"

b[n++]= "<A HREF='index.html'><IMG SRC='images/interface/banners/banner_7.jpg' border='0' ALT='American Pie'></A>"

i=Math.floor(Math.random() * n) ;

document.write( b[i] )

</SCRIPT>

But i would like that one of the images will always be the first image ( also when someone refersh the page), and also the first image will not be part of the images that changes randomaly on mouse click.

Thank you,

Aviv

Also in #JavaScript _↴

getElementById() within an element Load style sheet using JS Javascript function doesn't work in IE

Success!

Help @scottdp spread the word by sharing this article on Twitter...

Tweet This

Help! Need to create rotating image by mouse click HTML code for 15 images!

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Help! Need to create rotating image by mouse click HTML code for 15 images!

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴