I need to animate this javascript image roll over using javascript.
How can I achieve this animation without css?
<img src="test.jpg"
onmouseover="this.src=test-ro.jpg'"
onmouseout="this.src='test.jpg'"
alt=""/>
You’ve answered your own question with that code, don’t you?
If you wonder why it doesn’t work that’s because of missing apostrophe before test-ro.jpg
Thanks for responding. The image rollover works. I am trying to animate the rollover image image transition. At the moment there is no transition. The rollover image is on/off depending on cursor position.
I would like to implement a fade in/out transition on the rollover image. When the cursor moves into the image area the rollover fades in. When the cursor moves out the rollover fades out.
Why don’t you want to use CSS for this?
Using JS you would have to write a function to reduce the opacity of one image to zero while increasing the other image’s opacity from zero to 1 at the same time.
Use CSS as @PaulOB said. Because if you will use Javascript it results to CSS anyway (fading is possible only by changing opacity with inline CSS style). So JS is excess layer here.
I try using css before and did not get very far. The webpage structure does not work well with the css rule img position absolute needed to implement the css transition. I found the inline js onmouseover worked well except that the transition is abrupt. I am not sure how to work around the position absolute issue in css that is why I started looking for a js solution. The thumbnail image points to a video clip.
Code for the image thumbnail
HI,
The problem is that to do a proper crossfade you need two images active at the same time and not just swapping one image for another. You could fade one image out and then fade another in but that won’t do a crossfade.
You need one image fading out at the same time as another image is fading in. That means you need two images on the page to work with at the same time.
If you wrap a span around your image you can fade the image out at the same time as showing a background image. The problem with this approach is that you cannot fade the background in because a background is either displayed or its not. There is no half stage. That’s why two image (elements) are preferred as you can juggle their opacity.
However you can get quite a good effect if you do something like this.
All that’s needed is the span around the image and then aply a background to that span on hover while hiding the image with opacity:0.
1 Like
Thanks for the explanation and demo.
Two questions.
Is this approach responsive? I noticed the images use a set height and width.
Are there other options for the transition like fade in/out or slide left/right
Hi,
You can make it responsive but it does mean manipulating the code a little.
Here’s another example.
The first one is a crossfade which works best I think and the others slide in and out from different directions. The slide in ones could probably be made better by fading out the original image a little slower so that there’s still some image visible while the other one slides in.
Excellent, thanks for the awesome demo!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.