2012-04-05 3 views
1

Dies ist Codierung für Karte. Wenn ich die Maus über die Karte hebe, wird nur die Hälfte des Zustands angezeigt. Ich muss den vollen Zustand hervorheben. Wie es geht? kann mir jemand mit Codierungen helfen ...Wie markieren Sie die gesamte Karte mit Svg in HTML-Datei?

sie ist unsere HTML-Programmierung:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html> 
<head> 
<script type="text/javascript" src="js/jquery-1.js"> 
var aid; 
var disid; 
var but; 
var hovid; 
</script> 
    <title>Sample Map</title> 
    <style type="text/css"> 
     .button {      
      list-style-type: none; 
      padding: 0; 
      margin: 0; 
      width: 100px; 
      font-family:"Arial", Helvetica, Sans-serif; 
      font-size:14px;v 
      font-weight: bold; 
     } 
    </style> 

</head> 
<body> 
    <div> 
     <!-- <p><a><button class="button" onclick="getid('VA','1','VA1','46','')";>Zoom</button></a></p> --> 
     <p><a><button class="button" onclick= "sample.style.zoom='2300%'">Zoom</button></a></p> 
     <button class="button"onclick= "sample.style.zoom='100%'">Zoom Out</button>   
    </div> 
<!-- <table> 
    <tr>  
    <td> --> <div id="sample"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700" height="500"> 


<polyline fill="#c0c3c5" id="KY1" title="Kentucky" alt="Kentucky" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points=" 
    500.441,263.861 519.982,261.672 527.197,259.595 527.905,257.709 530.413,256.524 530.479,255.049 532.128,253.862 
    532.072,252.457 540.856,244.216 540.864,244.264 538.589,244.089 537.851,243.049 536.241,242.449 535.75,240.996 
    533.173,238.515 533.231,237.692 530.597,234.998 531.316,233.435 530.781,230.627 530.781,230.627 528.975,228.691 
    527.19,228.215 525.973,225.548 524.385,226.236 523.034,228.147 521.104,228.767 518.115,227.233 516.802,227.828 
    516.454,228.738 515.22,228.559 513.299,226.783 508.794,226.435 507.269,223.303 505.197,221.858 503.135,222.735 
    501.486,221.724 499.633,223.385 500.554,224.641 500.064,225.881 501.259,226.137 501.105,227.831 498.844,228.127 
    496.451,229.948 495.07,229.116 492.96,229.656 493.607,232.788 491.278,234.587 490.614,237.195 488.653,237.714 487.86,239.469 
    487.837,241.85 486.289,243.296 483.179,241.962 482.883,240.586 481.676,239.776 482.273,240.805 480.57,241.011 480.997,241.997 
    479.969,242.69 480.156,244.352 479.224,244.76 478.745,245.989 478.408,245.047 477.161,245.259 475.939,243.798 473.506,245.307 
    472.427,247.555 468.408,245.295 466.396,245.884 465.938,244.891 466.096,246.879 465.344,247.479 464.821,246.169 
    463.313,246.82 462.113,245.998 461.558,246.416 462.041,247.836 461.383,248.588 460.169,248.138 458.925,250.765 
    460.069,253.706 454.872,255.64 454.62,257.494 455.961,259.672 454.62,261.216 448.309,258.937 446.057,261.607 446.887,263.396 
    446.925,266.685 445.605,270.267 443.757,269.407 442.896,271.563 461.841,270.314 461.136,267.126 464.089,267.174 
    464.391,267.746 481.355,266.352 481.978,265.647 500.441,263.861" onmouseover="getstate('KY','17','','KY1');" onmouseout="onout('KY1');"><title>Kentucky</title></polyline> 

