0

Je veux la carte de l'Inde et la liste avec le texte pour que les régions s'écoutent de sorte que lorsque le pointeur de la souris survole une région, le nom de la région correspondante est souligné, et de même si je survole le nom de la région à gauche puis la zone correspondante sur la carte doit être surlignée avec la couleur rose. Pouvez-vous m'aider? Je peux ajouter du code pour écouter l'événement hover, mais je ne suis pas sûr de savoir comment mettre en évidence les régions par programme? Je peux écouter en cliquant sur une région et en cliquant sur un nom de région mais comment mettre en surbrillance la région correspondante lors de la sélection du texte?Comment faire pour écouter et mettre en évidence des régions spécifiques de ma carte de l'Inde?

enter image description here

<!DOCTYPE html> 
<html> 

    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <meta name="keywords" 
      content="Houses Apartments, Vacation homes, Offices, Land, Flatmates,Paying Guest, Other real estate, Cars, Motorcycles, Accessories parts, Trucks, Other vehicles, Home Garden, Clothing, For Kids (Toys Clothes), Jewelry Watches, Hobbies, Sports Bicycles, Movies, Books Magazines, Pets, Tickets, Art Collectibles, Music Instruments, Computers Accessories, TV, Audio, Video, Cameras, Cellphones gadgets, Video games consoles, Job offers, Resumes, Services, Classes, Professional,Office equipment, Other, "> 
    <meta name="description" 
      content="Find jobs, cars, houses, mobile phones and properties for sale in your region conveniently. Find the best deal among {{count}} free ads online!"> 

    <title>Free classifieds in India - Koolbusiness.com</title> 

    <link href="/static/css/koolindex_in.css?0.238133053892" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="/static/js/jquery-1.10.2.min.js?0.238133053892"></script> 
</head> 
<body> 
{% include "kooltopbar.html" %} 

    <script type='text/javascript' src='http://www.google.com/jsapi'></script> 
    <script type='text/javascript'> 


     function drawMap() { 
var data = google.visualization.arrayToDataTable([ 
      ['Province'], 
     ['Goa'], 
     ['Gujarat'], 

     ['Andhra Pradesh'], 
['Arunachal Pradesh'], 
['Assam'], 
['Bihar'], 
['Chhattisgarh'], 
['Goa'], 
['Gujarat'], 
['Haryana'], 
['Himachal Pradesh'], 
['Jammu and Kashmir'], 
['Jharkhand'], 
['Karnataka'], 
['Kerala'], 
['Madhya Pradesh'], 
['Maharashtra'], 
['Manipur'], 
['Meghalaya'], 
['Mizoram'], 
['Nagaland'], 
['Orissa'], 
['Punjab'], 
['Rajasthan'], 
['Sikkim'], 
['Tamil Nadu'], 
['Tripura'], 
['Uttaranchal'], 
['Uttar Pradesh'], 
['West Bengal'], 
['Delhi'], 
['Lakshadweep'], 
['Daman and Diu'], 
['Dadra and Nagar Haveli'], 
['Chandigarh'], 
['Pondicherry'], 
['Andaman and Nicobar Islands'] 
    ]); 

var options = { 
      region:'IN', 
      backgroundColor: '#81d4fa', 
      datalessRegionColor: '#ffc801', 
     width:468, 
     height:278, 
    resolution: 'provinces', 
     }; 
    var container = document.getElementById('mapcontainer'); 
    var chart = new google.visualization.GeoChart(container); 

    function myClickHandler(){ 
     var selection = chart.getSelection(); 
     var message = ''; 
     for (var i = 0; i < selection.length; i++) { 
      var item = selection[i]; 
      // if (item.row != null && item.column != null) { 
       message += '{row:' + item.row + ',column:' + item.column + '}'; 
      //} else 
      if (item.row != null) { 
       message += '{row:' + item.row + '}'; 
      //} else if (item.column != null) { 
       // message += '{column:' + item.column + '}'; 
      } 
     } 
     if (message == '') { 
      message = 'nothing'; 
     } 
     //alert('You selected ' + message); 

     if (item.row==2) { 
      window.location = "/andhra_pradesh/"; 
     } 
     if (item.row==3) { 
      window.location = "/arunachal_pradesh/"; 
     } 
     if (item.row==4) { 
      window.location = "/assam/"; 
     } 
     if (item.row==6) { 
      window.location = "/chhattisgarh/"; 
     } 
     if (item.row==7) { 
      window.location = "/goa/"; 
     } 
     if (item.row==8) { 
      window.location = "/gujarat/"; 
     } 
     if (item.row==9) { 
      window.location = "/haryana/"; 
     } 
     if (item.row==10) { 
      window.location = "/himachal_pradesh/"; 
     } 
     if (item.row==11) { 
      window.location = "/jammu_kashmir/"; 
     } 
     if (item.row==12) { 
      window.location = "/jharkhand/"; 
     } 
     if (item.row==13) { 
      window.location = "/karnataka/"; 
     } 
     if (item.row==14) { 
      window.location = "/kerala/"; 
     } 
     if (item.row==15) { 
      window.location = "/madhya_pradesh/"; 
     } 
     if (item.row==16) { 
      window.location = "/maharashtra/"; 
     } 
     if (item.row==17) { 
      window.location = "/manipur/"; 
     } 
     if (item.row==18) { 
      window.location = "/meghalaya/"; 
     } 
     if (item.row==19) { 
      window.location = "/mizoram/"; 
     } 
     if (item.row==20) { 
      window.location = "/nagaland/"; 
     } 
     if (item.row==21) { 
      window.location = "/orissa/"; 
     } 
     if (item.row==22) { 
      window.location = "/punjab/"; 
     } 
     if (item.row==23) { 
      window.location = "/rajasthan/"; 
     } 
     if (item.row==24) { 
      window.location = "/sikkim/"; 
     } 
     if (item.row==25) { 
      window.location = "/tamil_nadu/"; 
     } 
     if (item.row==25) { 
      window.location = "/tripura/"; 
     } 
     if (item.row==28) { 
      window.location = "/uttar_pradesh/"; 
     } 
     if (item.row==29) { 
      window.location = "/west_bengal/"; 
     } 
     if (item.row==36) { 
      window.location = "/andaman_nicobar_islands/"; 
     } 
    } 
    google.visualization.events.addListener(chart, 'select', myClickHandler); 
    chart.draw(data, options); 
     } 
