...

View Full Version : Highlighting areas in an Image Map



rherna01
09-08-2006, 07:33 PM
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,47 9,101,477,103,474,103,473,105,469,103,465,103,462,104,459,105,457,107,457,109,457,111,459,111,460,11 2,459,115,456,118,455,119,452,121,451,122,453,124,455,124,462,124,467,122,471,121,478,120,482,119,48 8,118,493,117,496,117,498,118,499,120,501,122,502,123,503,123,506,124,507,124,510,125,511,125,513,12 6,515,126,515,128,517,129,513,130,516,133,521,133,526,132,530,129,532,127,534,125,533,122,530,122,52 8,122,526,123,524,123,524,124,523,125,522,126,519,127,518,129,516,128,514,126,514,124,515,123,515,12 0,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]

vwphillips
09-08-2006, 09:10 PM
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.

vwphillips
09-08-2006, 11:12 PM
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum