Polygonal Figures - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Polygonal Figures		[View Sample]

This is the first imagemap-solution that allows you to dynamically change as many polygonal figures as you like. You need only one image to change the visual appearance of 10, 20, 50 or even more different polygonal hotspots. This means up to 50 times less bandwidth. Too complicate to understand? Test it to feel its power. IE4.x only


Insert into <HEAD>
<script language=javaScript> <!-- Beginning of JavaScript - var x,y,a,b,timer,thisbox,isbox,urlimg var posleftvorher var i_strngth=1 var timer function fadeinlogo() { if(document.all) { if (i_strngth <=100) { logo.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src=logo279.gif border=0>"; i_strngth=i_strngth+2 var timer=setTimeout("fadeinlogo()",50) } else { clearTimeout(timer) } } } if (document.all) { var left_pos=".pixelLeft="; var top_pos=".pixelTop="; var doc=""; var stl=".style"; } function show(thisplace, thiscolor) { if(document.all) { document.all.mapusa.style.filter="chroma(color="+thiscolor+")" box = document.all.popupbox.style box.visibility="visible" popupbox.innerHTML="<table width=120><tr><td valign=middle align=center bgcolor=000077><font face=Arial size=1 color=FFFFFF>"+thisplace+"</font></td></tr></table>" eval(doc+"popupbox"+stl+left_pos+(300)) eval(doc+"popupbox"+stl+top_pos+(y)) } } function closebox(){ if(document.all \|\| document.layers) { clearTimeout(timer) } } function handlerMM(e){ x = (document.layers) ? e.pageX : event.clientX y = (document.layers) ? e.pageY : event.clientY } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; // - End of JavaScript - --> </script> <STYLE> A { color:DDDDDD; text-decoration:none; } </STYLE>

Insert into <BODY>
<div id="background" style="position:absolute; left:2px; top:20px; width:300px; height:246px; background-color:FF0000"> </div> <div id="mapusa" style="position:absolute; left:2px; top:20px; width:600px; height:400px;"> <IMG SRC="mapusa511.gif" id="mapname" USEMAP="#mapusa.gif" BORDER=0> <MAP NAME="mapusa.gif"> <AREA SHAPE=POLY COORDS="23,0,53,9,50,35,18,31,14,17" HREF="#" onMouseOver="show('Washington','33FFFF')"> <AREA SHAPE=POLY COORDS="43,71,6,59,15,34,28,33,46,35,51,39" HREF="#" onMouseOver="show('Oregon','33FFCB')"> <AREA SHAPE=POLY COORDS="7,63,24,69,18,97,46,143,44,162,29,162,15,138,8,103,2,80" HREF="#" onMouseOver="show('California','33FF99')"> <AREA SHAPE=POLY COORDS="55,125,78,130,72,183,47,168,50,150,48,135" HREF="#" onMouseOver="show('Arizona','33CDCD')"> <AREA SHAPE=POLY COORDS="111,183,114,131,80,130,75,184" HREF="#" onMouseOver="show('New Mexiko','33CD99')"> <AREA SHAPE=POLY COORDS="95,185,110,210,116,201,125,202,135,227,137,240,149,242,148,219,169,199,165,172,130,161,130,139,116,138,114,185" HREF="#" onMouseOver="show('Texas','339933')"> <AREA SHAPE=POLY COORDS="163,167,150,166,132,159,132,134,163,135" HREF="#" onMouseOver="show('Oklahoma','339967')"> <AREA SHAPE=POLY COORDS="122,108,121,132,163,131,162,115,158,107" HREF="#" onMouseOver="show('Kansas','339999')"> <AREA SHAPE=POLY COORDS="119,130,81,126,84,94,119,99" HREF="#" onMouseOver="show('Colorado','33CD67')"> <AREA SHAPE=POLY COORDS="47,136,21,96,28,68,57,78" HREF="#" onMouseOver="show('Nevada','33FF67')"> <AREA SHAPE=POLY COORDS="61,78,71,82,71,90,82,95,77,128,53,122,59,79" HREF="#" onMouseOver="show('Utah','33CDFF')"> <AREA SHAPE=POLY COORDS="56,9,62,35,61,47,66,58,74,57,72,80,44,71,49,55,46,51,54,41,53,22" HREF="#" onMouseOver="show('Idaho','33ff33')"> <AREA SHAPE=POLY COORDS="112,56,114,21,59,9,58,22,62,43,71,57,77,51" HREF="#" onMouseOver="show('Montana','33ff01')"> <AREA SHAPE=POLY COORDS="172,42,171,51,169,60,178,68,181,73,181,78,196,79,193,53" HREF="#" onMouseOver="show('Wisconsin','336701')"> <AREA SHAPE=POLY COORDS="189,35,182,43,199,50,217,39" HREF="#" onMouseOver="show('Michigan','346833')"> <AREA SHAPE=POLY COORDS="110,95,112,58,78,53,72,83,75,89" HREF="#" onMouseOver="show('Wyoming','33cd33')"> <AREA SHAPE=POLY COORDS="146,20,148,47,115,50,115,21" HREF="#" onMouseOver="show('North Dakota','33cd01')"> <AREA SHAPE=POLY COORDS="151,79,150,50,113,52,113,74,141,74" HREF="#" onMouseOver="show('South Dakota','3399ff')"> <AREA SHAPE=POLY COORDS="155,104,151,82,139,78,114,77,113,92,122,98,122,106" HREF="#" onMouseOver="show('Nebraska','3399cd')"> <AREA SHAPE=POLY COORDS="150,22,158,18,160,23,178,30,166,51,167,58,175,68,152,71" HREF="#" onMouseOver="show('Minnesota','339901')"> <AREA SHAPE=POLY COORDS="155,73,175,71,182,83,176,99,159,102" HREF="#" onMouseOver="show('Iowa','3367ff')"> <AREA SHAPE=POLY COORDS="177,104,159,103,165,118,167,139,184,135,189,138,193,133" HREF="#" onMouseOver="show('Missouri','3367ce')"> <AREA SHAPE=POLY COORDS="166,139,183,139,190,145,181,172,169,173,167,173" HREF="#" onMouseOver="show('Arkansas','33679a')"> <AREA SHAPE=POLY COORDS="167,176,180,175,184,181,179,191,190,192,194,204,172,206" HREF="#" onMouseOver="show('Louisiana','346768')"> <AREA SHAPE=POLY COORDS="203,194,201,149,189,153,182,174,187,179,184,189,196,195" HREF="#" onMouseOver="show('Mississippi','01ff33')"> <AREA SHAPE=POLY COORDS="208,194,207,187,220,184,222,174,218,148,200,149,202,190" HREF="#" onMouseOver="show('Alabama','01ff01')"> <AREA SHAPE=POLY COORDS="257,234,258,217,245,185,212,191,226,195,233,192" HREF="#" onMouseOver="show('Florida','01cece')"> <AREA SHAPE=POLY COORDS="224,185,240,184,246,173,229,145,220,147,224,173" HREF="#" onMouseOver="show('Georgia','01cdff')"> <AREA SHAPE=POLY COORDS="247,166,256,148,250,142,242,144,240,142,232,145,231,146" HREF="#" onMouseOver="show('South Carolina','01cd99')"> <AREA SHAPE=POLY COORDS="261,145,271,119,240,128,237,133,229,139,251,137" HREF="#" onMouseOver="show('NorthCarolina','01ce67')"> <AREA SHAPE=POLY COORDS="264,117,266,110,256,99,252,100,245,115,239,123" HREF="#" onMouseOver="show('Maryland','01cd33')"> <AREA SHAPE=POLY COORDS="240,118,232,118,230,112,239,99,244,98,247,103" HREF="#" onMouseOver="show('Virginia','01ce01')"> <AREA SHAPE=POLY COORDS="192,148,221,144,231,129,191,135,192,147" HREF="#" onMouseOver="show('Tennessee','01ff67')"> <AREA SHAPE=POLY COORDS="225,128,230,120,228,113,220,110,213,118,208,122,200,123,196,133" HREF="#" onMouseOver="show('Kentucky','01ff99')"> <AREA SHAPE=POLY COORDS="192,127,195,126,200,116,197,86,194,80,185,82,178,100,184,113" HREF="#" onMouseOver="show('Illinois','3333FF')"> <AREA SHAPE=POLY COORDS="200,87,202,115,199,122,207,121,217,108,214,84" HREF="#" onMouseOver="show('Indiana','01ffce')"> <AREA SHAPE=POLY COORDS="207,83,221,80,225,60,214,48,203,55" HREF="#" onMouseOver="show('Ohio','01ffff')"> <AREA SHAPE=POLY COORDS="223,81,216,86,220,106,227,110,230,109,236,94,235,75,231,76,229,83" HREF="#" onMouseOver="show('West Virginia','68ffff')"> <AREA SHAPE=POLY COORDS="241,94,255,92,267,84,265,69,240,75" HREF="#" onMouseOver="show('Pennsylvania','68ffce')"> <AREA SHAPE=POLY COORDS="270,38,260,41,257,49,258,53,246,58,241,69,243,73,262,68,274,70,275,55" HREF="#" onMouseOver="show('New York','67ff01')"> <AREA SHAPE=POLY COORDS="272,92,274,79,272,73,268,76,270,81,268,90" HREF="#" onMouseOver="show('New York','67ff01')"> <AREA SHAPE=POLY COORDS="283,6,290,9,292,19,295,24,296,27,288,38,283,37,281,25" HREF="#" onMouseOver="show('Main','68ce02')"> <AREA SHAPE=POLY COORDS="277,35,273,37,273,47,276,52" HREF="#" onMouseOver="show('Vermont','68d335')"> <AREA SHAPE=POLY COORDS="291,56,284,54,276,58,277,61,284,58,289,60" HREF="#" onMouseOver="show('Massachussetts','65d690')"> <AREA SHAPE=POLY COORDS="279,69,285,63,284,60,280,60,278,64" HREF="#" onMouseOver="show('Connecticut','72d9fd')"> <AREA SHAPE=POLY COORDS="272,102,275,96,270,91,267,93,270,98" HREF="#" onMouseOver="show('Delaware','9cf7a7')"> </MAP> </div> <div id="redirection" style="position:absolute;left:350px;top:180px; text-align:center"><font size=1 face="Verdana" color=888888>Wait until the map has been loaded. Then slowly move your mouse over the map to study the color-change-effect.<br><br><br> </font></div><font size=1 face="Verdana" color=888888> <div id="popupbox" style="position:absolute;top:100px"></div> </font>

Other Options