Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple Rollover Images issue

    I have been researching this all over the web for the past couple hours and have it close to working but do not know how to get them working correctly.

    Please reviews the site here:
    http://www.saltartspace.org

    I am attempting to get the 6 rollovers to work correctly but am missing some essential code that enables the html to call the correct mouseout/over source images. I'm probably using incorrect terminology since I am self taught.

    Please review the code I have for the page:

    <script type="text/javascript">

    if( document.images ) {
    var overVariableImg = new Image(); overVariableImg.src = "graphics/home/1box-roll.gif";
    var outVariableImg = new Image(); outA.src = "graphics/home/1box.gif";
    }

    if( document.images ) {
    var overVariableImg = new Image(); overVariableImg.src = "graphics/home/2box-roll.gif";
    var outVariableImg = new Image(); outVariableImg.src = "graphics/home/2box.gif";
    }

    if( document.images ) {
    var overVariableImg = new Image(); overVariableImg.src = "graphics/home/3box-roll.gif";
    var outVariableImg = new Image(); outVariableImg.src = "graphics/home/3box.gif";
    }

    if( document.images ) {
    var overVariableImg = new Image(); overVariableImg.src = "graphics/home/4box-roll.gif";
    var outVariableImg = new Image(); outVariableImg.src = "graphics/home/4box.gif";
    }

    if( document.images ) {
    var overVariableImg = new Image(); overVariableImg.src = "graphics/home/5box-roll.gif";
    var outVariableImg = new Image(); outVariableImg.src = "graphics/home/5box.gif";
    }

    if( document.images ) {
    var overVariableImg = new Image(); overVariableImg.src = "graphics/home/6box-roll.gif";
    var outVariableImg = new Image(); outVariableImg.src = "graphics/home/6box.gif";
    }

    </script>

    <body>

    <div class="homesquare1">
    <a href="about.com"
    onmouseover="if( document.images ) { document.images['1'].src = overVariableImg.src; }"
    onmouseout="if( document.images ) { document.images['1'].src = outVariableImg.src; }">
    <img src="graphics/home/1box.gif" name="1" height="150" width="150" alt="" border="0"></a>
    </div>

    <div class="homesquare2">
    <a href="gallery.com"
    onmouseover="if( document.images ) { document.images['2'].src = overVariableImg.src; }"
    onmouseout="if( document.images ) { document.images['2'].src = outVariableImg.src; }">
    <img src="graphics/home/2box.gif" name="2" height="150" width="150" alt="" border="0"></a>

    </div>

    <div class="homesquare3">
    <a href="projects.com"
    onmouseover="if( document.images ) { document.images['3'].src = overVariableImg.src; }"
    onmouseout="if( document.images ) { document.images['3'].src = outVariableImg.src; }">
    <img src="graphics/home/3box.gif" name="3" height="150" width="150" alt="" border="0"></a>
    </div>

    <div class="homesquare4">
    <a href="/use.com"
    onmouseover="if( document.images ) { document.images['4'].src = overVariableImg.src; }"
    onmouseout="if( document.images ) { document.images['4'].src = outVariableImg.src; }">
    <img src="graphics/home/4box.gif" name="4" height="150" width="150" alt="" border="0"></a>
    </div>

    <div class="homesquare5">
    <a href="/contact.com"
    onmouseover="if( document.images ) { document.images['5'].src = overVariableImg.src; }"
    onmouseout="if( document.images ) { document.images['5'].src = outVariableImg.src; }">
    <img src="graphics/home/5box.gif" name="5" height="150" width="150" alt="" border="0"></a>
    </div>

    <div class="homesquare6">
    <a href="/blog.com"
    onmouseover="if( document.images ) { document.images['6'].src = overVariableImg.src; }"
    onmouseout="if( document.images ) { document.images['6'].src = outVariableImg.src; }">
    <img src="graphics/home/6box.gif" name="6" height="150" width="150" alt="" border="0"></a>
    </div>

    </body>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Consider this ...

    Try this major revision:
    Code:
    <html>
    <head>
    <title>Multiple Rollover Images</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=158929
    
    var overVariableImg = [
      "graphics/home/1box-roll.gif",
      "graphics/home/2box-roll.gif",
      "graphics/home/3box-roll.gif",
      "graphics/home/4box-roll.gif",
      "graphics/home/5box-roll.gif",
      "graphics/home/6box-roll.gif"
    ];
    var outVariableImg = [
      "graphics/home/1box.gif",
      "graphics/home/2box.gif",
      "graphics/home/3box.gif",
      "graphics/home/4box.gif",
      "graphics/home/5box.gif",
      "graphics/home/6box.gif"
    ];
    function RollOver(IDS) {
      var tmp = IDS.split('');
          p = tmp[1]-1;
      if( document.images ) {
    	  document.images[IDS].src = overVariableImg[p];
    	  document.images[IDS].alt = overVariableImg[p];
      }
    }	
    function RollOut(IDS) {
      var tmp = IDS.split('');
          p = tmp[1]-1;
      if( document.images ) {
    	  document.images[IDS].src = outVariableImg[p];
    	  document.images[IDS].alt = outVariableImg[p];
      }
    }	
    </script>
    <body>
    
    <div class="homesquare1">
    <a href="about.com" onmouseover="RollOver('p1')" onmouseout="RollOut('p1')">
    <img src="graphics/home/1box.gif" name="p1" height="150" width="200" alt="p1" border="0">
    </a>
    </div>
    
    <div class="homesquare2">
    <a href="gallery.com" onmouseover="RollOver('p2')" onmouseout="RollOut('p2')">
    <img src="graphics/home/2box.gif" name="p2" height="150" width="200" alt="p2" border="0">
    </a>
    
    </div>
    
    <div class="homesquare3">
    <a href="projects.com" onmouseover="RollOver('p3')" onmouseout="RollOut('p3')">
    <img src="graphics/home/3box.gif" name="p3" height="150" width="200" alt="p3" border="0">
    </a>
    </div>
    
    <div class="homesquare4">
    <a href="/use.com" onmouseover="RollOver('p4')" onmouseout="RollOut('p4')">
    <img src="graphics/home/4box.gif" name="p4" height="150" width="200" alt="p4" border="0">
    </a>
    </div>
    
    <div class="homesquare5">
    <a href="/contact.com" onmouseover="RollOver('p5')" onmouseout="RollOut('p5')">
    <img src="graphics/home/5box.gif" name="p5" height="150" width="200" alt="p5" border="0">
    </a>
    </div>
    
    <div class="homesquare6">
    <a href="/blog.com" onmouseover="RollOver('p6')" onmouseout="RollOut('p6')">
    <img src="graphics/home/6box.gif" name="p6" height="150" width="200" alt="p6" border="0">
    </a>
    </div>
    
    </body> 
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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