Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Highlighting areas in an Image Map

    I am trying to highlight areas on an Image Map "ONMOUSEOVER." I have a JavaScript that will remove the area from the map, but I can't change the color of the area. This is my script:

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    var curFocus = null;

    function areaFocus() {
    // Track the last Area element selected.
    if ("New York" == event.srcElement.id)
    curFocus = event.srcElement;
    }

    function colorArea() {
    // Remove an Area element.
    var coll = document.all.territories.areas;
    if (null != curFocus) // Make sure one is selected.
    // Loop over Area elements and find the one selected.
    for (var intLoop = 0; intLoop < coll.length; intLoop++)
    if (curFocus == coll[intLoop]) {
    document.all.territories.areas.remove(intLoop);
    //this removes (not what i want to do)
    return;
    }
    }
    </SCRIPT>

    My map looks liek this:

    <img src=
    "/images/usa_politcal_map.gif"
    border="0"
    usemap="#territories"> <map name="territories" ONMOUSEOVER="areaFocus()">

    <area shape="poly"
    coords=
    "506,72,502,73,498,74,492,76,484,84,485,85,482,87,479,91,480,92,482,92,482,96,483,96,483,98,481,99,4 79,101,477,103,474,103,473,105,469,103,465,103,462,104,459,105,457,107,457,109,457,111,459,111,460,1 12,459,115,456,118,455,119,452,121,451,122,453,124,455,124,462,124,467,122,471,121,478,120,482,119,4 88,118,493,117,496,117,498,118,499,120,501,122,502,123,503,123,506,124,507,124,510,125,511,125,513,1 26,515,126,515,128,517,129,513,130,516,133,521,133,526,132,530,129,532,127,534,125,533,122,530,122,5 28,122,526,123,524,123,524,124,523,125,522,126,519,127,518,129,516,128,514,126,514,124,515,123,515,1 20,515,118,513,116,514,112,513,111,512,108,512,104,511,92,509,91,508,86,509,83,509,81"
    href="/contacts/ny.asp"
    id="New York"
    title="New York"
    OnMouseOver="colorArea()"
    alt="New York">
    <map>
    [/SIZE]
    Last edited by rherna01; 09-08-2006 at 07:41 PM. Reason: too large font

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    suggest a dull image and on mouseover of the hot spot display a clipped area of a clear image over the hot spot.

    not trivial but practical.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <HTML>
    <HEAD>
    <TITLE>Export Picture</TITLE>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (10-August-2006) http://www.vicsjavascripts.org.uk/
    
    
    // To position an element over an image Hot Spot by mouseover or Select List Value.
    // The element will be centered on Hot Spot.
    
    function zxcImgPos(zxctid,zxciid){
     var cobj=document.getElementById('Tst2');
     cobj.style.clip='rect(20 300 100 50)';
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     var zxcobj=zxcEventObj(zxcevt);
     var zxctar=document.getElementById(zxctid);
     var zxcimg=document.getElementById(zxciid);
     var zxcmap=document.getElementsByName(zxctar.getAttribute('usemap').substring(1))[0].getElementsByTagName('AREA');
     if (zxcobj.tagName=='SELECT'){ zxcobj=zxcmap[parseInt(zxcobj.value)]; }
     if (!zxcobj||!zxctar||!zxcimg){ return; }
     var zxccord=zxcobj.coords.split(',');
    // zxcimg.style.left=Math.floor(zxcPos(zxctar)[0]+(zxccord[0]*1)-(zxcimg.offsetWidth-(zxccord[2]-zxccord[0]))/2)+'px';
    // zxcimg.style.top=Math.floor(zxcPos(zxctar)[1]+(zxccord[1]*1)-(zxcimg.offsetHeight-(zxccord[3]-zxccord[1]))/2)+'px';
     var cobj=document.getElementById('Tst2');
     cobj.style.clip='rect('+zxccord[1]+' '+zxccord[2]+' '+zxccord[3]+' '+zxccord[0]+')';
     cobj.style.visibility='visible';
    }
    function Hide(){
     document.getElementById('Tst2').style.visibility='hidden';
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    function Init(){
     zxcOpacity(document.getElementById('O1'),40)
    
    }
    
    
    function zxcOpacity(zxcobj,zxcopc) {
     if (zxcopc<0||zxcopc>100){ return; }
     if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
     else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
    }
    
    
    //-->
    </script>
    <style type="text/css">
    <!--
    #Tst2 {
     visibility:hidden;
    }
    
    -->
    </style></HEAD>
    
    <BODY BGCOLOR="#ffffff" TEXT="#000000" onload="Init();">
    <CENTER>
    <div  style="position:relative;left:0px;top:0px;width:351px;height:263px;">
    
     <IMG BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="351" height="263" style="position:absolute;left:0px;top:0px;width:351px;height:263px;"  >
     <div id="O1"  style="position:absolute;left:0px;top:0px;width:351px;height:263px;background-color:gray;"></div>
     <div id="Tst2" style="position:absolute;left:0px;top:0px;width:351px;height:263px;">
      <IMG BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="351" height="263" >
     </div>
     <IMG id="Tst0" BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"
    
     style="position:absolute;left:0px;top:0px;width:351px;height:263px;"
      width="351" height="263" USEMAP="#ImageMap" ISMAP="ISMAP">
    </div>
    <IMG id="Tst1" BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" style="position:absolute;z-index:10;" >
    <select onchange="zxcImgPos('Tst0','Tst1');" >
    <option value="" >Option 0</option>
    <option value="0" >Option 1</option>
    <option value="1" >Option 2</option>
    <option value="2" >Option 3</option>
    <option value="3" >Option 4</option>
    </select>
    <MAP NAME="ImageMap" onmouseover="zxcImgPos('Tst0','Tst1');" >
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="240,193,273,223" onmouseout="Hide()">
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="31,120,144,208" onmouseout="Hide()">
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="208,78,329,150" onmouseout="Hide()">
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="39,29,114,82" onmouseout="Hide()">
    </MAP>
    </BODY>
    </HTML>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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