Javascript and Web Animation
Yo guys and girls I am in a little bit of a pickle with my javascript and was wondering whether anyone can help me. I have written some javascript (below) and its the classic mouseOn and mouseOver function.
Basically the code works with one image, however when I apply it to another image on the same page it works but they don't act seperately, i.e. when I place mouse over the top image the bottom one lights up to but I only want the top image to light up but and when I place mouse over below image that only to light up. Kinda confused? Feel free to download (save target as) the html file containing the code and you will see what I mean exactly.
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="http://www.schilwan.pwp.blueyonder.co.uk/Website/dmw.gif"
}
function mouseOut()
{
document.b1.src ="http://www.schilwan.pwp.blueyonder.co.uk/Website/dmw_grey.gif"
}
</script>
<body>
<a href="http://www.dmwworld.com" target="_blank"
onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Digital Reality" src="http://www.schilwan.pwp.blueyonder.co.uk/Website/dmw_grey.gif" name="b1"/></a>
</body>
<script type="text/javascript">
function mouseOver()
{
document.b2.src ="http://www.schilwan.pwp.blueyonder.co.uk/Website/fusion9.gif"
}
function mouseOut()
{
document.b2.src ="http://www.schilwan.pwp.blueyonder.co.uk/Website/fusion9_grey.gif"
}
</script>
<body>
<a href="http://www.fusion9.com" target="_blank"
onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Digital Reality" src="http://www.schilwan.pwp.blueyonder.co.uk/Website/fusion9_grey.gif" name="b2"/></a>
</body>
Hope you can help. I know my problem is not written in the best way possible but kinda hard to put into words. Here is a link to how it behaves at the moment:
http://www.schilwan.pwp.blueyonder.co.uk/home.html
