CODEWITHSUNDEEP
javascripthtml
user2227151
user2227151

Reputation: 11

How do you add a fadeIn - fadeOut transition to a swap image

I found out all sorts of ways of adding a nice fade transition to a rollover image, but none actually say how to apply the script to an html document

this is what I've got so far.. how can I add a fadeIn, fadeOut script to that? instead of just flicking from image to image

<img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" 
onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
    onmouseout="MM_swapImgRestore()" />

Here's the whole part in the HTML doc.

<td colspan="2" rowspan="5" align="left" valign="top"><a href="portfolio.html"><img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
    onmouseout="MM_swapImgRestore()" /></a></td>

how do I isolate the 'index-alt_12.jpg' and create an ID tag for it? and where do I put that code?

Upvotes: 1

Views: 1312

Answers (3)

Andres Gallo
Andres Gallo

Reputation: 681

Since you are using mouseover and out, I assume you have only two images right?

You can do this without javascript. It will still work in older browsers, but the animated fades will work only on webkit, ie10 and mozilla. Its only an issue if you must have this fade on older versions of IE.

What you can do is place two images, with one on top of the other.

For example - assuming this are positioned one on top of the other through css

<img class="imageA" src="a.jpg" />
<img src="b.jpg" />

On the css

.imageA {
   -webkit-transition: all 300ms ease;
   -moz-transition: all 300ms ease;
   -o-transition: all 300ms ease;
   transition: all 300ms ease;
   opacity: 1;
}

.imageA:hover {
   opacity: 0;
}

You can use the transitions to animate from any one css property to another as well. Instead of two images, the one below could also be a background image of the container as suggested below, yet still do it purely through css.

Upvotes: 1

Fleming Slone
Fleming Slone

Reputation: 177

There are bugs around the way you are trying to do it with a hard coded image, but you can switch to CSS as a workaround.

First, I would set up a div and make portfolio.jpg the background image:

HTML:

<div id="portfolio"></div>

The CSS:

#portfolio {
    background:url('images/portfolio.jpg') no-repeat;
    height: 150px;
    width: 155px;
}

Here's a way to fade #portfolio out on mouseover, swap in a new background image, then fade the div back in. Requires jQuery 1.0+

$('#portfolio').mouseover(function() {
    var self = $(this);
    self
        .fadeOut('slow', function() {
            self
                .css('background-image', 'url("images alt/index-alt_12.jpg")')
                .fadeIn('slow');
        });
});

Upvotes: 0

exxodus7
exxodus7

Reputation: 562

Are you using jQuery at all? If so, there's a nice solution for you! At the bottom of your HTML page (under where you include jQuery), you could use something like the following:

$(document).ready(function() {
  $("#portfolio").mouseover(function() {
    $("#img1").fadeTo(200, 1); 
    // The above means take 200ms to fade to an opacity of 1.0 (fully opaque).
    $("#img2").fadeTo(200,0);
    // The above says the same thing, but for fading out
  });
});

If you play around with this a little, you can get them to switch back and forth depending on which is showing, but that's the general idea.

And voila! I know you're looking for a javascript answer, but jQuery is extremely helpful for stuff like this, and would highly recommend it to you.

Upvotes: 0

Related Questions