Hi All,
I hope you can help me with this, as I have done some exhaustive
searching over the past couple days and cannot find a solution.
What I am trying to do is dynamically update an image and image map on
a page. I'd like the update to happen as quickly as possible and be
done without refreshing the page. The catch is that the image map uses
the wz_tooltip.js (http://www.walterzorn.com/tooltip/tooltip_e.htm)
library to display a JavaScript tooltip containing detailed information
about different areas of the image. So, when I pass the required
<script> tags via .innerHTML, the browser treats it as text and does
not interpret the JavaScript and execute the code.
My code looks something like this:
function flipImage(imgDiv, imgSrc, imgMap, ttDiv)
{
//generate random num for unique image map name
var rand = Math.round(Math.random() * 10000);
//create unique image map name
var imgMapName = "mapper" + rand.toString();
//piece together image map text
imgMap = "<map NAME='" + imgMapName + "'>" + imgMap + "</map>";
//write new image map
document.getElementById(imgDiv).innerHTML = imgMap;
//flip the image
document.flowview.src = imgSrc;
//link image to new image map
document.flowview.useMap = "#" + imgMapName;
var tooltip = '<script language="javascript" type="text/javascript"
src="/javascript/wz_tooltip.js"><\/script>';
//write <script> call wz_tooltip.js to create tooltips
document.getElementById(ttDiv).innerHTML = tooltip;
}