Mouseover on area map > images in different locations

**hartool** · 02-03-2008, 05:04 PM

Hello,
I am trying to make a site showing 3 floorplans whereby going over each room of each floorplan (mouseover) a picture of the room is shown.
This works fine, but all pictures are shown in the same location.
What I would like is that there is a different target picture for each floorplan.

The site is: http://www.hartool.nl/house.htm

The code is:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Nieuwe pagina 2</title>

<script>
function ShowPic(sImage){document.housea.src = sImage}
function ShowPic(sImage){document.houseb.src = sImage}
function ShowPic(sImage){document.housec.src = sImage}
</script>

</head>

<body>

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="30%"></td>
<td width="70%"></td>
</tr>

<tr>
<td width="30%">
  <map name="FPMap2">
<area onmouseover="ShowPic(this.href)" href="badkamer3.jpg" alt="Badkamer" shape="rect" coords="64, 15, 127, 70">
<area onmouseover="ShowPic(this.href)" href="trap3.jpg" alt="Trap" shape="rect" coords="132, 14, 185, 39">
<area onmouseover="ShowPic(this.href)" href="overloop3.jpg" alt="Overloop" shape="rect" coords="131, 44, 185, 72">
<area onmouseover="ShowPic(this.href)" href="slaapkamer13.jpg" alt="Slaapkamer1" shape="rect" coords="189, 14, 263, 159">
<area onmouseover="ShowPic(this.href)" href="slaapkamer23.jpg" alt="Slaapkamer2" shape="rect" coords="64, 76, 150, 159">
<area onmouseover="ShowPic(this.href)" href="inloopkast3.jpg" alt="Inloopkast" shape="rect" coords="152, 111, 175, 159">
<area onmouseover="ShowPic(this.href)" href="zoldertrap3.jpg" alt="Zoldertrap" shape="rect" coords="163, 73, 179, 108">
</map>
<img border="0" src="plan3.jpg" width="280" height="170" usemap="#FPMap2">

<map name="FPMap1">
<area onmouseover="ShowPic(this.href)" href="zijkamer2.jpg" alt="Zijkamer" shape="rect" coords="72, 14, 104, 72">
<area onmouseover="ShowPic(this.href)" href="toilet2.jpg" alt="Toilet" shape="rect" coords="109, 13, 137, 71">
<area onmouseover="ShowPic(this.href)" href="trap2.jpg" alt="Trap" shape="rect" coords="138, 14, 208, 37">
<area onmouseover="ShowPic(this.href)" href="gang2.jpg" alt="Overloop" shape="rect" coords="137, 40, 211, 63">
<area onmouseover="ShowPic(this.href)" href="keuken2.jpg" alt="Keuken" shape="rect" coords="214, 13, 265, 63">
<area onmouseover="ShowPic(this.href)" href="eetkamer2.jpg" alt="Eetkamer" shape="rect" coords="72, 78, 153, 155">
<area onmouseover="ShowPic(this.href)" href="zitkamer2.jpg" alt="Zitkamer" shape="rect" coords="156, 70, 265, 156">
<area onmouseover="ShowPic(this.href)" href="balkon2.jpg" alt="Balkon" shape="rect" coords="266, 79, 282, 108">
</map>
<img border="0" src="plan2.jpg" width="287" height="164" usemap="#FPMap1"></p><p>

<map name="FPMap0">
<area onmouseover="ShowPic(this.href)" href="keuken1.jpg" alt="Keuken/Opslag" shape="rect" coords="68, 14, 129, 77">
<area onmouseover="ShowPic(this.href)" href="toilet1.jpg" alt="Toilet" shape="rect" coords="134, 14, 159, 40">
<area onmouseover="ShowPic(this.href)" href="trap1.jpg" alt="Trap" shape="rect" coords="160, 14, 212, 42">
<area onmouseover="ShowPic(this.href)" href="entree.jpg" alt="Hal" shape="rect" coords="216, 16, 261, 68">
<area onmouseover="ShowPic(this.href)" href="gang1.jpg" alt="Gang" shape="rect" coords="134, 43, 214, 72">
<area onmouseover="ShowPic(this.href)" href="kantoorvoor1.jpg" alt="Voorkamer" shape="rect" coords="177, 76, 260, 173">
<area onmouseover="ShowPic(this.href)" href="kantoorachter1.jpg" alt="Achterkamer" shape="rect" coords="69, 83, 169, 174">
<area onmouseover="ShowPic(this.href)" href="serre1.jpg" alt="Serre" shape="rect" coords="25, 84, 66, 174">
</map>
<img border="0" src="plan1.jpg" width="284" height="185" usemap="#FPMap0"><p>

</td>

<td width="70%">
<p align="center">
<img name="housec" src="house200c.jpg" width="192" height="170">
<br>
 
<img name="houseb" src="house200b.jpg" width="190" height="170">
<br>
 
<img name="housea" src="house200a.jpg" width="190" height="170">
</td>
</tr>

</table>
</center>
</div>

</body>

</html>

Can anyone please tell me how to make this work ?

Thank you very much.
Frank

**teremus** · 05-15-2008, 05:38 PM

Hi,

you just need to change
<script>
function ShowPicA(sImage){document.housea.src = sImage}
function ShowPicB(sImage){document.houseb.src = sImage}
function ShowPicC(sImage){document.housec.src = sImage}
</script>

and

<map name="FPMap2">
<area onmouseover="ShowPicA(this.href)" href="badkamer3.jpg" alt="Badkamer" shape="rect" coords="64, 15, 127, 70">
<area onmouseover="ShowPicA(this.href)" href="trap3.jpg" alt="Trap" shape="rect" coords="132, 14, 185, 39">
.................

<map name="FPMap1">
<area onmouseover="ShowPicB(this.href)" href="zijkamer2.jpg" alt="Zijkamer" shape="rect" coords="72, 14, 104, 72">
<area onmouseover="ShowPicB(this.href)" href="toilet2.jpg" alt="Toilet" shape="rect" coords="109, 13, 137, 71">
................

<map name="FPMap0">
<area onmouseover="ShowPicC(this.href)" href="keuken1.jpg" alt="Keuken/Opslag" shape="rect" coords="68, 14, 129, 77">
<area onmouseover="ShowPicC(this.href)" href="toilet1.jpg" alt="Toilet" shape="rect" coords="134, 14, 159, 40">
................

enjoy

Thread: Mouseover on area map > images in different locations

Thread Tools

Search Thread

Mouseover on area map > images in different locations

Bookmarks

Bookmarks

Posting Permissions