- window.addEvent('domready',function(){
- var t = $$('.opacity');
- t.each(function(item){
- item.setStyle('opacity', 1);
- var f = new Fx.Style (item,'opacity', {duration: 600, wait:
- false});
- item.addEvents({
- 'mouseover': function() {
- f.start(0.1);
- },
- 'mouseout': function() {
- f.start(1);
- }
- })
- })
- });
I have been trying to achieve a nice fading image swap onmouseover with varying degrees of success and could really do with some help.
I am fairly new to mootools and I am also restricted to using mootools 1.1 as the site is a joomla 1.5 site which is also using mootools 1.1 on other pages.
I have an image of a map and would like the image to fade into a closer view of the map when the mouse hovers over it and then fade back to the original when the mouse leaves. The way I have been trying to achieve my aim is by creating a <div> with the close up image of the map as a background, I then have the other map image within that div which fades out onmouseover and then back in onmouseout.
The problem that I have is that if I set the opacity to zero onmouseover the image fades out but then doesn't fade back in again onmouseout. If I set the opacity to 0.1 then the fade in and fade out work ok but you can still see the ghost of the original image over the top of the background image.
I am sure that there is a much more simple way of doing this but unfortunately I don't know what it is.
Any help would be most gratefully received.
Here's my code.
HTML
CSS
- .map {
- width: 613px;
- height: 460px;
- background-image: url(map_close_up.jpg);
- }
SCRIPT
