How to Enlarge Image in Jquery Cursor Pointer

Reading Time: 2 minutes

Advanced way to emphasize image in your html page by using jquery is to resize it on event .mouseover(function(){}); It is more effective then usage of .show(), .hide(), .fadeIn() and .fadeOut() functions described in previous article. So let’s start with usage of jquery cursor pointer. If we have “image1” in our html page, it is very effective to change mouse cursor pointer on .mouseover event.

$(‘#image1’).mouseover(function(){

$(this).css(“cursor”,”pointer”);

});
Now, if we have three images aligned in our html document:
<img src=”pics/rock.gif” id=”image1″/>&nbsp;&nbsp;&nbsp;
<img src=”pics/paper.gif” id=”image2″/>&nbsp;&nbsp;&nbsp;
<img src=”pics/scissors.gif” id=”image3″/><br>

How to enlarge image in jquery? If we want to enlarge image without animation, then this is command: $(‘#image2’).width(150); If we want to animate enlargement, then this is a command: $(this).animate({width: “150px”}, ‘slow’); But we don’t want to keep image enlarged after mouse leave the image. So, on .mouseleave(), we have to return all images on initial size, possibly without animation in order to prevent oscillations. Here is the all code:

$(document).ready(function(){

$(‘# image1’).mouseover(function(){

$(this).css(“cursor”,”pointer”);
$(this).animate({width: “150px”}, ‘slow’);
$(‘#image2’).width(100);
$(‘#image3’).width(100);

});
$(‘# image1’).mouseleave(function(){

$(this).width(100);
$(‘#image2’).width(100);
$(‘#image3’).width(100);

});
$(‘#image2’).mouseover(function(){

$(this).css(“cursor”,”pointer”);
$(‘# image1’).width(100);
$(this).animate({width: “150px”}, ‘slow’);
$(‘#image3’).width(100);

});
$(‘#image2’).mouseleave(function(){

$(‘# image1’).width(100);
$(this).width(100);
$(‘#image3’).width(100);

});
$(‘#image3’).mouseover(function(){

$(this).css(“cursor”,”pointer”);
$(‘# image1’).width(100);
$(‘#image2’).width(100);
$(this).animate({width: “150px”}, ‘slow’);

});
$(‘#image3’).mouseleave(function(){

$(‘# image1’).width(100);
$(‘#image2’).width(100);
$(this).width(100);

});

});

External links:

How to Enlarge Image in Jquery on Jquerybyexample
How to Enlarge Image in Jquery on api.jqueryui.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*