Popup met imagemap
Voor dit voorbeeld willen we de popup uit pagina Imagemap maken niet in een nieuw window, maar binnen onze eigen paginamaken. We doen dit door gebruik te maken van de Javascript methodes onmouseover() en onmouseout().
Eerst maken we voor iedere kamer een div met daarin het plaatje. Het is hier van belang dat iedere div een uniek id heeft. De CSS-class is om generieke style parameters te zetten. In dit voorbeeld zijn alle divs op een dezelfde plek gepositioneerd, maar dat is niet noodzakelijk. Wat wel belangrijk is, is de visibility parameter. Alle divs zijn in eerste instantie onzichtbaar.
Zie het voorbeeld hieronder.
<style>
.popup {
position: absolute;
left: 136px;
top: 106px;
width: 250px;
height: 375px;
visibility: hidden;
}
<div id="franspopup" class="popup"><img
src="franspopup.jpg" alt="Francois de Bonne" width="250" height="375" /></div>
<div id="lagedorpopup" class="popup"><img src="lagedorpopup.jpg" alt="l'Age
D'Or" width="250" height="375" /></div>
<div id="deuxmagotspopup" class="popup"><img src="deuxmagotspopup.jpg" alt="les
Deux Magots" width="250" height="375" /></div>
<div id="gitepopup" class="popup"><img src="gitepopup.jpg" alt="Gite" width="250" height="375" /></div>
Nu moeten we de juiste div zichtbaar maken als de muis over de hotspot gaat. Hiervoor heeft Dreamweaver standaard Javascript functies te beschikking:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null)
{ v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v;
}
obj.visibility=v; }
}
//-->
</script>
Door de functie MM_showHideLayers() nu aan te roepen met juiste layernaam komt de juiste layer te voorschijn. Hieronder zie je aangepast area regels.
<area shape="rect" coords="380,104,390,133"alt="l'Age D'Or" onmouseover="MM_showHideLayers('lagedorpopup','','show')" onmouseout="MM_showHideLayers('lagedorpopup','','hide')" />
<area shape="rect" coords="416,113,426,139"alt="les Deux Magots" onmouseover="MM_showHideLayers('deuxmagotspopup','','show')" onmouseout="MM_showHideLayers('deuxmagotspopup','','hide')" />
<area shape="rect" coords="447,214,498,257"alt="Gite" onmouseover="MM_showHideLayers('gitepopup','','show')" onmouseout="MM_showHideLayers('gitepopup','','hide')" />
Hieronder zie je resultaat. Kijk op Chateau Rosans voor meer informatie over dit kasteel..
