image change when user places mouse hover link [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have an image inside a link like this:
<img src="img/post.png">
all I want is the image to change to "post_light.png" when user places mouse hover link. Any idea which is the easier way to do this?

Answer 1

Pure HTML
<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">

Answer 2

You have already asked this. Please do not ask twice, instead edit your first question if needed.
With only HTML and CSS, it is not posible to change the source of image. If you change the IMG tag to a DIV tag, then you can change the image that is set as the background.
div {
background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
background: url('http://www.placehold.it/100x100/000001');
}
Be aware of the possible SEO and screen reader complications that can arise from this.

Answer 3

You can do something like this:
<a class="switch-image" href="start_post_job.php">
<img class="main-img" src="img/post.png">
<img class="caption-img" src="img/post-light.png">
</a>
The styling:
.main-img{
z-index; // This might not be required
}
.caption-img{
z-index:10;
display:none;
}
.swith-image:hover > .caption-img{
display:inline-block; // either this or block
}
.swith-image:hover > .main-img{
display:none;
}
This should switch the images. Just you play around with it, I think you should beable to do this just by changing the display property of the two or just by changing the z-index.