www.webdeveloper.com
Results 1 to 2 of 2

Thread: multiple image rollover

  1. #1
    Join Date
    May 2009
    Posts
    16

    multiple image rollover

    I have scored the internet looking for a solution. Nothing works as it says. Here it is:

    I have an image with text next to it. The whole thing is encased as an anchor. Using css, I can change the text. I want to change the image, also.

    here is the basic code:

    Code:
    <li><a href="#"
    onMouseOver="imgOn('img1')"
    onMouseOut="imgOff('img1')">
    <img class="fltlt" src="images/phone.gif" name="img1" alt="Lower Utility Rates - phone icon" />
    	<div class="fltlt">
    	<span class="iconHead">Phone:</span><br />
    	Local or Long-Distance<br />even Wireless</div></a></li>
    and the ls:

    Code:
    <SCRIPT LANGUAGE = "JavaScript">
    <!--
    
    if (document.images) {
    	
    	img1on = new Image();           // The onmouseover image
    	img1on.src = "phone_hover.gif";  
    	img2on = new Image();
    	img2on.src = "internet_hover.gif";  
    	img3on = new Image();
    	img3on.src = "electricity_hover.gif";
    	img4on = new Image();
    	img4on.src = "television_hover.gif";
    	img5on = new Image();
    	img5on.src = "alarms_hover.gif";
    	img1off = new Image();          // The normally seen image
    	img1off.src = "phone.gif"; 
    	img2off = new Image();
    	img2off.src = "internet.gif"; 
    	img3off = new Image();
    	img3off.src = "electricity.gif";
    	img4off = new Image();
    	img4off.src = "television.gif";
    	img5off = new Image();
    	img5off.src = "alarms.gif";
    	
      }				  //This function changes the image when over.
        function imgOn(imgName) {
                if (document.images) {
                document[imgName].src = eval(imgName + "on.src");
                }
        }				   //This function changes the image back when off.
        function imgOff(imgName) {
                if (document.images) {
                document[imgName].src = eval(imgName + "off.src");        
                }
        }
    // -->
    </SCRIPT>
    I know the above code is lengthy. I have tried using many different versions from all over the web. This is just the current one.

    In a nutshell: I have an image and text. When the mouse hovers on the text our the image, I want both the text and image to change. I can get the text to change using css, but I can't get anything to work for the image...

    Please help!!!

  2. #2
    Join Date
    May 2009
    Posts
    150
    This can very nearly be done in pure CSS, it doesn't quite work in IE at the moment but if you check this page: http://www.grc.com/menudemo.htm you should be able to get it working. Or you could use this as a basis for a javascript implementation, using JS to adjust div (or span) properties in IE.

    Partial solution, avoiding the (IMHO) ugly use of eval and excess JS:

    http://y-less.pastebin.ca/1426579

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