Any way to disable the live map areas in hidden jpgs?

Question

I have a jpg image that fades from hidden to visible and back via a mouse click toggle behavior tied to a 'click here for map' element (in Dreamweaver CS5, MM_effectAppearFade). I overlaid a map with defined areas on the jpg each of which, when clicked, send the visitor to other pages on the site. Works fine - a mouse click makes the jpg image visible, then a click on a live area moves the visitor down the road, or a second click on 'click here for map' toggles everything back to hidden status.
My problem is that even when hidden, the defined areas on the jpg remain 'live' such that if you move the mouse to where they are hidden, the mouse changes to the pointy finger and a click triggers the link. Not good.
Seems like the easiest way to solve the problem might be to associate the MM_effectAppearFade behavior with a behavior that starts with the hidden jpg image way off screen, then moves it onto the screen and fades it in, and reverses the sequence later.
Is this the right way to do this? If so, I'd appreciate it if someone could point me to a tutorial that shows how to set up the behaviors. ...or maybe theres a better way?
Thanks - Jim

Answer 1

jim redfield wrote:
My problem is that even when hidden, the defined areas on the jpg remain 'live' such that if you move the mouse to where they are hidden, the mouse changes to the pointy finger and a click triggers the link. Not good.
You can do this by amending the JavaScript block in the head of the page like this:
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
   var img = document.getElementById(targetElement);
    if (img.style.opacity == 1 || !img.style.opacity) {
        img.useMap = '';
    } else {
        img.useMap = '#Map';
</script>
In this script, I have assumed that you're using the default name that Dreamweaver gives to the image map (Map).
Check the value of the usemap attribute in the <img> tag. By default, it's this: usemap="#Map". The value needs to be the same in this line of the code:
img.useMap = '#Map';