Oooohhh regex. Sexy!
On Mar 13, 10:18 am, nwhite <changereal...@gmail.com> wrote:
> 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 <god.dre...@gmail.com> 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 <rpflore...@gmail.com> 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 <allen.fow...@yahoo.com> 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
>
> > > > <oblivi...@subtlegradient.com> 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.
