Taking your code and constraints I came up with the following
reduction:
window.addEvent(function(){
$$('.nav-img').addEvents({
'mouseenter' : function(){
this.set('src', this.get('src').replace(/^(.+?)(\..+?)
$/,'$1-over$2') );
},
'mouseleave' : function(){
this.set('src', this.get('src').replace(/-over/,'') );
}
})
});
On Fri, Mar 13, 2009 at 9:57 AM, keif <[email protected]> wrote:
Just to clean that code up real quick:
$$('img.someClass').addEvents({
'mouseenter': function()
{
var src = this.get('src');
this.set('src', src + '_hover.jpg');
},
'mouseleave': function()
{
this.set('src',src);
}
});
It's easiest if you know what mouseon/mouseoff is.
If you can swap out the images, you could sue CSS sprites, so instead
of swapping out images (more requests!) you could just change
background position:
$$('#menu img').addEvents({
'mouseenter': function()
{
this.setStyle('background-position', '0 -20px'); //
assuming the
menu image is 20px high, so out image is 40px high
},
'mouseleave': function()
{
this.setStyle('background-position', '0 0'); // snap
back to
original!
}
});
On Mar 13, 1:00 am, rpflo <[email protected]> wrote:
> I know everybody is giving the excellent ways to do this and I agree
> completely...
>
> But I once used code similar to this in my newbie days cause I
> understood it (not as a rollover, but same idea):
>
> $('someImageID').addEvent('mouseenter',function(){
>
this.
set('src','someOtherImage.jpg');}).addEvent('mouseleave',function(){
>
> this.set('src','someOriginalImage.jpg');
>
> });
>
> Yes ugly. Yes a class is more flexible. Yes, CSS is the real way
to
> do such a simple task. And yes, you'll have to put in 4 lines of JS
> for every stinking image ... but this does what you want.
>
> A less ugly way would be this (still ugly, and still not as good as
> everything else):
>
> $$('img.someClass').addEvent('mouseenter',function(){
> var src = this.get('src');
> this.set('src', src +
'_hover.jpg');}).addEvent('mouseleave',function(){
>
> this.set('src',src);
>
> });
>
> Put the class .someClass on the images you want to have rollover
> effects. Then use a naming convention on the images to have
blah.jpg
> and blah_hover.jpg so those 5 lines will work on every
img.someClass.
> (This brings in the issue of preloading those rollovers but maybe
you
> already had that issue)
>
> Again, I would never do this myself ... I only offer it as garbage
> that actually works :)
>
> On Mar 12, 3:11 pm, afowler <[email protected]> wrote:
>
> > Yeah, I'm stuck with the existing design.
>
> > Even the multi-img method will mess stuff up for the designers
WYSIWYG
> > tools. (If the CSS is not parsed correctly.... actually same
issue for
> > the live site, if CSS is disabled, or slow to load.)
>
> > I'll try to clean up my above code, or better yet, figure out how
> > nwhite's Rollover class is supposed to work....
>
> > Can someone provide an example as to how it should be integrated
into
> > a page?
>
> > On Mar 12, 3:29 pm, Thomas Aylott / subtleGradient
>
> > <[email protected]> wrote:
> > > well, duh. But he already said he's stuck with the design asis.
> > > Adding a few more IMG tags, classnames and some super-simple
js is
> > > probly the quickest route to teh aswome.
>
> > > — Thomas Aylott / SubtleGradient.com
>
> > > ibolmo wrote:
> > > > It'd be best to do some sliding
doorshttp://www.alistapart.com/articles/slidingdoors/
> > > > for less requests.
