JavaScript question — onMouseOver event

StackOverflow https://stackoverflow.com/questions/2611985

  •  25-09-2019
  •  | 
  •  

Question

Why doesn't this piece of code swap images on mouse-over as intended?:

<a href="#" onMouseOver="
 if (document.the_image.src == '01.jpg')
 {
  document.the_image.src = '02.jpg';
 }
 else if (document.the_image.src == '02.jpg')
 {
  document.the_image.src = '03.jpg';
 }
 else
 {
  document.the_image.src = '01.jpg';
 }
 ">
Some image</a><br>
Was it helpful?

Solution

Most likely in the rendered HTML, the image source is an absolute URL, so the src is probably "http://mydomain.com/01.jpg"

To test this, try setting an alert() in your code to see what the actual src value is

You should probably also put that code in a function, that's a lot of javascript to put in inline HTML.

OTHER TIPS

To complement @jaywon answer, if that is the case you can use this to ensure that it is matching regardless of absolute or relative URL.

if (document.the_image.src.indexOf('01.jpg') > 0) {
...
}

Finally, I've figured out how to post the complete code. Thanks very much!:

<HTML>
<head>

<title></title>
<script language="javascript">
    var name = prompt('What is your name?', '');
    document.writeln('Welcome, ' + name + '.');
</script>
</head>


<body>

<a href="#" onMouseOver="
    if (document.the_image.src == '01.jpg')
    {
        document.the_image.src = '02.jpg';
    }
    else if (document.the_image.src == '02.jpg')
    {
        document.the_image.src = '03.jpg';
    }
    else
    {
        document.the_image.src = '01.jpg';
    }
    ">
<img src="01.jpg" name="the_image"></a><br>


</body>

</HTML>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top