...
PDA

please help with making a javascript/css image map

dannyspencer
08-03-2006, 09:29 AM
I posted this as a reply on another section of the forums and nobody seemed to reply... wondering if anyone can help?

i have an exploded view diagram of a car engine. each part has a number beside it. i want the user to be able to mouse over the number and have a circle put around it (the number is in the jpg image, not as text)... example is Here (http://www.mgocspares.co.uk/acatalog/MGOC__Spares___MGB_UPPER_4.html)
As you can see, at the moment the image has a normal html imagemap with hotspot over the numbers.

Now there are 87 parts on the image so i dont really want to be making 87 div layers to get the circle around the number. Is it possible to do it without having loads of div layers??

The second problem is underneath the image map there is the products listing. basically a list of all the parts. i want the user to be able to click on an item in the list (or perhaps a link by the side of the listing) and have the number on the diagram highlighted with the circle just like if the user mouses over the number on the image.

Is this possible?! if no one understands i could attempt to explain more...

Cheers, Dan
vwphillips
08-03-2006, 11:36 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">

function zxcPop(nu){
var zxcpu=document.getElementById('zxcPU');
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxceobj=zxcEventObj(zxcevt);
var zxcmap=zxceobj.parentNode.getElementsByTagName('AREA');
for (var zxc0=0;zxc0<zxcmap.length;zxc0++){
if (zxcmap[zxc0]==zxceobj){
zxcpu.getElementsByTagName('DIV')[0].innerHTML=zxc0;
zxcpu.style.left=(zxcPos(zxcmap[zxc0])[0]+20)+'px';
zxcpu.style.top=(zxcPos(zxcmap[zxc0])[1])+'px';
zxcpu.style.visibility='visible';
}
}
}

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 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];
}



</script>

</head>

<body>
<div id="zxcPU" style="position:absolute;z-index:10;visibility:hidden;width:50px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" >
<div style="position:absolute;left:10px;top:10px;width:20px;height:20px;background-color:#FFFFCC;" >&nbsp;</div>
</div>
<p align="center">
<map name="FPMap0" onmouseover="zxcPop();" >
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=81W-GHF333&NOLOGIN=1" shape="rect" coords="479, 77, 494, 91" alt="Washer spring">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=95W-12H752&NOLOGIN=1" shape="rect" coords="429, 224, 451, 239" alt="Backplate">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=86W-LUF10002&NOLOGIN=1" shape="rect" coords="490, 192, 504, 204" alt="Oil seal">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=94W-12H768B&NOLOGIN=1" shape="rect" coords="444, 174, 462, 188" alt="Gasket">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=93W-12H762B&NOLOGIN=1" shape="rect" coords="411, 103, 433, 119" alt="Gasket">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=98W-3H576&NOLOGIN=1" shape="rect" coords="170, 257, 186, 270" alt="Drain tap">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=92W-12H541&NOLOGIN=1" shape="rect" coords="499, 259, 518, 273" alt="Blanking plug">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=91W-2K6059&NOLOGIN=1" shape="rect" coords="493, 226, 508, 237" alt="Locktab">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=90W-GHF333&NOLOGIN=1" shape="rect" coords="514, 225, 532, 234" alt="Washer">

<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=87W-53K1779&NOLOGIN=1" shape="rect" coords="527, 205, 540, 216" alt="Screw">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=85W-12H1547&NOLOGIN=1" shape="rect" coords="513, 182, 526, 196" alt="Retainer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=84W-1H1020&NOLOGIN=1" shape="rect" coords="522, 138, 534, 152" alt="Lock tab">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=83W-GHF332&NOLOGIN=1" shape="rect" coords="473, 93, 485, 104" alt="Washer spring">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=99W-ARH517&NOLOGIN=1" shape="rect" coords="216, 257, 232, 270" alt="Washer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=82W-1H1021&NOLOGIN=1" shape="rect" coords="512, 107, 526, 120" alt="Lock tab">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=108W-12H998&NOLOGIN=1" shape="rect" coords="391, 312, 408, 326" alt="Con rod">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=80W-GHF105&NOLOGIN=1" shape="rect" coords="508, 78, 524, 90" alt="Screw">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=64W-48G343LF&NOLOGIN=1" shape="rect" coords="60, 75, 205, 234" alt="Engine">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=188W-88G561&NOLOGIN=1" shape="rect" coords="19, 774, 36, 787" alt="Oil seal">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=131W-BH605201&NOLOGIN=1" shape="rect" coords="125, 477, 142, 490" alt="Bolt">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=132W-12A1177&NOLOGIN=1" shape="rect" coords="88, 468, 103, 483" alt="Washer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=133W-12A1176&NOLOGIN=1" shape="rect" coords="113, 458, 130, 471" alt="Bush">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=80W-GHF105&NOLOGIN=1" shape="rect" coords="498, 120, 506, 130" alt="Screw">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=116W-12H1000&NOLOGIN=1" shape="rect" coords="441, 430, 459, 440" alt="Bolt">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=110W-GHF331&NOLOGIN=1" shape="rect" coords="411, 330, 426, 340" alt="Washer spring">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=134W-12A1386&NOLOGIN=1" shape="rect" coords="168, 407, 182, 419" alt="Cover">

