Results 1 to 4 of 4

Thread: area map not working in Operah

  1. #1
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default area map not working in Operah

    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?

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there gib65,

    you could try changing this line...
    Code:
    
    	wheelWidth = wheel.width;
    
    ...to this...
    Code:
    
    	wheelWidth = wheel.offsetWidth;
    coothead

  3. #3
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by coothead View Post
    Hi there gib65,

    you could try changing this line...
    Code:
    
    	wheelWidth = wheel.width;
    
    ...to this...
    Code:
    
    	wheelWidth = wheel.offsetWidth;
    coothead
    Thanks coothead.

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    No problem.

Similar Threads

  1. Area map
    By shas595 in forum HTML
    Replies: 2
    Last Post: 02-28-2011, 12:01 AM
  2. AREA tag
    By ElMiki in forum HTML
    Replies: 1
    Last Post: 10-06-2008, 01:01 PM
  3. Forms not working with long text area
    By sujith787 in forum HTML
    Replies: 2
    Last Post: 09-11-2007, 07:05 PM
  4. onMouseOver not working in AREA tag
    By AlistairH in forum JavaScript
    Replies: 5
    Last Post: 09-01-2005, 12:18 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •