469,313 Members | 2,340 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,313 developers. It's quick & easy.

how to highlight a img position in js?

Hello sir/madam, i have a one img file, in this file i search one keyword,
suppose 'sample' , how to highlight this word in img file using javascript.
i have one program ,

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.  
  3. <title>UK Map Example</title>
  4.  
  5. <body> 
  6.  
  7.     <table border="0" align="center">
  8.      <td align="center"  valign="bottom"><br>
  9.  
  10.         <a href="tourner" onmouseover="mapshow(0);" onmouseout="maphide();">tourner</a>
  11.  
  12.          <a href="presque" onmouseover="mapshow(1);" onmouseout="maphide();">presque</a>
  13.  
  14.          <a href="humain" onmouseover="mapshow(2);" onmouseout="maphide();">humain</a>
  15.  
  16.          <a href="temoignent" onmouseover="mapshow(3);" onmouseout="maphide();">temoignent</a>
  17.  
  18.          <a href="manque" onmouseover="mapshow(4);" onmouseout="maphide();">manque</a>
  19.  
  20.          <a href="Toutefois" onmouseover="mapshow(5);" onmouseout="maphide();">Toutefois</a>
  21.  
  22.          <a href="debris" onmouseover="mapshow(6);" onmouseout="maphide();">debris</a>
  23.  
  24.          <a href="travail" onmouseover="mapshow(7);" onmouseout="maphide();">travail</a>
  25.  
  26.         <a href="presumer" onmouseover="mapshow(8);" onmouseout="maphide();">presumer</a>
  27.  
  28.         <a href="Gaules" onmouseover="mapshow(9);" onmouseout="maphide();">Gaules</a>
  29.      </td></tr>
  30.     </table>
  31.  
  32. </body>
  33.  
  34.  
  35. <div id="map" style="background:url('/alto sample/js/altoimg.jpg') ">&nbsp;</div>
  36. <script type="text/javascript">
  37.  
  38.  
  39.  
  40.   var marker, markersrc, markersize;
  41.  
  42.   var isIE = (document.all && navigator.userAgent.indexOf("Mozilla")==-1);
  43.  
  44.   var coordx   = new Array(10);
  45.  
  46.   var coordy   = new Array(10);
  47.  
  48.  
  49.   if (isIE) {
  50.  
  51.     markersrc = "pos.gif";
  52.  
  53.   } else {
  54.  
  55.     markersrc = "pos.gif";
  56.  
  57.   }
  58.  
  59.  
  60.  
  61.   markersize = 32;
  62.  
  63.  
  64.  
  65.   // tourner
  66.  
  67.   coordx[0]   = 1420;
  68.  
  69.   coordy[0]   = 1329;
  70.  
  71.  
  72.   // presque
  73.  
  74.   coordx[1]   = 978;
  75.  
  76.   coordy[1]   = 839;
  77.  
  78.  
  79.  
  80.   // humain
  81.  
  82.   coordx[2]   = 716;
  83.  
  84.   coordy[2]   = 516;
  85.  
  86.  
  87.  
  88.   // témoignent
  89.  
  90.   coordx[3]   = 885;
  91.  
  92.   coordy[3]   = 516;
  93.  
  94.  
  95.  
  96.   // manque
  97.  
  98.   coordx[4]   = 1215;
  99.  
  100.   coordy[4]   = 465;
  101.  
  102.  
  103.  
  104.   // Toutefois
  105.  
  106.   coordx[5]   = 913;
  107.  
  108.   coordy[5]   = 454;
  109.  
  110.  
  111.  
  112.   // débris
  113.  
  114.   coordx[6]   = 1827;
  115.  
  116.   coordy[6]   = 452;
  117.  
  118.  
  119.  
  120.   // travail
  121.  
  122.   coordx[7]   = 574;
  123.  
  124.   coordy[7]   = 517;
  125.  
  126.  
  127.  
  128.   // présumer
  129.  
  130.   coordx[8]   = 725;
  131.  
  132.   coordy[8]   = 641;
  133.  
  134.  
  135.  
  136.   // Gaules
  137.  
  138.   coordx[9]   = 780;
  139.  
  140.   coordy[9]   = 1695;
  141.  
  142.  
  143.  
  144.   function mapinit () {
  145.  
  146.  
  147.  
  148.     var map = document.getElementById("map");
  149.  
  150.     map.style.width = "2481px";
  151.  
  152.     map.style.height = "3508px";
  153.  
  154.     //map.style.backgroundImage = "url('/alto%20sample/js/altoimg.jpg')";
  155.  
  156.     map.style.position = "relative"; // to position marker
  157.  
  158.  
  159.  
  160.     marker = new Image();
  161.  
  162.     marker.src = markersrc;
  163.     marker.alt = "";
  164.  
  165.     marker.style.display = "none";
  166.  
  167.     marker.style.position = "absolute";
  168.  
  169.     map.appendChild(marker);
  170.  
  171.  
  172.  
  173.   }
  174.  
  175.  
  176.  
  177.   function maphide () {
  178.  
  179.     marker.style.display = "none";
  180.  
  181.   }
  182.  
  183.  
  184.  
  185.   function mapshow (imgword) {
  186.  
  187.     mapinit();
  188.  
  189.     var offset = 0 - (markersize/2);
  190.  
  191.     var x = coordx[imgword] + offset;
  192.  
  193.     var y = coordy[imgword] + offset;
  194.  
  195.     marker.style.left = x + "px";
  196.  
  197.     marker.style.top = y + "px";
  198.  
  199.     marker.style.display = "block";
  200.  
  201.   }
  202.  
  203.  
  204. </script>


the above program i have already find out word coordinate position,and mark that position, but how to highlight that position i'e how to put 'sample' height&width in my program, plz help me...........
Oct 18 '07 #1
1 3179
acoder
16,027 Expert Mod 8TB
Create a transparent div and put the word "sample" in it. For transparency, set the background to be "transparent".
Oct 18 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Martin Lira | last post: by
6 posts views Thread by LU | last post: by
35 posts views Thread by shapper | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.