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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question please help with making a javascript/css image map

    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
    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!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>
    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
    •