jQuery on click change image

[Morsusy2k]

Well..the title says it allI wanna build a navigation bar witch will change images in separate div,like here:http://aquaplan.rs/Lets just start with one button and one image..I tried lots of different stuff online and i couldn't find anything :SSo this is where i stoped:

$(document).ready(function(){$('button').click(function(){  $("#bg").attr('src',"image1.jpg");   }};}};

This only makes the page to blink,i don't know why...help? :PThanks

[Ingolme]

That looks like it will work. The page would "blink" (refresh) under either of the following conditions:

• The button is a link, which isn't the case since you're using the selector for a <button> element.
• The button is inside a form and is considered a submit button.

If your button is inside a form then remove the form. If you have other event handlers assigned to the button or elements in the page, show it. It would also be helpful to see the HTML of the page.

[Morsusy2k]

Sure,here

[Ingolme]

You should have checked the error console, look at this: SyntaxError: missing ) after argument list}};

[Morsusy2k]

Still can't make it work..:S

[Ingolme]

Check the error console. In Firefox the shortcut to the error console is control+shift+J

[Morsusy2k]

Uncaught SyntaxError: Unexpected token }

:S

[jeffman]

}};}};

You need two braces, not four. Try this:

  };};

[Ingolme]

The braces need to be substituted with closing parenthesis, as the functions are being passed as parameters

    });});

[Morsusy2k]

Foxy,you're right..It works now! :)Im doing some experiments,can you give me a hint on making it fadein/out?Something like this:

$('#item1').hover(function(){  $("#bg").fadeOut();  $("#bg").attr('src',"image1.jpg")  $("#bg").fadeIn();   });

[jeffman]

The braces need to be substituted with closing parenthesis, as the functions are being passed as parameters

	});});

Yeah. I assumed Morsusy had handled the first, but I should have caught the second. @Morsusy: Your sample code won't work because the script won't wait while the fadeOut method executes. It immediately executes the attribute method and then attempts to fadeIn. Since the image is still faded in, there is no animation to see except for the image change. That's what I assume will happen, anyway. The good news is, the animation methods allow you to pass a function that will execute after the animation is complete. I haven't tried the code below, but it looks like it should work, or be close to working. I have no idea what happens if the user stops hovering before all the animation is done.

$('#item1').hover(function() {  $('#bg').fadeOut('slow', function() {	$("#bg").attr('src',"image1.jpg");	$("#bg").fadeIn();  } );} );

Edited January 5, 2013 by Deirdre's Dad

[Morsusy2k]

Works like a charm :PHere is the final code if someone is interested

$(document).ready(function(){$('#item1').hover(function() {  $('#bg').fadeOut('fast', function() {		$("#bg").attr('src',"image1.jpg");		$("#bg").fadeIn();  } );} );  $('#item2').hover(function() {  $('#bg').fadeOut('fast', function() {		$("#bg").attr('src',"image2.jpg");		$("#bg").fadeIn();  } );} );$('#item3').hover(function() {  $('#bg').fadeOut('fast', function() {		$("#bg").attr('src',"image3.jpg");		$("#bg").fadeIn();  } );} );$('#item4').hover(function() {  $('#bg').fadeOut('fast', function() {		$("#bg").attr('src',"image4.jpg");		$("#bg").fadeIn();  } );} );$('#item5').hover(function() {  $('#bg').fadeOut('fast', function() {		$("#bg").attr('src',"image5.jpg");		$("#bg").fadeIn();  } );} );$("#item1, #item2, #item3, #item4, #item5").mouseleave(function(){  $('#bg').fadeOut('fast', function() {		$("#bg").attr('src',"1.jpg");		$("#bg").fadeIn();});});});

Thank you everyone

Edited January 5, 2013 by Morsusy2k

[dsonesuk]

Add class 'fadeEffect' to each id item, you are not using hover function fully, to prevent overlapping of triggered hover fade effects use stop() assuming item1 will always point to related image file name item1 = image1.jpg, item2 = image2.jpg

