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
