I’m a beginner here. I am stuck, and the code is not working. I have used a validator, which makes me more confused. I can’t get the div(message) image to change to different images upon hovering.
I nailed the other events but with the images and hovering effect, I can’t seem to get it. I keep getting the following errors for this code:
Line 1, Column 23: ‘function closure expressions’ is only available in
Mozilla JavaScript extensions (use the moz option). Line 5, Column 23:
‘function closure expressions’ is only available in Mozilla JavaScript
extensions (use moz option).
The image display it needs to return back to onmouseout.
function onmouseenter()
document.getElementById('img').innerHTML = "img"
function onmouseleave()
document.getElementById("image").innerHTML = "image"
<div id="image">
Hover over an image below to display image.
</div>
<img class="preview" alt="Styling with a Bandana" img.id="img" ; src="https://west-2.amazonaw.jpg" onmouseenter="img()" onmouseleave="image()">
3
Answers
onmouseenter
andonmouseleave
are going to call your function when you do those actions. So you need to give them a function to call when those actions happen.You can change the function to do whatever you want but it would be something like that.
Here is a working snippet.
I tried to leave the html as original as possible. There were two problems with it:
I added a .css file so that images would not shift around crazily as you hovered over them.
The Javascript assigns an to the innerHTML when you hover over the preview image.
Function no
{}
, you need add{}
in function, here is changed code:In the other, the
img
is close tag, you can’t let a close tag setinnerHTML
attribute. Because it not exist.Even img’s
id
attribute not set, you setimg.id
is invalid.Sorry, I can’t understand the code’s mean. You should use
setAttribute
method to change a attribute.