Applying Behaviours to Hotspots

First prepare the work surface by placing the image in a relatively positioned <div>

• Change to Split View
• Click on the image to highlight it.
• In the Code section surround the entire image and the map with the div, resulting in HTML mark up similar to:
  

  <div style="position: relative;">
  <p><map id="FPMap0" name="FPMap0">
  <area coords="477, 19, 529, 42" href="/fp/" shape="rect" />
  <area coords="379, 18, 429, 41" href="/gsp/Default.aspx" shape="rect" />
  </map><img alt="sitemap" src="/images/fpa/998566610a_navigation.jpg" usemap="#FPMap0" height="93" width="600" /></p>
  </div>
  

• Placing the image in a relatively positioned container (<div>) means the layers associated with the image hotspots will stay in the same place relative to the image, no matter where the image is located in the page.
• Add the layers:
• For each hotspot:
  • Click on the image to ensure the curser is inside the <div>
  • Use Insert->Layer (FrontPage 2003) or Insert->HTML->Layer (Expression Web) and insert a layer. Drag the layer to its correct position.
  • Add some text or an image to the layer. At the same time set the background colour for the layer - yellow is used here.
  • To set the background colour in Expression Web use the Apply Styles task pane to set the background etc. This will generate a style block with a class named stylex - this should be changed to something meaningful. In FrontPage it is easier to hand code the style.
  • The layer styling should be further edited to set an appropriate width (changed to 200px here) and remove the height. If the height is left in place then if the user increases the font size, the excess text will either be hidden or bleed out of the layer onto the page, making it hard to read. Without the height set, the layer will set its own height to contain the text.
• The resulting code now resembles:
  

  <div style="position: relative;">
  <div id="layer1" class="style2"><p>Galleries are images of Ashford,Kent and Production Car Trials from the 70&#39;s and 80&#39;s in Kent and Surrey.</p></div>
  <div id="layer2" class="style3"><p>Web Faqs are a collection of articles that provide tips or How-To information related to building web pages, FrontPage and Expression Web.</p></div>
  <p><map id="FPMap0" name="FPMap0">
  <area coords="477, 19, 529, 42" href="/fp/" shape="rect" />
  <area coords="379, 18, 429, 41" href="/gsp/Default.aspx" shape="rect" />
  </map><img alt="sitemap" src="/images/fpa/998566610a_navigation.jpg" usemap="#FPMap0" height="93" width="600" /></p>
  

Now, add behaviours to the hotspots to make the layers visible

• Add a behaviour to the whole image. This will be copied to the hotspots, since behaviours cannot be directly applied to the hotspots.
• 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 Change Proprty behaviour.
• Click the Select Element radio, then change the element type dropdown to Div.
• Select the layer from the Element ID dropdown - in this case the first layer has ID Layer1
• Click the Visibility button, and select Visible from the next screen. Click OK
• Tick the "Restore on mouseout event" check box
• Click OK
• 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_changePropRestore()" onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')" has been added to the image tag:
  
  <img alt="sitemap" src="/images/fpa/998566610a_navigation.jpg" usemap="#FPMap0" height="93" width="600" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')" />
• 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_changePropRestore()" onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')" coords="379, 18, 429, 41" href="/gsp/Default.aspx" shape="rect" />
• Repeat for the other area tags with associated layers, remember to edit the layer in the javascript just copied, so for layer2 you get:
  <area onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'layer2',1,'style.visibility','visible')" 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_changeProp() {//v1.0
  var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
  d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o"; 
  ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) { 
  s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
  x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
  if(s) eval(s+"=v"); }
  }
  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_changePropRestore() {//v1.0
  var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe[i];
  if(x.v=="") x.v=""; eval("x."+x.n+"=String(x.v)"); } d.$cpe=null; }
  }
  // -->
  </script>
  

• Finally, tidy up the styles etc. While building this page FrontPage adds inline styles (style="blah.." to the HTML elements) whereas Expression Web creates styles for the layers, naming them style2 and style3 respectively. These (and style1) should be changed to meaningful names. After these changes (and changing the class attributes in the layers to suit) the finished style block looks like:
  

  <style type="text/css">
  .lay1 {position: absolute;
  width: 200px; 
  z-index: 1; 
  left: 256px; 
  top: 51px; 
  background: yellow; 
  padding: 3px; 
  visibility: hidden; 
  border: 1px solid blue;
  }
  .lay2 {position: absolute; 
  width: 200px; 
  z-index: 1; 
  right: 200px; 
  top: 51px; 
  background: yellow; 
  padding: 3px; 
  visibility: hidden; 
  border: 1px solid blue;
  }
  </style>