Autor |
Nachricht |
Maria Sch.
Threadersteller
Dabei seit: 24.06.2014
Ort: München
Alter: 30
Geschlecht:
|
Verfasst Di 24.06.2014 11:44
Titel Rollover-Grafik per <area ...> klappt nicht mit Firefo |
|
|
Hallöchen zusammen!
Ich sitze schon seit gestern etwas ratlos an einer kleinen Website... die mit Chrome wunderbar funktioniert - aber leider so gar nicht mit dem Firefox! Und so universell sollte das ja schon klappen!
Ich möchte mit dem Curser über bestimmte bereiche meiner Hauptgrafik (business.png) gleiten und dann an vordefinierter Stelle kleinere Grafiken (1-3.png) darüber geblendet bekommen! Ich wäre mehr als zufrieden, wenn alle Browser meine Zeilen genau so akzeptieren würden, wie Chrome... doch warum klappt das nur nicht???
<img src="business.png" alt="Karte" usemap="#Landkarte" border="1" style="border-color:#FFFFFF" height="306" width="800">
<map name="Landkarte">
<a class="info1" href="index4.htm"> <area shape="rect" coords="278,152,289,164"> <span><img src="1.png" width="265" height="116" border="0" style="border-color:#FFFFFF"></span></a>
<a class="info2" href="index4.htm"> <area shape="rect" coords="292,175,303,187"> <span><img src="2.png" width="265" height="93" border="0" style="border-color:#FFFFFF"></span></a>
<a class="info3" href="index4.htm"> <area shape="rect" coords="289,198,300,210"> <span><img src="3.png" width="265" height="75" border="0" style="border-color:#FFFFFF"></span></a>
</map>
Zuletzt bearbeitet von Maria Sch. am Di 24.06.2014 11:45, insgesamt 1-mal bearbeitet
|
|
|
|
|
remote
Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht:
|
Verfasst Di 24.06.2014 13:11
Titel
|
|
|
verlink doch mal die seite oder erstelle eine demo an der man das problem nachvollziehen kann, z.b. mit jsfiddle oder codepen
|
|
|
|
|
Anzeige
|
|
|
Maria Sch.
Threadersteller
Dabei seit: 24.06.2014
Ort: München
Alter: 30
Geschlecht:
|
Verfasst Di 24.06.2014 13:56
Titel
|
|
|
Ich habe mal eine kleine Testversion hier online gestellt:
http://mariaschaepers.bugs3.com/
Ist der Cursor auf den Pfeilen, soll halt später ein simples grafisches Menü aufklappen! Bei Chrome funktioniert es ja auch bereits... wenn es denn nur keine anderen Browser gäbe!
Zuletzt bearbeitet von Maria Sch. am Di 24.06.2014 13:58, insgesamt 1-mal bearbeitet
|
|
|
|
|
remote
Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht:
|
|
|
|
|
Maria Sch.
Threadersteller
Dabei seit: 24.06.2014
Ort: München
Alter: 30
Geschlecht:
|
Verfasst Di 24.06.2014 15:22
Titel
|
|
|
Jaaaa...
...so recht weiß ich damit jetzt auch nichts anzufangen! Die angezeigten "Fehler" ergeben nicht wirklich immer Sinn... zumal mir der Markup Validation Service ja quasi jede Standart-Seite wie Google, Yahoo & Co. als fehlerüberflutet ausgibt!
Bei mir scheitert's wohl definitiv an einer vernüftigen Konstruktion dieser Zeile(n)...
<a class="info1" href="index4.htm"> <area shape="rect" coords="278,152,289,164"> <span><img src="1.png" width="265" height="116" border="0" style="border-color:#FFFFFF"></span></a>
Zuletzt bearbeitet von Maria Sch. am Di 24.06.2014 15:23, insgesamt 1-mal bearbeitet
|
|
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Di 24.06.2014 16:14
Titel
|
|
|
Ich fürchte ohne JavaScript wirst du keine Browser- und Versionsübergreifende Lösung erreichen.
Da du aber scheinbar keine komplizierten Formen zeichnest, solltest du darüber nachdenken einfache Hyperlinks absolut über dem Bild zu positionieren. Rechteckig ist ein Link im block-level sowieso und bietet zudem die wichtige Möglichkeit des Bildwechsels durch verschiedene Zustände.
|
|
|
|
|
remote
Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht:
|
Verfasst Di 24.06.2014 16:33
Titel
|
|
|
SimonDerDude hat geschrieben: |
Da du aber scheinbar keine komplizierten Formen zeichnest, solltest du darüber nachdenken einfache Hyperlinks absolut über dem Bild zu positionieren. |
würde ich auch empfehlen.
der grund, dass FF deine lösung ablehnt, liegt übrigens an den <a> tags die jeweils um deine <area> liegen.
aus der spezifikation geht für mich nicht klar heraus ob das zulässig ist oder nicht. ist jedenfalls unorthodox - das area element kann ja bereits als link fungieren.
|
|
|
|
|
|
|
|
Ähnliche Themen |
GoLive CS2 rollover effekt klappt nicht
CSS - DIV height 100% - klappt nicht beim Firefox
rollover funktioniert nicht im safari und firefox
grafik-rollover mit css
GoLive Rollover animiertes Gif // Safari/Explorer/Firefox
CSS grafik-rollover ausrichtung
|
|