<polyline fill="#c0c3c5" id="OH1" title="Ohio" alt="Ohio" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points=" 
    545.233,168.086 533.923,176.797 530.205,177.313 526.158,179.271 521.791,179.139 521.14,178.462 519.449,178.738 
    518.338,178.549 516.531,177.317 513.018,176.452 495.778,178.437 500.535,222.528 501.486,221.724 503.135,222.735 
    505.197,221.858 507.269,223.303 508.794,226.435 513.299,226.783 515.22,228.559 516.454,228.738 516.802,227.828 
    518.115,227.233 521.104,228.767 523.034,228.147 524.385,226.236 525.973,225.548 527.19,228.215 528.975,228.691 
    530.781,230.627 534.104,229.693 534.405,227.264 535.615,226.61 534.705,223.909 536.431,219.708 537.908,219.829 
    538.283,221.624 539.354,220.335 540.222,220.539 539.172,218.129 539.979,217.634 539.759,216.364 540.446,214.741 
    541.875,214.269 543.063,211.814 544.403,212.763 546.07,211.648 549.936,207.213 550.254,205.473 549.648,204.752 
    550.342,203.011 550.119,202.119 550.712,201.92 550.564,199.059 551.643,195.083 551.105,193.692 551.299,192.52 550.067,190.643 
    550.456,189.982 551.832,189.336 551.869,189.331 548.445,167.054" onmouseover="getstate('OH','35','','OH1');" onmouseout="onout('OH1');"><title>Ohio</title></polyline>  

<polyline fill="#c0c3c5" id="TN1" title="Tennessee" alt="Tennessee" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points=" 
    547.005,258.142 519.982,261.672 481.978,265.647 481.355,266.352 464.391,267.746 464.089,267.174 461.136,267.126 
    461.841,270.314 442.896,271.563 442.566,272.441 442.116,270.633 441.231,270.85 441.993,273.718 440.677,274.601 
    441.598,275.787 439.899,276.097 441.156,277.86 439.612,280.212 440.607,281.83 439.073,282.184 439.889,282.889 439.577,283.445 
    436.892,284.996 437.67,286.516 436.927,287.202 437.466,288.361 436.222,288.641 434.894,291.565 435.431,295.197 
    434.263,295.366 433.888,296.621 432.572,297.281 461.637,295.572 496.773,292.57 514.591,290.681 514.564,287.004 
    515.268,286.275 517.391,286.089 517.988,283.31 519.572,281.555 521.415,280.522 524.753,280.015 528.858,276.253 
    531.123,275.589 532.06,273.732 531.916,272.61 533.325,272.756 533.646,271.518 535.344,270.267 536.552,271.847 539.736,268.385 
    540.869,267.848 542.748,268.568 544.534,264.847 545.677,263.764 547.03,263.848 546.424,262.896 546.94,261.359 546.537,260.654 
    547.005,258.142" onmouseover="getstate('TN','42','','TN1');" onmouseout="onout('TN1');"><title>Tennessee</title></polyline> 

    </svg> </div> <!--</td>  
    </tr> 
    </table> --> 
    <script type="text/javascript" > 

    function getstate(aid,disid,but,hovid) { 
    var elem = document.getElementById(hovid); 
       elem.setAttributeNS(null,"stroke","#404040"); 
       elem.setAttributeNS(null,"stroke-width","2.35"); 
    }  
      function onout(hovid) { 
      var elem1 = document.getElementById(hovid); 
       elem1.setAttributeNS(null,"stroke","#FFFFFF"); 
       elem1.setAttributeNS(null,"stroke-width","2.35"); 
      } 
    </script> 

</body> 

+0

bitte einige eine Antwort .... – user1300103

Antwort

2

Das hat mit einer Schichtung, um zu tun. Ihr mittlerer Zustand ist unter den anderen zwei begraben. Um es nach oben zu bringen, so dass die Grenze oben angezeigt wird, müssen Sie das Element zuletzt einfügen.

wäre ein quickfix Ihren Elementen eine ID geben: in Ihren getstate() Funktion, <svg id="id_svg" ...

Dann werden diese am Ende einfügen:

document.getElementById('id_svg').appendChild(elem);

Einen eventuell besseren Weg, dies zu handhaben Komplexitäten ist eine Bibliothek wie Raphaeljs zu verwenden. Es behebt viele Ärgernisse und ist Cross-Browser-kompatibel.

Zum Beispiel finden Sie auf dieser Geige: http://jsfiddle.net/3345Q/

+0

diese Codierung k? – user1300103

+0

Haben Sie noch andere Beispiele, ohne raphaeljs zu benutzen? Wir wollen dies in Javascript oder Jquery-Bibliothek, weil wir raphaeljs – user1300103

+0

nicht verwendet haben Die Codeänderungen, die ich gepostet habe (zwei: Hinzufügen von ID und Hinzufügen der appendChild-Zeile) wird beheben, was Sie wollen. – pp19dd

Verwandte Themen