✔ Strassenkarte mit klickbaren Strassen

[StormChaser]

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]

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

 

[StormChaser]

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.

 

[isaack]

selbst dann sehe ich den text nicht

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

 

[StormChaser]

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]

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]

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]

ja, das wird ja alles angezeigt
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

 

[StormChaser]

dann muss ich nochmal in Code sehen.
Ich dachte, das sollte so sein

 

[isaack]

<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>