Vick, you are basically right. But ... it's just that I want to set the path in an *external* JavaScript file which will be linked to the HTML page. So the JavaScript is no included in the (template) page => it will only be requested by the browser and thus no dynamic content will be interpreted. Alex
-----Ursprüngliche Nachricht----- Von: Vick V Lagad [mailto:[EMAIL PROTECTED] Gesendet: Dienstag, 04. Dezember 2007 21:47 An: Turbine Users List Betreff: Re: dynamic image loading: image paths in Javascript conflict with Turbine's path notation, so how to? I am not sure but can you not use $content.getURI("/images/inactive.gif") ? E.g: #set($imagePath = $content.getURI("/images/inactive.gif")) <div id="box_01" onMouseOver="document.getElementById('box_01').style.backgroundIma > > age = > 'url($imagePath)'" > > onMouseOut=" > document.getElementById('box_01').style.backgroundImage = > 'url($imagePath)'"> > Vick On Dec 4, 2007 4:12 AM, Alexander Zimmer <[EMAIL PROTECTED]> wrote: > Hello list, > > > > I would like to swap a background image via JavaScript code, such as: > > > > <div id="box_01" > onMouseOver="document.getElementById('box_01').style.backgroundImage = > 'url(images/active.gif)'" > > onMouseOut=" > document.getElementById('box_01').style.backgroundImage = > 'url(images/inactive.gif)'"> > > ... some content ... > > </div> > > > > the problem is: due to Turbine's notion of a path notation, the URL of > the HTML page would be: > > http://HOST:8080/myapp/template/main.vm > > > > As we know, this is telling the Turbine servlet to serve the template > main.vm. But from a browser's point of view, this looks like the page > main.vm in the path /myapp/template/ was requested - which is > essentially wrong because /template/ is no path info (but the name part > of the name-value-pair template=main.vm). Not being aware of this > gotcha, the JavaScript interpreter would eventually run the onMouseOver > code and try to load the image images/active.gif. Since this is a > relative path, the browser requests: > > http://HOST:8080/myapp/template/images/active.gif > > > > My oh my!! This does not work because this is no valid path. > > > > > > How can I do this? > > Just using an absolute path in the JavaScript like this: > > > > <div id="box_01" > onMouseOver="document.getElementById('box_01').style.backgroundImage = > 'url(/myapp/images/active.gif)'" > > onMouseOut=" > document.getElementById('box_01').style.backgroundImage = > 'url(/myapp/images/inactive.gif)'"> > > </div> > > > > ...is not a good solution because I have to include the Context name of > the webapp in the link. > > Since the JavaScript-Code will not get parsed by Velocity, I can not use > something like > > document.getElementById('box_01').style.backgroundImage = > 'url($ui.images("active.gif"))'" > > > > > > How can I achieve the dynamic loading of images in a more or less > elegant way? > > > > TIA, > > Alex > > --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
