1

I have a page that displays images at a set width. The height is variable so the image keeps it's aspect ratio. On mouse over, the image changes, but so does the height. How can I keep the height and width the same and just have the new image use a max-height / max-width of the last image so the container is not resized.

See Here - http://jsfiddle.net/z3sxc/11/

<style>
li {
    width: 190px;
    border: 1px solid black;
    list-style: none;
}

li img{
    width: 100%;
}
</style>
<body>
    <ul>
        <li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">      
        </li>
        <li onmouseover="clip_2.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_2.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_2">      
        </li>
    </ul>​
</body>

4 Answers 4

1

You can try this - DEMO

$("li")
    .on("mouseover", function() {
        var h = $(this).height();
        $(this).find("img").prop("src", "http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg");
        $(this).height( h );
})
    .on("mouseout", function() {
        $(this).find("img").prop("src", "http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg");
});
3
1

No JavaScript/jQuery is needed to achieve this effect.

Simply define the background image of a block element (e.g. <div />, <span style="display: inline-block" />, etc.) in a css class, then change the background image on :hover.

See here: http://jsfiddle.net/adamb/z3sxc/15/

HTML:

<div class="picture" /> 

CSS:

.picture {
    background: url(http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg) no-repeat;
    background-size: 190px;
    width: 190px;
    height: 190px;
    border: 1px solid black;
}

.picture:hover {
    background: url(http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg) no-repeat;   
    background-size: 190px;
}
0

You could add a Javascript function to change the CSS on the element:

function changeImage() {
    clip_1.style.maxWidth = clip_1.width + 'px';
    clip_1.style.maxHeight = clip_1.height + 'px';
    clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg';
}​

<li onmouseover="changeImage()" ... />

(Live here)

0

Here's something that might get you started.

The first adjustment I made was to wrap your image in a <div> with a generic CSS class name:

<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
    <div class="clip">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">      
       <div>
</li>​

And then you can give that class some style which will help with the sizing:

.clip {
    overflow: hidden;
}

And then with a little jQuery on top:

$(function() {
    $('.clip img').load(function() {
        $(this).parent('.clip').css({ 
            width: $(this).width(), 
            height: $(this).height() 
        }); 
        $(this).unbind('load'); // only do this once             
    });            
});​

​DEMO

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.