hi,
i don`t know if i put my question into the right place, but anyway.
i`m using scriptaculous 1.8.1 and i want to change the background-
image of an div tag something like this:
<div id="1" class="background-image" >
background-image
</div>
the image is loaded in the css file:
div.background-image {
margin-bottom: 0px;
width: 150px;
left: 300px;
background-image: url(img/pfeil_klein_subnav_links.jpg);
background-repeat:no-repeat;
background-position: right;
}
so the text is on the left and the image on the right, the position is
variable depending on the textlength.
i thougth i could do something like this:
<a href="#"
onmouseover="$(''1'').morph(''background-image:url
(img/
pfeil_klein_subnav_rechts.jpg); width:300px;''); return
false;">Click
me for a demo!</a>
but it seems that morph didn`t work on background-image.
i didn`t find any other method that fit`s my need, so did anybody have
an idea?
it would be cool if i could do this with scriptaculous.
thaaaanx
bernd
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Hey Bernd,
You can''t "morph" background images. If you want image
crossfades, you
need two separate elements (either <img>''s or anything with the
proper
background image in its style), positioned inside your container, with
proper z-index to look like backgrounds respective to other contents,
and then you cross-fade those.
Perhaps something like:
<!-- btw, div="1" is invalid: you can''t start with a digit
-->
<div id="div1" class="crossBacks">
<img src="img/pfeil_klein_subnav_links.jpg" class="back
links" />
<img src="img/pfeil_klein_subnav_rechts.jpg" class="back
rechts"
style="display: none;" />
<div class="contents">Background-image</div>
</div>
And some styling that may look like this:
.crossBacks { position: relative; with: 150px; }
.crossBacks .contents { z-index: 42; }
.crossBacks img.back { position: absolute; top: 0; z-index: 0; }
.crossBacks img.back.links { left: 0; }
.crossBacks img.back.rechts { right: 0; }
And then, the cross-fade would look something like this:
var container = $(''div1'');
container.down(''.back.links'').fade();
container.down(''.back.rechts'').appear();
Or something along these lines…
''HTH
--
Christophe Porteneuve aka TDD
tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
heiho christophe, thx for your answer, yes your right i can`t do what i wanna do, but your way looks good to me, i try. have a nice day and happy coding bernd On 16 Mai, 15:43, Christophe Porteneuve <t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:> Hey Bernd, > > You can''t "morph" background images. If you want image crossfades, you > need two separate elements (either <img>''s or anything with the proper > background image in its style), positioned inside your container, with > proper z-index to look like backgrounds respective to other contents, > and then you cross-fade those. > > Perhaps something like: > > <!-- btw, div="1" is invalid: you can''t start with a digit --> > <div id="div1" class="crossBacks"> > <img src="img/pfeil_klein_subnav_links.jpg" class="back links" /> > <img src="img/pfeil_klein_subnav_rechts.jpg" class="back rechts" > style="display: none;" /> > <div class="contents">Background-image</div> > </div> > > And some styling that may look like this: > > .crossBacks { position: relative; with: 150px; } > .crossBacks .contents { z-index: 42; } > .crossBacks img.back { position: absolute; top: 0; z-index: 0; } > .crossBacks img.back.links { left: 0; } > .crossBacks img.back.rechts { right: 0; } > > And then, the cross-fade would look something like this: > > var container = $(''div1''); > container.down(''.back.links'').fade(); > container.down(''.back.rechts'').appear(); > > Or something along these lines… > > ''HTH > > -- > Christophe Porteneuve aka TDD > t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---