Search jQuery

jQuery Forum

.html not working

in Using jQuery • 10 years ago

Hello,

I was wondering why this usage of the .html() function is not working and was hoping someone can help me fix the code to get it to work.

What I am trying to do is to replace one image with another image on hover of the first image and then put the second-image back off hover.

Here is my code:

$(document).ready(function(){

$("#header_content").hover(function(){

$(this).html("<img id='header_content' src='header_hover.png' alt='hover-image' />");

$(this).html("<img id='header_content' src='header.png' alt='image' />");

});

I would really appreciate any and all help with this!

Thanks in Advance!

Replies(5)

kbwood.au

Re: .html not working

10 years ago

Your hover function hasn't been completed properly:

$(function() { // Shorthand for $(document).ready(function() {
$('#header_content').hover(function() {
$(this).html('<img id="header_content" src="header_hover.png" alt="hover-image"/>');
}, function() {
$(this).html('<img id="header_content" src="header.png" alt="image"/>');
});
});

xmasmi

Re: .html not working

10 years ago

Oh okay. Sorry about that.

Hmm well, i made that change, but it is still not working. By which I mean nothing happens on hover of the first image.

Here is my code:

$(document).ready(function(){

$("#header_content").hover(function(){

$(this).html("<img id='header_content' src='header_hover.png' alt='Drag Down' />");

},function(){

$(this).html("<img id='header_content' src='header.png' alt='The Irf' />");

});

Did i made another stupid mistake?

Godsbest

Re: .html not working

10 years ago

Remember that the img tag is not a container tag so you have to manipulate its src attribute.

$(document).ready(function(){
  $("#header_content").hover(function(){
  $(this).attr('src', 'header_hover.png');
  },function(){
  $(this).attr('src', 'header.png' );
  });
});

See it in action at: http://jsfiddle.net/DtvFp/

xmasmi