area map not working in Operah

**gib65** · 02-08-2013, 10:02 PM

Hello,

Please have a look at the code below:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>

<head>

<title>H&R Properties</title>

<style>

body
{
margin: 0;
background: #8f8f8f;
}

td.left_wing
{
background: url('left_wing_bg.jpg');
background-repeat: repeat-y;
background-position: right;
width: 50px;
}

td.right_wing
{
background: url('right_wing_bg.jpg');
background-repeat: repeat-y;
background-position: left;
width: 50px;
}

td.center
{
width: 731px;
vertical-align: top;
background: url('modified/escheresque_ste.png');
border-left-style: solid;
border-left-color: black;
border-left-width: 1px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}

table.master
{
margin: 0;
height: 100%;
}

td.banner
{
height: 100px;
text-align: center;
}

td.menu
{
height: 20px;
background: url('menu_bg.jpg');
width: 731px;
}

</style>

<script type="text/javascript">

var bannerWidth = 731;
var maxWheelWidth = 731;
var wheelWidth = 0;

var coordPercXBow = [0.2122, 0.355, 0.499, 0.6429, 0.786, 0.5578, 0.528, 0.4994, 0.47, 0.441];
var coordPercYBow = [0.0932, 0.0228, 0.001, 0.0228, 0.0932, 0.4089, 0.3975, 0.3923, 0.3975, 0.4089];

var coordPercXAngio = [0.2029, 0.4327, 0.411, 0.3986, 0.3923, 0.3965, 0.0248, 0.0031, 0.0269, 0.0921];
var coordPercYAngio = [0.1004, 0.4161, 0.4389, 0.4648, 0.4928, 0.5259, 0.647, 0.4876, 0.3437, 0.215];

var coordPercXTCT = [0.028, 0.3996, 0.4151, 0.4358, 0.4617, 0.4938, 0.4938, 0.3354, 0.206, 0.1035];
var coordPercYTCT = [0.6573, 0.5373, 0.5663, 0.5859, 0.5994, 0.6066, 0.9979, 0.9689, 0.9017, 0.8002];

function InitPage()
{
	var wheel = document.getElementById("wheel");
	
	wheelWidth = wheel.width;
	
	InitCoords(coordPercXBow, coordPercYBow, "bow_area", false);
	InitCoords(coordPercXAngio, coordPercYAngio, "angio_area", false);
	InitCoords(coordPercXTCT, coordPercYTCT, "tct_area", false);
	InitCoords(coordPercXTCT, coordPercYTCT, "telus_calgary_area", true);
	InitCoords(coordPercXAngio, coordPercYAngio, "telus_burnaby_area", true);
}

function InitCoords(xCoordPercentages, yCoordPercentages, areaName, inverse)
{
	var coordString = "";
	
	if (inverse)
	{
		for (var i = 0; i < xCoordPercentages.length; i++)
		{
			xCoordPercentages[i] = 1.0 - xCoordPercentages[i];
		}
	}
	
	for (var j = 0; j < xCoordPercentages.length; j++)
	{
		coordString += (xCoordPercentages[j] * wheelWidth);
		coordString += ",";
		
		coordString += (yCoordPercentages[j] * wheelWidth);
		coordString += ",";
	}
	
	coordString = coordString.substring(0, coordString.length-1);
	
	var area = document.getElementById(areaName);
	area.setAttribute("coords", coordString);
}

</script>

</head>

<body onload="InitPage()">

<center>
<table cellspacing=0 cellpadding=0 border=0 height=100%>

<tr>
<td class="left_wing"></td>

<td class="center">
<center>
<table id="master_table" class="master" cellspacing=0 cellpadding=0 border=0>

<tr><td class="banner"><img src="H&Rbanner.jpg" border=0></td></tr>

<tr><td class="menu"></td></tr>

<tr><td style="padding-top: 10px;">

<center>
<img id="wheel" width="85%" src="circle.png" border=0 usemap="#building_map">
</center>

</td></tr>

<tr><td>
<a href="http://www.hrproperties.ca/Pandemic/Front.html">
<img style="margin-left: 10px;" align=left width="20px" src="cross.png" border=0>
Pandemic Information
</a>
</td></tr>

</table>
</center>
</td>

<td class="right_wing"></td>
</tr>

</table>
</center>


<map name="building_map">
<area id="bow_area" shape="poly" href="http://www.hrproperties.ca/bow/home.html" title="The Bow - Calgary">
<area id="angio_area" shape="poly" href="http://www.hrproperties.ca/Angiowebsite/angdefault.html" title="Angiotech - Vancouver">
<area id="tct_area" shape="poly" href="http://www.transcanadatower.ca/" title="TransCanada Tower - Calgary">
<area id="telus_calgary_area" shape="poly" href="http://www.hrproperties.ca/ttwebsite/ttdefault.html" title="Telus - Calgary">
<area id="telus_burnaby_area" shape="poly" href="http://www.hrproperties.ca/tbwebsite/tbdefault.html" title="Telus - Burnaby">
</map>


</body>

</html>

The sections in bold are the important parts.

I have an image indicated by the line:

<img id="wheel" width="85%" src="circle.png" border=0 usemap="#building_map">

and I have an area map indicated by the block of code:

<map name="building_map">
<area id="bow_area" shape="poly" href="http://www.hrproperties.ca/bow/home.html" title="The Bow - Calgary">
<area id="angio_area" shape="poly" href="http://www.hrproperties.ca/Angiowebsite/angdefault.html" title="Angiotech - Vancouver">
<area id="tct_area" shape="poly" href="http://www.transcanadatower.ca/" title="TransCanada Tower - Calgary">
<area id="telus_calgary_area" shape="poly" href="http://www.hrproperties.ca/ttwebsite/ttdefault.html" title="Telus - Calgary">
<area id="telus_burnaby_area" shape="poly" href="http://www.hrproperties.ca/tbwebsite/tbdefault.html" title="Telus - Burnaby">
</map>

The coordinates of the area map are determined by the javascript above.

This works in every browser except Operah. In Operah, the image is not a hyperlink. I hover my mouse over it and nothing happens. I don't get a hyperlink icon and nothing happens when I click on it.

Why would this be?