<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=129W-12A1139B&NOLOGIN=1" shape="rect" coords="87, 412, 106, 426" alt="Gasket">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=128W-12H156&NOLOGIN=1" shape="rect" coords="61, 448, 77, 460" alt="Cover">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=126W-8G2506&NOLOGIN=1" shape="rect" coords="275, 363, 354, 426" alt="Piston rings">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=123W-12H961&NOLOGIN=1" shape="rect" coords="211, 362, 262, 426" alt="Piston set">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=122W-12G1300&NOLOGIN=1" shape="rect" coords="501, 430, 520, 442" alt="Bolt">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=120W-CAM1588SR&NOLOGIN=1" shape="rect" coords="504, 304, 522, 317" alt="Con rod">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=119W-12G1300&NOLOGIN=1" shape="rect" coords="473, 431, 488, 441" alt="Bolt">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=105W-GHF331&NOLOGIN=1" shape="rect" coords="296, 295, 316, 310" alt="Washer spring">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=117W-12H2444SR&NOLOGIN=1" shape="rect" coords="464, 300, 481, 315" alt="Con rod circlip">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=100W-2K8169&NOLOGIN=1" shape="rect" coords="260, 258, 277, 271" alt="Welch plug">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=115W-6K881&NOLOGIN=1" shape="rect" coords="451, 397, 466, 408" alt="Tab washer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=114W-12H1019SR&NOLOGIN=1" shape="rect" coords="431, 310, 445, 324" alt="Con rod circlip">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=113W-12H1000&NOLOGIN=1" shape="rect" coords="411, 428, 425, 440" alt="Bolt">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=112W-6K881&NOLOGIN=1" shape="rect" coords="381, 411, 396, 423" alt="Tab washer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=111W-51K1774&NOLOGIN=1" shape="rect" coords="414, 356, 429, 368" alt="Pinch bolt">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=106W-2A265&NOLOGIN=1" shape="rect" coords="243, 318, 261, 331" alt="Blanking plate">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=104W-SH605041&NOLOGIN=1" shape="rect" coords="318, 316, 333, 330" alt="Screw">

<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=103W-53K2853&NOLOGIN=1" shape="rect" coords="314, 247, 330, 260" alt="Drain plug">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=102W-6K638&NOLOGIN=1" shape="rect" coords="279, 233, 297, 245" alt="Washer plug">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=118W-13H5872&NOLOGIN=1" shape="rect" coords="479, 391, 497, 404" alt="Nut">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=175W-2H4905&NOLOGIN=1" shape="rect" coords="217, 656, 308, 794" alt="Timing chain">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=177W-12H1319B&NOLOGIN=1" shape="rect" coords="169, 668, 187, 688" alt="Gasket timing cover">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=167W-GHF102&NOLOGIN=1" shape="rect" coords="190, 532, 207, 545" alt="Bolt">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=169W-3H2127&NOLOGIN=1" shape="rect" coords="288, 625, 306, 637" alt="Timing chain">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=170W-WKN505&NOLOGIN=1" shape="rect" coords="270, 593, 283, 605" alt="Woodruff key">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=171W-CAM5333&NOLOGIN=1" shape="rect" coords="255, 616, 272, 631" alt="Gear">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=172W-2A759&NOLOGIN=1" shape="rect" coords="217, 581, 239, 597" alt="Locktab">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=173W-6K629&NOLOGIN=1" shape="rect" coords="195, 602, 211, 617" alt="Nut">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=173W-6K629&NOLOGIN=1" shape="rect" coords="80, 567, 96, 583" alt="Nut">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=172W-2A759&NOLOGIN=1" shape="rect" coords="108, 592, 126, 607" alt="Locktab">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=165W-GHF120&NOLOGIN=1" shape="rect" coords="256, 563, 274, 575" alt="Screw">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=175W-2H4905&NOLOGIN=1" shape="rect" coords="152, 535, 170, 549" alt="Timing chain">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=166W-12H3292&NOLOGIN=1" shape="rect" coords="232, 459, 289, 513" alt="Tensioner assembly">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=187W-2K7440&NOLOGIN=1" shape="rect" coords="67, 668, 81, 680" alt="Washer">

