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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can a mouseover be used to change a different image?

    I am quite new to JavaScript code and have a challenge. I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change. Is this practical using JavaScript? Any help is greatly appreciated!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Show us the HTML with the background image in place. Yes, this is easy, but that actual code depends on what HTML you are using.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    BODY {
      background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function BG(src){
     document.body.style.backgroundImage='url('+src+')';
    }
    /*]]>*/
    </script>
    </head>
    
    <body>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onmouseover="BG('http://www.vicsjavascripts.org.uk/StdImages/Two.gif');"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" onmouseover="BG('http://www.vicsjavascripts.org.uk/StdImages/Three.gif');"/>
    </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/

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    not sure what you mean but it seen like your code is working fine.

    html
    Code:
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onmouseover="BG(this);" name="Two"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" onmouseover="BG(this);" name="Three"/>
    js
    Code:
    function BG(x){
     document.body.style.backgroundImage='url(http://www.vicsjavascripts.org.uk/StdImages/'+x.name+'.gif)';
    }


  •  

    Posting Permissions

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