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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
