✔ Bildausschnitt hervorheben

[droni]

Hallo,

ich habe ein Bild wo Rechtecke zu sehen sind.

Unter dem Bild steht ein text, wo die einzelnen Bereiche beschrieben weden.
Gibt es irgendwie die Möglichkeit das wenn ich in der Beschreibung mit der Maus über den Text fahre das betreffende Rechteck im Bild irgendwie hervorgehoben oder umrahmt oder sonst irgendwie gezeigt wird?

Über einen Lösungsansatz währe ich sehr dankbar!

greetz
droni

 

[timestamp]

Weiße jedem HTML-Element eine Klasse zu. Mit Css kannst du dein Vorhaben dann umsetzen:

<div class="hint">Text 1</div>
<div class="hint">Text 2</div>
<div class="hint">Text 3</div>

.hint{
  border: 1px #000 solid;
  background-color: #f00;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
}

Kannst dir ja was passendes aussuchen

 

[droni]

hmm...
ich möchte ja irgendwie im Bild Bereiche hervorheben.

Dachte irgendwie daran, dass man sacht wenn du über den teiltext fährst, nimm bild1.jpg zeichne ein transparentes Rechteck mit den maßen x mal x und positioniere es über dem bild bei den koordinaten x/y

 

[timestamp]

Achso.
Es gibt bestimmt auch eine Css Lösung dafür. Hier mal mit Javascript:

function highlight(id, highlight){
  if( highlight )
    document.getElementById(id).style.border = '1px solid #000';
  else
    document.getElementById(id).style.border = '0px solid #000';
}

<img id="bild1" src="./bild1.jpg" />
<div onmouseover="highlight('bild1', true);" onmouseout="hightlight('bild1', false);">Bild 1</div>

 

[droni]

Hallo,

vielen Dank für deine Hilfe... in dieser Richtung bin ich auch schon am basteln. Problem ist wie einen Bereich hervorgehoben bekomme.
Als Beispiel: Stell dir die Deutschlandkarte vor, wo nur die Bundesländer eingezeichnet sind.
Unter der Karte stehen die Namen der Bundesländer. Wenn ich dann mit der Maus über NRW fahre, soll auf dem Bild NRW hervorgehoben werden.
Ist nur ein Beispiel. Ich habe hier zum Glück nur Rechtecke die nebeneinander stehen, und keine zackeligen Felder.

Schaue mich auch gerade bei dem CSS kram rum.

 

[timestamp]

Dann ersetzt du das Bild oben in meinem Beispiel einfach durch ein Bild mit den Grenzen und passt die Funktion so an:

function highlight(id, highlight){
  if( highlight )
    document.getElementById(id).style.display = 'block';
  else
    document.getElementById(id).style.display = 'none';
}

 

[droni]

So, ich habe jetzt einen Weg genommen der vielleicht nicht die feine englische ist, aber er funktioniert.

Vorweg falls jemand das gleiche Problem haben sollte und dein Code kopiert... du hast einen Tippfehler: onmouseout="hightlight <-- da ist ein "t" zuviel...

Ich habe nun mein Bild in einzelteile gespeichert und in einer Tabelle wieder zusammen gesetzt. Die Bilder liegen als Hintergrundgrafik in den Zellen. Dann habe ich eine transparente Grafik erstellt und diese als Bild über meine Hintergrundgrafik gelegt und mit style="display: none;" versteckt und eine ID verpasst.
Ab dann kommt dein Script mit dem display:block/none zu tragen, welches die transparente Grafik entsprechend einblendet bzw. wieder versteckt.

Es gibt bestimmt eine elegantere Lösung, aber ich bin froh es nun geschafft zu haben.
Vielen Dank für die Hilfe!