I have done my research and looked at tons of things, but none of them are working for me. This is my code at the moment. The original image displays fine, but nothing happens when I hover.
Javascript (In <head>)
<script>
function onHover()
{
$("#news").attr('src', 'img/newsHover.png');
}
function offHover()
{
$("#news").attr('src', 'img/news.png');
}
</script>
HTML
<img id="news" onmouseover="onHover();" onmouseout="offHover();" height="100px" width="100px" src="img/news.png"></a>
I have done my research and looked at tons of things, but none of them are working for me. This is my code at the moment. The original image displays fine, but nothing happens when I hover.
Javascript (In <head>)
<script>
function onHover()
{
$("#news").attr('src', 'img/newsHover.png');
}
function offHover()
{
$("#news").attr('src', 'img/news.png');
}
</script>
HTML
<img id="news" onmouseover="onHover();" onmouseout="offHover();" height="100px" width="100px" src="img/news.png"></a>
- Your code is correct. Please check console for any other errors. – roshan Commented Feb 8, 2015 at 19:27
- The code is correct. Check image paths and the console for errors. Here is a working jsfiddle – Viktor Bahtev Commented Feb 8, 2015 at 19:30
- 1 While you are using jQuery, you might have a look at jQuery hover. Taking the onmouse from the html may make your page better maintainable – bart s Commented Feb 8, 2015 at 19:31
- I think it is because of "/" at the beginning of your image path.Change "/img/newsHover.png" to "img/newsHover.png". – roshan Commented Feb 8, 2015 at 19:34
-
Console reports
"$" is not definedand I changed the path to remove the first / but it still wouldn't work. .hover doesn't work either, that is what I first tried. Maybe the problem is with .attr? – STFLightning Commented Feb 9, 2015 at 9:00
4 Answers
Reset to default 6A pure java script answer, no need of any external functions or jquery
<img id="news" onmouseover="this.src='img/newsHover.png'" onmouseout="this.src='img/news.png'" height="100px" width="100px" src="img/news.png">
There may be a good reason for what you're doing, but are you sure you need to use JavaScript?
If you're not doing anything fancy then it would probably be better to use the CSS hover selector: http://www.w3schools./cssref/sel_hover.asp
this is very easy example, not animation:
HTML:
<img src='https://cdn2.iconfinder./data/icons/crystalproject/128x128/apps/clean.png'>
use jQuery:
$(document).ready(function(){
$('img').hover(
function(){$(this).attr("src","https://cdn2.iconfinder./data/icons/crystalproject/128x128/apps/exit.png")},
function(){$(this).attr("src","https://cdn2.iconfinder./data/icons/crystalproject/128x128/apps/clean.png")}
);
});
Example Not Animation
And this is example with animation:
HTML:
<img src='https://cdn2.iconfinder./data/icons/crystalproject/128x128/apps/clean.png' class='clean' >
<img src='https://cdn2.iconfinder./data/icons/crystalproject/128x128/apps/exit.png' class='exit' >
CSS:
img{
position:absolute;
top:0;
left:0;
}
use jQuery:
$(document).ready(function(){
$(".exit").hide();
$(".clean").hover(function(){
$(".clean").fadeOut();
$(".exit").fadeIn();
});
$(".clean").mouseleave(function(){
$(".exit").fadeOut();
$(".clean").fadeIn();
});
});
Example With Animation
So you can use only this example:
<img
src='https://cdn2.iconfinder./data/icons/crystalproject/128x128/apps/clean.png'
onmouseover="this.src='https://cdn2.iconfinder./data/icons/crystalproject/128x128/apps/exit.png'"
onmouseout="this.src='https://cdn2.iconfinder./data/icons/crystalproject/128x128/apps/clean.png'"
height="100px"
width="100px"
id="news"
>
EXAMPLE