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 -~----------~----~----~----~------~----~------~--~---