42 users online (0 members and 42 guests)  


  Results 1 to 4 of 4

Related

  1. Mouseover Text Color Changes in Multiple Colors    Forum: Javascript Forum
    Replies: 3
  2. Help with mouseover    Forum: HTML Forum
    Replies: 3
  3. Change to multiple mouseover help!    Forum: Javascript Forum
    Replies: 1
  4. mouseover    Forum: HTML Forum
    Replies: 4
  1. #1
    tgr1227's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2006
    Posts
    3

    Mouseover with multiple changes

    Looking for script that will:
    Upon mouseover of image A change to image B and change image C to image D and change text A to text B.
    Basicly change two image object and 1 text object upon mouseover.
    Please help.

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Mouseover with multiple changes


    Hi there tgr1227,

    and a warm welcome to these forums.

    Have a look at this example, it may suit your requirements...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://mysite.orange.co.uk/azygous/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    img {
        margin: 0 20px;
        border:3px double #999;
     }
    #text {
        margin-top:30px;
        text-align:center;
     }
    </style>
    
    <script type="text/javascript">
    window.onload=function() {
       obj0=document.getElementById('image_a');
       obj1=document.getElementById('image_b');
       obj2=document.getElementById('text');
    obj0.onmouseover=function() {
       this.src='images/banana.jpg';
       obj1.src='images/ball_shad_r.jpg';
       obj2.firstChild.nodeValue='this text has been changed';
     }
    obj0.onmouseout=function() {
       this.src='images/apple0.jpg';
       obj1.src='images/ball_shad.jpg';
       obj2.firstChild.nodeValue='this is text';
      }
     }
    </script>
    
    </head>
    <body>
    
    <div>
    image A<img id="image_a" src="images/apple0.jpg" alt=""/>
    image B<img id="image_b" src="images/ball_shad.jpg" alt=""/>
    </div>
    
    <div id="text">
    this is text
    </div>
    
    </body>
    </html>

  3. #3
    tgr1227's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2006
    Posts
    3

    Re: Mouseover with multiple changes

    Coothead,
    That is exactly what I was looking for. Thanks for your help.

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Mouseover with multiple changes


    No problem, you're very welcome.



Tags for this Thread