Imagemap und css
Dirk
- css
Hallo, zusammen,
ich hab ein Problem mit dem < area > Tag und einer style Deklarierung für diese Map.
Ich habe mir eine Imagemap erzeugt, die aus mehreren area tags besteht und über eine Grafik gelegt werden.
Ein bestimmtes dieser area tags möchte ich per CSS hervorheben, beispielsweise durch eine border.
Das Problem:
weder inline - Styledeklarationen (style="border:#ff0000 solid 2px;")noch eine Definition als class (.test { border: #ff0000 solid 2px;} und einbinden via < area class="test"... ) führen zum Erfolg.
Laut SelfHTML werden aber die Universalattribute Style oder class für den AREA Tag unterstützt. Scheinbar doch nicht, denn nix ändert sich.
Kann mir jemand helfen? Danke .. Dirk
Hallo Dirk,
Das Problem:
weder inline - Styledeklarationen (style="border:#ff0000 solid 2px;")noch eine Definition als class (.test { border: #ff0000 solid 2px;} und einbinden via < area class="test"... ) führen zum Erfolg.
Laut SelfHTML werden aber die Universalattribute Style oder class für den AREA Tag unterstützt. Scheinbar doch nicht, denn nix ändert sich.
Da mir hier:
https://forum.selfhtml.org/?t=103299&m=635809
bisher niemand widersprochen hat, denke ich, dass ich Recht habe.
Du kannst in dem Thread sehen, mit welchen Anstrengungen über JS, man wenigstens unterschiedliche Cursor-Stile für die Areas bewirken kann, ob dir das aber mit den border-Eigenschaften gelingt? Ich bin da eher skeptisch.
Gruß Gernot
Ja .. das hat ich mir schon gedacht.
Bisher habe ich mir eine DIV Lösung implementiert, die allerdings unter Mozilla Browsern nicht funktioniert. Das DIV wird in Mozilla Browsern immer unpositioniert im linken oberen Eck angezeigt. Scheinbar ein Problem von positioning:
hier mal ein Beispiel:
<MAP NAME="12345">
<AREA SHAPE=RECT COORDS="305,404,327,424" HREF="javascript:Call_irgendwas();" TARGET="_self" ALT="abc">
<!-- hier das tag mit border -->
<div style="POSITION: absolute; LEFT: 425 px; TOP: 388 px; WIDTH: 30 px; border-color: #FF0000; border-style: solid; border-width: medium;padding: 1px; CLIP: rect(0px 32px 32px 0px);"><A HREF="javascript:Call_irgendwas();" TARGET="_self" ALT="abcd" ><img src="../images/Layout/blank-40-35.gif" width=22 height=22 border=0 alt=""></a></div>
</MAP>
....
<table align="left" border="0" cellpadding="8" cellspacing="0" width="100%">
<tr>
<td><div align="left" style="width:100%; filter: Shadow(color=#336699, direction=135);"><IMG SRC="1234.JPG" USEMAP="#12345" WIDTH=833 HEIGHT=551 BORDER=0><br> </div>
</td></tr></table>
....
Fehlt mir da irgendwas .. z-index oder weiss jemand Rat. Vielleicht darf ich das DIV dann nicht in die MAP packen, sondern gesondert in die Spalte zum Image einfügen (nur für Mozillas??!)
Gruß, Dirk
Hi,
Das DIV wird in Mozilla Browsern immer unpositioniert im linken oberen Eck angezeigt. Scheinbar ein Problem von positioning:
Nö, ein Problem mit Deinen kaputten Werten:
LEFT: 425 px; TOP: 388 px; WIDTH: 30 px;
Zwischen Zahl und Einheit darf nichts stehn.
cu,
Andreas
Perfekt .. Dank Dir ... ist ein Problem meines dahinter liegenden php-Scriptes .. ist mir auch gerade aufgefallen .. funzt dann doch.
*FREUDE* ..
vielleicht nehm ich noch den Clip raus .. ist für ältere Versionen von Browsern notwendig gewesen.
Schnell und schmerzlos .. wie immer in diesem Forum.. :))
DANKE .. Gruß, Dirk
Hi,
Das DIV wird in Mozilla Browsern immer unpositioniert im linken oberen Eck angezeigt. Scheinbar ein Problem von positioning:
Nö, ein Problem mit Deinen kaputten Werten:
LEFT: 425 px; TOP: 388 px; WIDTH: 30 px;
Zwischen Zahl und Einheit darf nichts stehn.
cu,
Andreas