google.load('visualization', '1', {packages: ['geochart'], callback: drawMap}); 

    </script> 

<div id="wrapper"> 

<!--[if lt IE 7]> 
<div class="alert-outer alert-error"> 
    <a href="#" class="alert-closer" title="close this alert" onclick="removeIeNotification(this); return false;">×</a> 

    <div class="alert-inner"> 
     <span><strong>You are using an outdated version of Internet Explorer.</strong> For a faster, safer browsing experience, upgrade today!</span> 

    </div> 
</div> 
![endif]--> 
<header> 


    <h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &amp; 
     selling in india</h1> 

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
    <!-- v2 --> 
    <ins class="adsbygoogle" 
     style="display:inline-block;width:728px;height:15px" 
     data-ad-client="ca-pub-7211665888260307" 
     data-ad-slot="9119838994"></ins> 
    <script> 
     (adsbygoogle = window.adsbygoogle || []).push({}); 
    </script> 
</header> 

<![endif]--> 
<div style="width: 100%; overflow: hidden;"> 
    <div style="width: 768px; float: left;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<!-- front leaderboard --> 
<ins class="adsbygoogle" 
    style="display:inline-block;width:728px;height:90px" 
    data-ad-client="ca-pub-7211665888260307" 
    data-ad-slot="4543980997"></ins> 
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script> </div> 
    <div id="post3" style="margin-left: 735px;"> <a href="/ai" id="ad2">Post your ad for free</a> </div> 
</div> 


