www.webdeveloper.com
Results 1 to 3 of 3

Thread: Is this loopable? (rollover image functions)

  1. #1
    Join Date
    Feb 2010
    Posts
    1

    Is this loopable? (rollover image functions)

    Hi, I'm stumbling around in an intro to javascript class like a newborn colt, so I apologize for what is probably a simple question.

    I have a bunch of image thumbnails on an html page, which are all calling independent rollover functions that, when rolled over, changes a separate img tag with the id of "large". They also all call a cookieStore function which does exactly what it says.

    I just feel like this is a complete waste of space, but I can't seem to create a loop that works in the end. Can you think of any way to turn the following 10 functions into one, looped function, that will pull up a different image as different thumbnails are rolled over?

    Code:
    function rolloverImage() {
    document.getElementById('large').src='img1.jpg';
    cookieStore();
    }
    
    function rolloverImage2() {
    document.getElementById('large').src='img2.jpg';
    cookieStore();
    }
    
    function rolloverImage3() {
    document.getElementById('large').src='img3.jpg';
    cookieStore();
    }
    
    function rolloverImage4() {
    document.getElementById('large').src='img4.jpg';
    cookieStore();
    }
    
    function rolloverImage5() {
    document.getElementById('large').src='img5.jpg';
    cookieStore();
    }
    
    function rolloverImage6() {
    document.getElementById('large').src='img6.jpg';
    cookieStore();
    }
    
    function rolloverImage7() {
    document.getElementById('large').src='img7.jpg';
    cookieStore();
    }
    
    function rolloverImage8() {
    document.getElementById('large').src='img8.jpg';
    cookieStore();
    }
    
    function rolloverImage9() {
    document.getElementById('large').src='img9.jpg';
    cookieStore();
    }
    
    function rolloverImage10() {
    document.getElementById('large').src='img10.jpg';
    cookieStore();
    }

  2. #2
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    What about...
    Code:
    function rolloverImage(num) {
      document.getElementById('large').src='img'+num+'.jpg';
      cookieStore();
    }

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441

    Lightbulb Consider these changes ...

    Will this serve your purpose?
    Code:
    <html>
    <head>
    <title>Image Rollovers</title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=225166
    
    function rolloverImage(imgInfo) {
      document.getElementById('large').src=imgInfo;
      document.getElementById('large').alt=imgInfo;
    //  cookieStore();		// code not supplied by requestor
    }
    
    </script>
    <style type="text/css">
    .largeImg { height:400px; width:400px; }
    .smallImg { height:100px; width:100px; }
    </style>
    </head>
    <body>
    <center>
    <img id="large" src="img1.jpg" alt="img1.jpg" class="largeImg">
    <br>
    
    <img id="small0" src="img1.jpg" alt="img1.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    <img id="small1" src="img2.jpg" alt="img2.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    <img id="small2" src="img3.jpg" alt="img3.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    <img id="small3" src="img4.jpg" alt="img4.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    <img id="small4" src="img5.jpg" alt="img5.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    <img id="small5" src="img6.jpg" alt="img6.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    <img id="small6" src="img7.jpg" alt="img7.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    <img id="small7" src="img8.jpg" alt="img8.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    <img id="small8" src="img9.jpg" alt="img9.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    <img id="small9" src="img10.jpg" alt="img10.jpg" class="smallImg" onmouseover="rolloverImage(this.src)">
    </center>
    </body>
    </html>
    Good Luck!

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