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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    OnMouseOver not working with second button

    I wrote a short HTML script to test onmouseover action on a button within a <a> tag.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Mouse Over Test</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        }
    
    html {
        font-size: 100%;
        }
    
    body {
        font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
        }
    
    #wrapper {
        font-size: 1.2em;
        line-height: 1.5em;
        }
    
    p {
        margin-bottom: 1.5em;
        }
    
    </style>
    </head>
    <body>
      <div class="wrapper">
        <a onmouseover="mypicture.src='../include/admin_mo.png'"
           onmouseout="mypicture.src='../include/admin.png'"; href="../src/admin.html">
          <img src="../include/admin.png" width="97" height="43" border="0" name="mypicture" />
        </a>
        <a href="../src/admin.html"
          onmouseover="mypicture.src='../include/addbook_mo.png'"
          onmouseout="mypicture.src='../include/addbook.png'">
          <img src="../include/addbook.png" width="97" height="43" border="0" name="mypicture" />
        </a>
      </div>
    </body>
    </html>
    The button is suppose to change colour when the mouse is over it. I does it when only one button is displayed. When the second button is included the onmouseover will not work.

    I'm thinking that this has something to do with the properties of the <a> tag but I can't see it.

    Why does the addition of another button cause the onmouseover to fail??

    Any suggestions would be helpful.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You have introduced a duplicate name attribute with the second tag.

    Worth mentioning that if you're just trying to change the background image on a link (say) then you can achieve this purely with css:

    Code:
    #mylink{display:block;width97px;height:43px;background-image:url(my_image.jpg)}
    #mylink:hover{background-image:url(my_other_image.jpg)}
    If javascript is your way forward, you might want to Google "unobtrusive javascript" for some good pointers.
    Last edited by SB65; 02-15-2012 at 02:36 PM.

  • Users who have thanked SB65 for this post:

    TorMike (02-15-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow. I just changed the name and it's working.

    Thanks. I'm going to try the css solution, it seems a lot easier to use and maintain.


  •  

    Posting Permissions

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