<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=107W-2A113&NOLOGIN=1" shape="rect" coords="218, 298, 235, 310" alt="Gasket blanking plate">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=178W-12H3317&NOLOGIN=1" shape="rect" coords="97, 649, 116, 665" alt="Timing cover">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=181W-GHF117&NOLOGIN=1" shape="rect" coords="38, 795, 61, 807" alt="Screw">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=182W-SH604031&NOLOGIN=1" shape="rect" coords="82, 733, 97, 743" alt="Screw">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=183W-2K5197&NOLOGIN=1" shape="rect" coords="91, 708, 107, 718" alt="Washer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=184W-GHF300&NOLOGIN=1" shape="rect" coords="115, 711, 130, 720" alt="Washer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=184W-GHF300&NOLOGIN=1" shape="rect" coords="81, 781, 100, 793" alt="Washer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=183W-2K5197&NOLOGIN=1" shape="rect" coords="49, 769, 70, 779" alt="Washer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=174W-11G203&NOLOGIN=1" shape="rect" coords="104, 539, 120, 554" alt="Gear">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=185W-GHF120&NOLOGIN=1" shape="rect" coords="21, 678, 40, 691" alt="Screw">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=137W-1H730&NOLOGIN=1" shape="rect" coords="489, 490, 503, 501" alt="Gear">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=138W-WKN304&NOLOGIN=1" shape="rect" coords="484, 464, 501, 477" alt="Woodruff key">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=139W-SF604061&NOLOGIN=1" shape="rect" coords="436, 453, 452, 465" alt="Screw">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=140W-1G2285&NOLOGIN=1" shape="rect" coords="453, 479, 469, 492" alt="Housing">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=141W-12G4499&NOLOGIN=1" shape="rect" coords="489, 543, 508, 556" alt="Spindle distributor">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=142W-88G303&NOLOGIN=1" shape="rect" coords="435, 553, 449, 565" alt="Camshaft">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=152W-12H3357&NOLOGIN=1" shape="rect" coords="392, 472, 409, 485" alt="Pushrod">

<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=135W-G002C&NOLOGIN=1" shape="rect" coords="17, 273, 110, 399" alt="K&N breather">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=168W-AEC340&NOLOGIN=1" shape="rect" coords="227, 552, 244, 563" alt="Locktab">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=153W-2A13&NOLOGIN=1" shape="rect" coords="387, 519, 406, 534" alt="Cam follower">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=164W-GHF332&NOLOGIN=1" shape="rect" coords="276, 545, 291, 559" alt="Washer spring">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=159W-GHF332&NOLOGIN=1" shape="rect" coords="342, 619, 358, 632" alt="Washer spring">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=142W-88G303&NOLOGIN=1" shape="rect" coords="330, 659, 538, 788" alt="Camshaft">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=186W-GHF332&NOLOGIN=1" shape="rect" coords="46, 669, 62, 682" alt="Washer">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=161W-12H673&NOLOGIN=1" shape="rect" coords="310, 599, 325, 612" alt="Thrust plate">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=160W-GHF120&NOLOGIN=1" shape="rect" coords="316, 627, 334, 640" alt="Screw">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=154W-11G241&NOLOGIN=1" shape="rect" coords="337, 456, 351, 471" alt="Pushrod">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=158W-12H1387&NOLOGIN=1" shape="rect" coords="373, 611, 390, 624" alt="Mounting plate">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=157W-12H1576B&NOLOGIN=1" shape="rect" coords="391, 582, 409, 595" alt="Gasket mounting plate">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=156W-BHM1212&NOLOGIN=1" shape="rect" coords="431, 575, 507, 623" alt="Bearing set">
<area href="http://www.mgocspares.co.uk/cgi-bin/ss000001.pl?PRODREF=155W-12H3167&NOLOGIN=1" shape="rect" coords="337, 498, 352, 514" alt="Cam follower"></map>
<img border="0" src="http://www.mgocspares.co.uk/acatalog/engine_upper.jpg" usemap="#FPMap0" width="552" height="821" align="left"></p>

</body>

</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum