One way to work around this is to use addClassName and removeClassName instead. If you have working CSS, then extend it like this:

#featured:hover, #featured.over {
        //your styles here
}

Then add and remove the over class to get the same style as the CSS hover from the zoom event. That way you define your paths in the same place, you can test it once and know it will work, etc.

Walter

On Jan 5, 2011, at 5:23 AM, Matt wrote:

I have read the other post in this group where they were having issues
with the setStyle background image code, but I am still having trouble
getting this to work. It appears to be executing the setStyle
background code but instead of changing to the specified image, it
changes to no background image and stays that way.

I have a mouse over listener and mouseleave listener, when the
mouseenter is triggered, the bg changes to nothing, and when the
mouseleave is triggered, the bg stays as nothing. I have included the
div CSS so you can see the that i am using the correct file paths.

A div callled 'zoom' has a mouseleave and mouseenter listener, which
trigger the background of 'featured' to change accordingly, basically
making it so the rollover effect of 'zoom' is extended to 'featured'.
I have tried several different variations of the JS to make this work,
but with no success.

CSS of div to change bg-image of.
#featured {
        height: 304px;
        width: 719px;
        margin-bottom: 6px;
        margin-top: 4px;
        background-image: url(../images/site/border_main.png);
        background-repeat: no-repeat;
}
#featured:hover {
        background-image: url(../images/site/border_main_ro.png);
        background-repeat: no-repeat;
        cursor:pointer;
}

JS of listeneres
        Event.observe($("zoom"), 'mouseover', function() {
                $("featured").setStyle({background : 'url(../images/site/
border_main_ro.png)'});
        });
        Event.observe($("zoom"), 'mouseleave', function() {
                $("featured").setStyle({background : 'url(../images/site/
border_main.png)'});
        });

do you see why this setstyle is not working? or perhaps know a better
way of extending rollover functionality between seperate divs?

Thanks, Matt

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com . To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com . For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en .


--
You received this message because you are subscribed to the Google Groups "Prototype 
& script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to