changing image width with jquery hover toggle

Question

i want to change my image width on mouse over with jquery toggle or let me know if i can switch between two image i.e small_image and large_image with jquery toggle

Answer 1

How about this:

$("#img_id_here").mouseover(function()
{
  $(this).css('width', '200px');
});

You could even try this out too:

<img src="whatever" onMouseOver="this.style.width='200px'" />

Also can be done with css:

<style type="text/css">
.img:hover /* you should apply img class to your image. */
{
  width:200px;
}
</style>

Answer 2

You can do it easier than that using just CSS.

Style:

.photo .large { display: none; }
.photo:hover .small { display: none; }
.photo:hover .large { display: inline; }

HTML:

<div class="photo">
   <img class="small" width="60" height="40" src="smallimage.jpg" />
   <img class="large" width="600" height="400" src="largeimage.jpg" />
</div>

Note: IE 6 only supports :hover on links, so you would have to make the container a link instead of a div to support IE 6.

Answer 3

To have the best looking images, they typically need to be displayed at actual size. One way to achieve the use of two images is to swap the SRC attribute with scripting on mouseover and mouseout events (.hover() in jQuery).

Using a few conventions, you can avoid hard-coding and delineating the standard and large image filenames / locations that need to be 'zoomable'.

IMAGE FILES:
(put all standard-size images in (for example) the /img/ directory; put full-size versions of images in /img/big/ )

example.com/img/tree.jpg  
example.com/img/lake.jpg  
example.com/img/big/tree.jpg  
example.com/img/big/lake.jpg

HTML:

<img class="zoomable" src="/img/tree.jpg" />
<img class="zoomable" src="/img/lake.jpg" />

jQuery:

$(document).ready( function() {
    $("img.zoomable").hover(
    function(){
        var src = $(this).attr('src');
        $(this).attr('src', src.replace('/img/', '/img/big/')); //swap to big
    }, 
    function(){
        var src = $(this).attr('src');
        $(this).attr('src', src.replace('/img/big/', '/img/')); //swap back to small
    });
});