Strassenkarte mit klickbaren Strassen

StormChaser

Mitglied
wird doch angezeigt. Mit der Maus etwas unterhalb des oberen Randes, da verfärbt es sich, und bei Klick gibt es die hallo-Meldung.
 

isaack

Mitglied
ich sehe da leider nichts.
auch wenn ich mit der maus drüber gehen, kommt da leider gar nichts.
 

Anhänge

  • str.png
    str.png
    84,6 KB · Aufrufe: 3

StormChaser

Mitglied
Stimmt. Mit dem Stadtplan geht es nicht, weil der auf dem Bereich liegt.
Nimm mal einen "falschen" BildNamen, so dass das Bild nicht geladen wird, dann siehst du, dass es ansonsten funktioniert.
 

StormChaser

Mitglied
Das ist jetzt merkwürdig. Und der Stadtplan wird bei dir nicht geladen? STRG+F5 probiert?
Bei mir klappt das mit den Links zu wiki, dem Hallo und "Strassen dieser Stadt".

edit: "Links" ist übertrieben, es gibt nur Jefferson.
 

isaack

Mitglied
ja schon probiert.
der stadtplan wird gerade nicht geladen, da ich einen falschen link eingetragen habe um zu testen ob es ohne das bild zu sehen ist. dort wird es nicht angezeigt und bei korrektem link wird der stadtplan angezeigt, die links functionieren aber es wird keinerlei text angezeigt.

kann es den da probleme geben, da ich bootstrap4 mit nutze?
 

StormChaser

Mitglied
Achso, du meinst Text beim Hovern (ohne klicken)? Den habe ich auch nicht. Sollte da welcher sein? Nur "Strassen dieser Stadt" gibt es sonst als Text; der obere Bereich und der Jefferson-Bereich wird farblich anders dargestellt, aber ohne Text.

edit: wg Bootstrap4: Muss dir jemand mit Erfahrung dazu was sagen.
 

isaack

Mitglied
ja, das wird ja alles angezeigt :D
es ging mir darum das auf den weisen linien dauerhaft immer ein straßenname zu sehen ist :)
ich wollte diesen jetzt nicht in das bild rein schreiben. dachte halt das man es so mit einbauen kann. also so das die straßennamen auch mit zu sehen sind.
hoffe ich kann mich klar ausdrücken und du verstehst mich :)
 

isaack

Mitglied
HTML:
<figure id="imagemap"> 
    <svg viewBox="0 0 1000 1000" > 
      <defs> 
        <style> 
          rect:hover { 
            fill: white; 
            opacity:0.5; 
          } 
        </style> 
      </defs>  
      
      <image width="1000" height="1000" xlink:href="image/str.pn"> 
        <title>Straßen dieser Stadt</title> 
      </image>     
       
      <a xlink:href="#" onclick="alert('hallo');"> 
        <rect x="0" y="12" opacity="0" width="996" height="22"> 
            <text x="0" y="50" font-family="Verdana" font-size="35" fill="red">Hello</text> 
        </rect> 
      </a> 
      <a xlink:href="https://de.wikipedia.org/wiki/Thomas_Jefferson"> 
        <rect x="550" y="225" opacity="0" width="200" height="300" />da ist ein kopf 
      </a> 
      <a xlink:href="https://de.wikipedia.org/wiki/Theodore_Roosevelt"> 
        <rect x="750" y="375" opacity="0" width="200" height="300" /> 
      </a> 
      <a xlink:href="https://de.wikipedia.org/wiki/Abraham_Lincoln"> 
        <rect x="999" y="375" opacity="0" width="200" height="300" /> 
      </a> 
    </svg> 
</figure>