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.
>
