Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

 

Add a behaviour to a hotspot in an image map


Adding behaviours to several hotspots in an image map may become cumbersome and unwieldy. Using several swap image behaviours will result in long download times - this is not recommended for more than one or two hotspots.

Link to list of WebFaqs articles Navigation View with HotSpot

 

The above image has a rectangular hotspot defined on the yellow box labelled "Web FAQs".

To add a behaviour to this hotspot:

  • Switch to Split View
  • Add a behaviour to the whole image:
    • Open the behaviours task pane:  View->Task Panes->Behaviours (FrontPage 2003), or Task Panes->Behaviours (Expression Web)
    • Select the image. In the Behaviours task pane the Tag should be <img>
    • Click Insert on the task pane, and select the behaviour - in this example Swap image was selected.
    • Complete the dialogue:
      • Choose the image that has to be swapped
      • Browse to the image it is swapped with
      • Tick the box - "restore on mouseout". This reloads the original image when the mouse moves away from the hotspot.
    • The event is added to the Events column - hover over the onclick and change the dropdown to onmouseover.
  • In the code section notice that

    onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'/images/fpa/998566610_navigation1.jpg');"
    has been added to the image tag:

    <img alt="sitemap" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'/images/fpa/998566610_navigation1.jpg');"  src="/images/fpa/998566610_navigation.jpg" usemap="#FPMap0" height="93" width="600" />
  • Highlight this text in the code, then Edit->Cut
  • In the code, look for the <area tag.
  • Place the curser in this tag after the word <area and Edit->Paste the onmouseover event in. The <area tag becomes similar to:

    <area onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'/images/fpa/998566610_navigation1.jpg');" coords="477, 19, 529, 42" href="/fp/" shape="rect" />
  • Save the page.
  • Notice in the <head> section in code view, the JavaScript for the behaviour has been added, in this case:
    <script type="text/javascript">
    <!--
    function FP_swapImg() {//v1.0
    var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
    n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
    elm.$src=elm.src; elm.src=args[n+1]; } }
    }
    function FP_preloadImgs() {//v1.0
    var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
    for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
    }
    function FP_getObjectByID(id,o) {//v1.0
    var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
    else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
    if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
    for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
    f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
    for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
    return null;
    }
    function FP_swapImgRestore() {//v1.0
    var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
    var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } 
    doc.$imgSwaps=null; }
    }
    // -->
    </script>