This code is not tested nor optimized but it should address most of the
issues involved.
var Rollover = new Class({
Implements : [ Options ],
options : {
over : 'over', // used for changing images
out : 'out'
},
initialize : function(selector,options){
this.images = $$(selector); // get rollover images
this.out = this.images.map(function(img){
return img.get('src'); // get src default
});
this.over = this.out.map(function(src){
return src.replace(this.options.out, this.options.over); // map
over src
});
new Assets.images(this.over); // load/cache over images
this.images.each(function(img,idx){
img.addEvents({ // add events
'mouseenter' : this.over.bind(this,[img,idx]),
'mouseleave' : this.out.bind(this,[img,idx])
});
},this);
},
over : function(img,idx){
img.set('src', this.over[idx]);
},
out : function(img,idx){
img.set('src', this.out[idx]);
}
});
On Wed, Mar 11, 2009 at 7:28 PM, afowler <[email protected]> wrote:
>
>
>
> On Mar 11, 5:31 pm, Anatol <[email protected]> wrote:
> > Hi,
> >
> > I would not use MooTools or any Javascript at all if everything you
> > want to do is to swap an image.
> >
> > If your HTML code is e.g.
> >
> > <ul id="navigation">
> > <li><a href="/">Home</a></li>
> > <li><a href="subpage">A Page</a></li>
> > <li><a href="subpage2">Another Page</a></li>
> > </ul>
> >
> > just use a CSS like
> >
> > #navigation li a {
> > background: #fff url(images/navigation_bg.gif) no-repeat;
> >
> > }
> >
> > #navigation li a:hover {
> > background: #aaa url(images/navigation_bg_hover.gif) no-repeat;
> >
> > }
> >
> > Depending on your image you may want to define the width and height
> > CSS info of your link or list item. There are countless ways to refine
> > this but I'm sure there are some good tutorials out there.
> >
> > I used a couple of "rollovers" on my site, all without any Javascript:
> http://www.nugob.org. You better only use Javascript if it is
> > justified.
> >
> > Cheers!
> > Anatol
>
>
> Anatol,
>
> Thank you for the sample code. I will try something like that on my
> next project.
> '
> For now I need to integrate with an existing table-based image slice
> design.
>
> Can I use CSS :hover method in such an environment?
>
> -- Thank you
>
