dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Sep 2009
    Location
    Indianapolis, Indiana
    Posts
    21

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

    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!

  2. #2
    Join Date
    Jan 2008
    Posts
    25

    picture change on a mouse click?

    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.

  3. #3
    Join Date
    Sep 2009
    Location
    Indianapolis, Indiana
    Posts
    21
    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!

  4. #4
    Join Date
    Jan 2008
    Posts
    25

    random images

    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/

  5. #5
    Join Date
    Sep 2009
    Location
    Indianapolis, Indiana
    Posts
    21

    Current Code

    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...ossa.gif&#39;;
    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>

  6. #6
    Join Date
    Feb 2014
    Posts
    1
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles