HTML Imagemap an Seite anpassen?

    HTML Imagemap an Seite anpassen?

    Hallo Freunde, ich habe auf meiner Internetseite eine Karte in HTML mit einem "Hotspot (area shape)" mit einer Verlinkung auf eine andere Seite.
    Die Beschriftung habe ich mit Java erstellt (sieht besser aus) :) und ich bin stolz das ich es auch geschafft habe als absoluter Anfänger.

    Jetzt habe ich das Problem, wenn ich das Bild an der Seite anpassen will mit in z.B. width="80%" height="80%"

    Quellcode

    1. <img src="http://dhdro.eu/karte/mittelerde.jpg" alt="Mittelerde" width="1280" height="1024" border="0" usemap="#Mittelerde" />


    meine Hotspots aber immer noch an der stelle sind wie ich sie in der Auflösung 1280x1024 erstellt habe.



    Wie kann ich es lösen das ich die Hotspots auch zum Bild anpasse?

    Quellcode

    1. <body>
    2. <map name="Mittelerde" id="Mittelerde">
    3. <img src="http://dhdro.eu/karte/mittelerde.jpg" alt="Mittelerde" width="80%" height="80%" border="0" usemap="#Mittelerde" />
    4. <area shape="poly" coords="430,319,446,326,460,321,468,331,483,327,479,316,495,313,514,304,521,292,527,277,541,255,542,233,538,218,542,199,544,188,545,172,548,160,553,152,597,146,592,135,582,129,575,127,578,118,594,117,631,123,642,138,643,151,648,157,677,157,698,151,714,143,743,145,770,156,789,164,805,176,821,188,824,204,825,229,835,259,839,283,837,299,834,312,827,330,822,341,785,344,770,354,758,365,750,387,742,402,741,417,739,439,738,455,737,471,718,492,693,500,654,500,633,499,607,506,605,487,595,483,579,493,565,481,559,465,566,450,560,446,541,460,532,449,538,428,538,421,520,424,509,420,505,410,492,410,477,399,463,400,446,371,428,368,424,344" href="http://dhdro.eu/karte/eriador.html" onmouseover="return overlib('<strong>Test 123:</strong><br>Test test test');" onmouseout="nd();" alt="" />
    5. </map>
    6. </body>



    Karte
    Test Mein PC

    Ich würde das mit einem JavaScript machen:
    Und zwar: wenn ich mich nicht irre, musst du, um die Koordinaten umzurechnen folgendes berechnen:
    -neue x-Koordinate = alteXkoordinate / 1280 * neueBreite
    -neue y-Koordinate = alteYkoordinate / 1024 * neuehoehe
    Dein IMG-Tag sollte noch einen Namen bekommen

    Quellcode

    1. <img src="http://dhdro.eu/karte/mittelerde.jpg" name="mittelerde" alt="Mittelerde" width="1280" height="1024" border="0" usemap="#Mittelerde" />

    Und dann lässt du dir dein Areashape-Tag mit JavaScript generieren:

    Quellcode

    1. <script language="JavaScript">
    2. function chx(altx, breite)
    3. {
    4. return altx / 1280 * breite;
    5. }
    6. function chy(alty, hoehe)
    7. {
    8. return alty / 1024 * hoehe;
    9. }
    10. var h = document.mittelerde.offsetHeight;
    11. var b = document.mittelerde.offsetWidth;
    12. document.write("<area shape=\"poly\" ");
    13. document.write("coords=\"");
    14. document.write(chx(430, b) + "," + chy(319, h) + "," + chx(446, b) + "," + chy(326, h) + "," + chx(460, b) + "," + chy(321, h) + ",");
    15. document.write(chx(468, b) + "," + chy(331, h) + "," + chx(483, b) + "," + chy(327, h) + "," + chx(479, b) + "," + chy(316, h) + ",");
    16. // Und das ganze für die folgenden Koordinaten fortsetzen, wofür ich jetzt zu faul bin :P //495,313,514,304,521,292,527,277,541,255,542,233,538,218,542,199,544,188,545,172,548,160,553,152,597,146,592,135,582,129,575,127,578,118,594,117,631,123,642,138,643,151,648,157,677,157,698,151,714,143,743,145,770,156,789,164,805,176,821,188,824,204,825,229,835,259,839,283,837,299,834,312,827,330,822,341,785,344,770,354,758,365,750,387,742,402,741,417,739,439,738,455,737,471,718,492,693,500,654,500,633,499,607,506,605,487,595,483,579,493,565,481,559,465,566,450,560,446,541,460,532,449,538,428,538,421,520,424,509,420,505,410,492,410,477,399,463,400,446,371,428,368,424,344"
    17. document.write("\" href=\"http://dhdro.eu/karte/eriador.html\" onmouseover=\"return overlib('<strong>Test 123:</strong><br>Test test test');\" onmouseout=\"nd();\" alt=\"\" />
    18. </script>


    Es ist bei den vielen Koordinaten ne Menge Tipparbeit, aber so wird es funktionieren. Nur hast du ein Problem, sobald jemand die Fenstergröße verändert... wie man das hinbekommen kann, weiß ich nicht...
    Es gibt zwei Dinge, die unendlich sind. Das Universum und die menschliche Dummheit. Aber bei dem Universum bin ich mir noch nicht sicher...
    Albert Einstein
    Fensterbreite und Höhe kannst Du folgendermaßen abfragen:

    Quellcode

    1. function setpic()
    2. {
    3. var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0;
    4. if (window.opera) OP = 1;
    5. if(document.getElementById) {
    6. DHTML = 1;
    7. DOM = 1;
    8. }
    9. if(document.all && !OP) {
    10. DHTML = 1;
    11. MS = 1;
    12. }
    13. if(window.innerHeight && !OP) {
    14. DHTML = 1;
    15. NS = 1;
    16. }
    17. if (MS) hoehe=document.getElementsByTagName("html")[0].offsetHeight;
    18. else hoehe=window.innerHeight;
    19. if (MS) breite=document.getElementsByTagName("html")[0].offsetWidth - 20;
    20. else breite=window.innerWidth;
    21. // Hier nun den Code einfügen, der die einzelnen Elemente verändert - also normalerweise die .height und .width Eigenschaften setzt
    22. }


    Im Body rufst Du die Funktion setpic dann über js mittels eventhandler auf:

    Quellcode

    1. <body onload="setpic()">
    2. <script type="text/javascript">
    3. <!--
    4. window.onresize = setpic;
    5. //-->
    6. </script>


    Ich habe eine Webseite, wo ich dynamisch alle Elemente in der Größe ändere - schau Dir mal den Quelltext an:
    kocos.ko.ohost.de/


    Gemäß hier
    solltest Du die Koordinaten der Map mit document.all.area1.setAttribute("coords","0,0,100,100","false")
    ändern können - wobei der zweite Parameter dann Deine individuellen Koordinaten beinhaltet.
    Die würde ich übrigens in einem Array ablegen und dann zum Ändern mit setAttribute umrechnen und daraus einen String bauen.
    {brigens ist ein Kezboard/Treiber v;llig [berfl[ssig!

    Hier gibts Antivirensoftware