OnMouseOver not working with second button [Archive]

TorMike

02-15-2012, 02:08 PM

I wrote a short HTML script to test onmouseover action on a button within a <a> tag.
<!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.

SB65

02-15-2012, 02:28 PM

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:

#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.