var imgpath= "../images/revolving/";$(document).ready(function(){$('.fadeEffect').hover(function() {// this is triggered when mouse hovers item areastripfornum=$(this).attr("id").replace("item","")  $('#bg').stop(true,true).fadeOut('fast', function() {			    $("#bg").attr('src',imgpath+'image'+stripfornum+'.jpg');			    $("#bg").fadeIn();  });}, function(){ // this is triggered when mouse leaves item area  $('#bg').stop(true,true).fadeOut('fast', function() {			    $("#bg").attr('src',imgpath+'1.jpg');			    $("#bg").fadeIn();  }); });

[Morsusy2k]

Hehe,that got me confused xDNvm,okay so i did some experiments and i tried to make font color change also on rollover/hover/mouseenter but its kinda buggy,also i know its possible to make colors fade in/out too but i have no idea how to add that...well this is the far as i got:

$('#item1').hover(function() {  $('#bg').fadeOut('fast', function() {		$("#bg").attr('src',"image1.jpg");		$("#bg").fadeIn();  }); $('#item1').mouseenter(function() {  $("#item1").css("color","blue");});  $('#item1').mouseleave(function() {  $("#item1").css("color","black");});});

First few times you hover it it wont change :S

Edited January 6, 2013 by Morsusy2k

[dsonesuk]

never use jquery for styling where css can be used. then don't have to worry if javascript is enabled. #item1 {color:black;}#item:hover {color:blue;}

[Morsusy2k]

Yeah i know but i want it animated,not simple hover..something like this but this does not work:

$("#item1").hover(function(){	 $("#item1").animate( {color: "blue"}, "slow" );});

[dsonesuk]

$(document).ready(function(){ $('p').css({'color': 'red'})// define default color here or by css$('p').hover(function(){$(this).stop(true,true).animate({ color: 'blue'}, 'slow');},function(){$(this).stop(true,true).animate({ color: 'red'}, 'slow');}); });

[Morsusy2k]

Is there something like else statement for hover command jQuery? Btw it seems it does not work :S

[dsonesuk]

BTW, IT DOES WORK, IF you used it correctly. the hover() can use two functions within it, the first represents what is carried out on hover over, the second on hover out or mouse leave. $('p').hover(function(){$(this).stop(true,true).animate({ color: 'blue'}, 'slow');},function(){$(this).stop(true,true).animate({ color: 'red'}, 'slow');});

[Morsusy2k]

Sry,I can't make it work,I just copied your original on the page,made a <p>something</p> but nothing happens with it,I also tried $('#item1') (whats in my case) and still noting. No errors are shown tho...:S

[dsonesuk]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/var imgpath= "../images/revolving/";$(document).ready(function(){$('p').css({'color': 'red'})// define here or by css$('p').hover(function(){$(this).stop(true,true).animate({ color: 'blue'}, 'slow');},function(){$(this).stop(true,true).animate({ color: 'red'}, 'slow');}); $('.fadeEffect').hover(function() {stripfornum=$(this).attr("id").replace("item","")  $('#bg').stop(true,true).fadeOut('fast', function() {			    $("#bg").attr('src',imgpath+'image'+stripfornum+'.jpg');			    $("#bg").fadeIn();  });}, function(){  $('#bg').stop(true,true).fadeOut('fast', function() {			    $("#bg").attr('src',imgpath+'rotate.jpg');			    $("#bg").fadeIn('fast');  });});});/*--*//*]]>*/</script><style type="text/css"></style></head><body><!--<img src="../images/revolving/image1.jpg" id="item1" class="fadeEffect" alt="" /><img src="../images/revolving/image2.jpg" id="item2" class="fadeEffect" alt="" /><img src="../images/revolving/image3.jpg" id="item3" class="fadeEffect" alt="" /><img src="../images/revolving/image4.jpg" id="item4" class="fadeEffect" alt="" /><img src="../images/revolving/image5.jpg" id="item5" class="fadeEffect" alt="" />--><p id="item1" class="fadeEffect">Item1</p><p id="item2" class="fadeEffect">Item2</p><p id="item3" class="fadeEffect">Item3</p><p id="item4" class="fadeEffect">Item4</p><p id="item5" class="fadeEffect">Item5</p><img src="../images/revolving/rotate.jpg" width="460" height="237" alt="" id="bg" /></body></html>

[Morsusy2k]

Thanks,sorry for bothering