Area

  • Hi!


    Ich bastel gerade eine interaktive Map und bin bisher soweit:


    Code
    <p class="text-center"><img src="http://domain.de/images/map/751.png" alt="751.png" usemap="#map">
    
    <map name="map">
    
    <area alt="Test 1" shape="circle" coords="300,300,10" href="/test.php onmouseover="return escape('Test 1');">
    
    <area alt="Test 2" shape="poly" coords="6,612,22,612,22,629,6,629" href="/test2.php" onmouseover="return escape('Test 2');">
    
    </map>
    </p>


    Rein von der Erkennung der Koordinaten funktioniert es, auch die Links funktionieren. Ich würde nun gerne hier noch einen Hover Effekt einfügen.


    Ich kenne Hover-Effekte bisher nur so im html:


    <span class="tooltipText">Text</span>


    Funktioniert aber nicht bei Area. Habt ihr ne Idee?


    Vielen Dank!


    Grüße von Seferd

  • Das title-Attribut lässt sich nicht, bzw. nicht einheitlich bei jedem Browser, mit CSS verändern.


    Dafür würde ich eine andere Lösung, die ich gefunden habe empfehlen: Abschnitt:You can make a pseudo-tooltip with CSS and a custom attribute (e.g. data-title)

    https://stackoverflow.com/ques…bute-inside-an-anchor-tag


    Allerdings habe ich, irgendwo gesehen (vielleicht habe ich mich auch getäuscht), dass so etwas (ähnliches, vielleicht nicht unter dem selben Bezeichner wie im Link oben) bereits im WSC vorhanden ist. Allerdings müsste ich da erst nachschauen.

  • Hab gerade ein Problem gefunden. Wenn ich Zoome, verschieben sich die Area-Koordinaten. Auf anderen Webseiten ist mir das bisher nie passiert. Kann man dagegen etwas machen?

  • Mal noch ne Nachfrage. Mit dem title funktioniert das nun super. Jetzt will ich gern mit einem Hover das Hintergrundbild ändern. Hat da wer ne Idee?


    Habs bisher so versucht, aber funktioniert nicht:


    Code
    <area alt="Test" shape="poly" coords="247,91,428,91,456,155,427,218,245,219,218,155" href="" 
    onmouseover="document.getElementById('theImage').src = '290-656.jpg';" 
    onmouseout="document.getElementById('theImage').src = '290.jpg';">

    Funktioniert doch, wenn ich den kompletten Pfad im src ausschreibe. :)

    Edited 2 times, last by Seferd ().

  • Jetzt hab ich aber doch noch mal ne Frage. Ich würde gern den Hover Effekt nutzen und wenn dieser an einer bestimmten Position ist, würde ich gern ein zweites Bild laden, welches über dem ersten Bild ist und an der Maus Position ausgerichtet ist. Also sprich eine Art Pop-Up Grafik bräuchte ich. Kann mir da jemand weiter helfen?

    Edited once, last by Seferd ().

  • Hallo,


    auch wenn ich deine anderen Fragen nicht beantworten kann, habe ich heut' noch einmal bei mir gesucht & habe es gefunden:

    Allerdings habe ich, irgendwo gesehen (vielleicht habe ich mich auch getäuscht), dass so etwas (ähnliches, vielleicht nicht unter dem selben Bezeichner wie im Link oben) bereits im WSC vorhanden ist. Allerdings müsste ich da erst nachschauen.

    Eine mögliche Alternative zu dem Attribut "title" wäre im WSC data-tooltip.


    Viele Grüße,

    Felix

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!