CODEWITHSUNDEEP
javascriptjquerycss
KPheasey
KPheasey

Reputation: 1805

Change Element Content But Not The Size

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>

Upvotes: 1

Views: 92

Answers (4)

adamb
adamb

Reputation: 4883

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;
}

Upvotes: 1

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107498

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

Upvotes: 0

McGarnagle
McGarnagle

Reputation: 102723

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)

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47657

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");
});

Upvotes: 1

Related Questions