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

Thread: image roll over

  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    South Africa
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    image roll over

    I am trying to create a multiple image rollover and when you click on an image, the page will direct to a relevant external website. However only the first image changes when you rollover it, the other four images will not change. Any suggestions??

    Code:
    <HTML><HEAD><TITLE>Monsters Inc Rollover Images</TITLE>
    <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <SCRIPT language=Javascript type=text/javascript>
    <!--
    
    var monstersincON = new Image;
    var sulley = new Image;
    var mike = new Image;
    var booON = new Image;
    var randallON = new Image;
    
    var monstersincOFF = new Image;
    var sulleyOFF = new Image;
    var mikeOFF = new Image;
    var booOFF = new Image;
    var randallOFF = new Image;
    
    monstersincON.src = "../images/monstersinc.jpg";
    sulleyON.src = "../images/scully.jpg";
    mikeON.src = "../images/mike.jpg";
    booON.src = "../images/boo.jpg";
    randallON.src = "../images/randall.jpg";
    
    monstersincOFF.src = "../images/monstersincoff.jpg";
    sulleyOFF.src = "../images/scullyoff.jpg";
    mikeOFF.src = "../images/mikeoff.jpg";
    booOFF.src = "../images/boooff.jpg";
    randallOFF.src = "../images/randalloff.jpg";
    
    /* Callout: This function takes two parameters, the version name (ON or OFF) and the image name. This makes it possible to handle all image swapping with only this one function. */
    
    function swapImage(version, imagename){
        if (document.images){
            document[imagename].src = eval(imagename + version + ".src");
        }
    }
    
    /* Callout: This function turns all images back to their 'off' versions. */
    function rollOffAll(){
        swapImage('OFF','monstersinc');
        swapImage('OFF','sulley');
        swapImage('OFF','mike');
        swapImage('OFF','boo');
        swapImage('OFF','randall');
    }
    //-->
    
    </SCRIPT>
    
    </HEAD>
    <BODY bgColor=white>
    
    <DIV align=center><A onmouseover="swapImage('ON','monstersinc');" 
    onmouseout=rollOffAll(); onclick="rollOffAll();return true;" 
    href="http://.html"><IMG 
    border=0 name=monstersinc alt="Monsters Inc" 
    src="../images/monstersincoff.jpg" width=250 height=250></A> 
    
    <HR>
    
    <BR><A onmouseover="swapImage('ON','sulley');" onmouseout=rollOffAll(); 
    onclick="rollOffAll();return true;" 
    href="http://www..html"><IMG border=0 
    name=sulley alt=Sulley src="../images/sulleyoff.jpg" width=175 
    height=225></A>
    
    <BR><A onmouseover="swapImage('ON','mike');" 
    onmouseout=rollOffAll(); onclick="rollOffAll();return true;" 
    href="http://www..html"><IMG 
    border=0 name=mike alt=Mike src="../images/mikeoff.jpg" width=175 
    height=225></A>
    
    <BR><A onmouseover="swapImage('ON','boo');" 
    onmouseout=rollOffAll(); onclick="rollOffAll();return true;" 
    href="http://www..html"><IMG 
    border=0 name=boo alt=Boo src="../images/boooff.jpg" 
    width=175 height=225></A><BR>
    
    <BR><A onmouseover="swapImage('ON','randall');" 
    onmouseout=rollOffAll(); onclick="rollOffAll();return true;" 
    href="http://www..html"><IMG 
    border=0 name=randall alt=Randall src="../images/randalloff.jpg" 
    width=175 height=225></A><BR>
    
    </DIV>
    </BODY>
    </HTML>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <HTML><HEAD><TITLE>Monsters Inc Rollover Images</TITLE>
    <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <SCRIPT language=Javascript type=text/javascript>
    <!--
    
    var monstersincON = new Image;
    var sulleyON = new Image;
    var mikeON = new Image;
    var booON = new Image;
    var randallON = new Image;
    
    var monstersincOFF = new Image;
    var sulleyOFF = new Image;
    var mikeOFF = new Image;
    var booOFF = new Image;
    var randallOFF = new Image;
    
    monstersincON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
    sulleyON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
    mikeON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
    booON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
    randallON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
    
    monstersincOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    sulleyOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    mikeOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    booOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    randallOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    
    /* Callout: This function takes two parameters, the version name (ON or OFF) and the image name. This makes it possible to handle all image swapping with only this one function. */
    
    function swapImage(version, imagename){
            document.getElementById(imagename).src = window[imagename + version].src;
    }
    
    /* Callout: This function turns all images back to their 'off' versions. */
    function rollOffAll(){
        swapImage('OFF','monstersinc');
        swapImage('OFF','sulley');
        swapImage('OFF','mike');
        swapImage('OFF','boo');
        swapImage('OFF','randall');
    }
    //-->
    
    </SCRIPT>
    
    </HEAD>
    <BODY bgColor=white>
    
    <DIV align=center><A onmouseover="swapImage('ON','monstersinc');"
    onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
    href="http://.html"><IMG
    border=0 id=monstersinc alt="Monsters Inc"
    src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=250 height=250></A>
    
    <HR>
    
    <BR><A onmouseover="swapImage('ON','sulley');" onmouseout=rollOffAll();
    onclick="rollOffAll();return true;"
    href="http://www..html"><IMG border=0
    id=sulley alt=Sulley src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=175
    height=225></A>
    
    <BR><A onmouseover="swapImage('ON','mike');"
    onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
    href="http://www..html"><IMG
    border=0 id=mike alt=Mike src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=175
    height=225></A>
    
    <BR><A onmouseover="swapImage('ON','boo');"
    onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
    href="http://www..html"><IMG
    border=0 id=boo alt=Boo src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
    width=175 height=225></A><BR>
    
    <BR><A onmouseover="swapImage('ON','randall');"
    onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
    href="http://www..html"><IMG
    border=0 id=randall alt=Randall src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
    width=175 height=225></A><BR>
    
    </DIV>
    </BODY>
    </HTML>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    helen11 (12-13-2011)


  •  

    LinkBacks (?)


    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
    •