[Proto-Scripty] wierd setStyle Backgroundimage happenings..
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-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.
[Proto-Scripty] Re: wierd setStyle Backgroundimage happenings..
This is probably because when You set url for image from stylesheet
which probably You've got in some css/ directory You set it like '../
images'. But when You set in in inline styles this files are in ./
images path.
On 5 Sty, 11:23, Matt matthew.jones...@gmail.com 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-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.
Re: [Proto-Scripty] wierd setStyle Backgroundimage happenings..
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.