<div class="main"> 
<div class="column_left"> 
    <div class="box"> 

     <ul> 
      <li>KoolBusiness is easy, free, and kool.</li> 
      <li>Buy and sell <a href="/india/cars-for_sale">cars</a>, check our <a href="/india/real_estate">real 
       estate</a> 
       section, find <a href="/india/jobs">jobs</a>, and much more. 
      </li> 
      <li>Check our <strong><a href="/india">{{count}} ads online</a></strong> and find what you are looking for 
       in 
       your region or in all India. 
      </li> 
     </ul> 


    </div> 

    <div id="regions"> 


     <div class="region_links_one"> 
      <ul class="regions_one"> 
       <li><a id="region_8" class="region" href="http://www.koolbusiness.com/andhra_pradesh/">Andhra 
        Pradesh</a></li> 
       <li><a id="region_9" class="region" href="http://www.koolbusiness.com/arunachal_pradesh/">Arunachal 
        Pradesh</a></li> 
       <li><a id="region_10" class="region" 
         href="http://www.koolbusiness.com/assam/">Assam</a> 
       </li> 
       <li><a id="region_11" class="region" 
         href="http://www.koolbusiness.com/bihar/">Bihar</a> 
       </li> 
       <li><a id="region_12" class="region" 
         href="http://www.koolbusiness.com/chhattisgarh/">Chhattisgarh</a></li> 
       <li><a id="region_13" class="region" 
         href="http://www.koolbusiness.com/goa/">Goa</a></li> 
       <li><a id="region_14" class="region" href="http://www.koolbusiness.com/gujarat/">Gujarat</a> 
       </li> 
       <li><a id="region_15" class="region" href="http://www.koolbusiness.com/haryana/">Haryana</a> 
       </li> 
       <li><a id="region_16" class="region" href="http://www.koolbusiness.com/himachal_pradesh/">Himachal 
        Pradesh</a></li> 
       <li><a id="region_17" class="region" href="http://www.koolbusiness.com/jammu_kashmir/">Jammu 
        &amp; 
        Kashmir</a></li> 
       <li><a id="region_18" class="region" href="http://www.koolbusiness.com/jharkhand/">Jharkhand</a> 
       </li> 
       <li><a id="region_19" class="region" href="http://www.koolbusiness.com/karnataka/">Karnataka</a> 
       </li> 
       <li><a id="region_20" class="region" href="http://www.koolbusiness.com/kerala/">Kerala</a> 
       </li> 
       <li><a id="region_21" class="region" href="http://www.koolbusiness.com/madhya_pradesh/">Madhya 
        Pradesh</a></li> 
      </ul> 
      <ul class="regions_two"> 
       <li><a id="region_22" class="region" 
         href="http://www.koolbusiness.com/maharashtra/">Maharashtra</a></li> 
       <li><a id="region_23" class="region" href="http://www.koolbusiness.com/manipur/">Manipur</a> 
       </li> 
       <li><a id="region_24" class="region" href="http://www.koolbusiness.com/meghalaya/">Meghalaya</a> 
       </li> 
       <li><a id="region_25" class="region" href="http://www.koolbusiness.com/mizoram/">Mizoram</a> 
       </li> 
       <li><a id="region_26" class="region" href="http://www.koolbusiness.com/nagaland/">Nagaland</a> 
       </li> 
       <li><a id="region_27" class="region" href="http://www.koolbusiness.com/orissa/">Orissa</a> 
       </li> 
       <li><a id="region_28" class="region" href="http://www.koolbusiness.com/punjab/">Punjab</a> 
       </li> 
       <li><a id="region_29" class="region" href="http://www.koolbusiness.com/rajasthan/">Rajasthan</a> 
       </li> 
       <li><a id="region_30" class="region" href="http://www.koolbusiness.com/sikkim/">Sikkim</a> 
       </li> 
       <li><a id="region_31" class="region" href="http://www.koolbusiness.com/tamil_nadu/">Tamil 
        Nadu</a></li> 
       <li><a id="region_32" class="region" href="http://www.koolbusiness.com/tripura/">Tripura</a> 
       </li> 
       <li><a id="region_34" class="region" 
         href="http://www.koolbusiness.com/uttaranchal/">Uttaranchal</a></li> 
       <li><a id="region_33" class="region" href="http://www.koolbusiness.com/uttar_pradesh/">Uttar 
        Pradesh</a></li> 
       <li><a id="region_35" class="region" href="http://www.koolbusiness.com/west_bengal/">West 
        Bengal</a></li> 
      </ul> 
     </div> 
     <div class="region_links_two"> 
      <!-- ads here --> 
      <h2>Union territories</h2> 


      <ul class="regions_one"> 
       <li><a class="region" href="http://www.koolbusiness.com/delhi/">Delhi</a></li> 
       <li><a class="region" href="http://www.koolbusiness.com/lakshadweep/">Lakshadweep</a></li> 
       <li><a class="region" href="http://www.koolbusiness.com/daman_diu/">Daman &amp; Diu</a> 
       </li> 
       <li><a class="region" href="http://www.koolbusiness.com/dadra_nagar_haveli/">Dadra &amp; Nagar 
        Haveli</a> 
       </li> 
      </ul> 
      <ul class="regions_two"> 
       <li><a class="region" href="http://www.koolbusiness.com/chandigarh/">Chandigarh</a></li> 
       <li><a class="region" href="http://www.koolbusiness.com/pondicherry/">Pondicherry</a></li> 
       <li><a class="region" href="http://www.koolbusiness.com/andaman_nicobar_islands/">Andaman &amp; 
        Nicobar 
        Islands</a></li> 
      </ul> 
     </div> 
    </div> 

</div> 
<div id="my_wrapper"> 

<div id="mapcontainer"></div> 
<div id="gads" style="clear:both"> 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<!-- frontpagebelowmap --> 
<ins class="adsbygoogle" 
    style="display:inline-block;width:300px;height:250px" 
    data-ad-client="ca-pub-7211665888260307" 
    data-ad-slot="3839303791"></ins> 
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script> 



</div> 
</div> 



<footer class="nohistory columns"> 



    <p class="first">A good deal is just around the corner!</p> 


    <p>KoolBusiness is the right choice for safe buying and selling in India: a free classifieds website where you 
     can buy and sell almost everything.</p> 


    <p><a href="/ai">Post an ad for free</a> or browse through our categories. You will find thousands of free 
     classifieds for cars, houses, mobile phones and gadgets, computers, pets and dozens of items and services in 
     your state or union territory.</p> 


    <p> 

     <strong>KoolBusiness does not charge any fee and does not require registration.</strong> Every 
     ad is checked so we can give you the highest quality possible for the ads on our site. That’s why 
     KoolBusiness is the most convenient, easiest to use and most complete free ads site in India.</p> 


    <div id="world_sites"> 





    </div> 




</footer> 

</div> 



</body> 
</html> 

Répondre

2

J'ai construire quelque chose de similaire en utilisant des données JS & JSON cinétiques. Approche est assez simple, vous devez obtenir votre carte de l'Inde tracée dans SVG par le concepteur dans Adobe Illustrator, une fois que cela est fait, vous devez analyser ce SVG par Kinetics JS qui rendent les éléments Canvas.

J'ai également créé un simple analyseur en PHP qui lit les données SVG et les convertit en objet javascript.

http://codepen.io/anon/pen/ByemRJ

var TerritoryPathData = { 
    U05A001: { 
     path: 'M178.619,101.544c-0.39-0.55-1.205-0.61-1.555-1.3 c-0.33-0.651,0.001-1.798-0.173-2.519c-0.596-2.448-2.815-4.989-4.059-6.996c-0.784-1.264-0.606-2.619-1.729-3.664 c-1.431-1.333-4.058-1.276-3.687-3.819c0.192-1.328,1.622-2.811,2.375-3.813c1.005-1.339,0.985-2.45,1.694-3.712 c0.101-0.18,0.139-0.695,0.222-0.938c1.298-0.076,3.113,0.382,3.88-0.752c0.577-0.851,0.165-3.419,0.111-4.466 c-2.078,0.217-6.329-3.901-7.261-5.625c-0.395-0.731-0.137-1.464-0.435-2.128c-0.635-1.415-0.585-0.781-1.845-1.201 c-1.692-0.564-2.109-1.096-3.374-2.463c-2.49-2.692-5.928-3.239-8.94-5.171c-1.626-1.044-4.494-6.443-2.453-8.172 c0.445-0.376,1.56-0.033,2.128-0.178c0.914-0.234,1.244-0.407,1.979-0.961c1.577-1.189,1.5-1.851,1.497-3.867 c-0.001-1.643,0.035-3.193,0.193-4.832c0.226-2.326,1.55-1.68,2.472-3.514c0.265-0.525,0.072-1.515,0.232-2.082 c0.208-0.738,0.675-1.197,0.975-1.92c0.512-1.234,0.867-2.911,1.191-4.215c0.466-1.868,0.616-2.173,2.043-3.519 c1.273-1.2,1.608-2.639,2.548-3.862c0.082-0.107,0.164-0.572,0.228-0.738c4.289-0.738,9.563,0.701,13.676-0.614 c2.455-0.785,2.125-2.803,2.125-5.214c0-0.891-0.314-2.458-0.013-3.283c0.333-0.916,1.474-1.778,1.977-2.67 c1.862-0.29,3.561,0.323,4.605,1.903c0.813,1.231,0.707,2.62,1.541,3.862c2.178,3.247,6.219,2.019,9.665,2.505 

Jetez un oeil à mon travail, http://ibnlive.in.com/delhi-assembly-election-results-2013-live/

J'ai suivi ce tutoriel de base http://dev.filkor.org/2013/04/14/create-an-interactive-map-using-javascript-and-html-5-canvas/ et piraté les choses selon mes besoins du projet.