mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 12:18 Benutzername: Passwort: Auto-Login

Thema: Rollover-Grafik per <area ...> klappt nicht mit Firefox =( vom 24.06.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Rollover-Grafik per <area ...> klappt nicht mit Firefox =(
Autor Nachricht
Maria Sch.
Threadersteller

Dabei seit: 24.06.2014
Ort: München
Alter: 30
Geschlecht: Weiblich
Verfasst Di 24.06.2014 11:44
Titel

Rollover-Grafik per <area ...> klappt nicht mit Firefo

Antworten mit Zitat Zum Seitenanfang

Hallöchen zusammen! Lächel

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
  View user's profile Private Nachricht senden
remote

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht: Männlich
Verfasst Di 24.06.2014 13:11
Titel

Antworten mit Zitat Zum Seitenanfang

verlink doch mal die seite oder erstelle eine demo an der man das problem nachvollziehen kann, z.b. mit jsfiddle oder codepen
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Maria Sch.
Threadersteller

Dabei seit: 24.06.2014
Ort: München
Alter: 30
Geschlecht: Weiblich
Verfasst Di 24.06.2014 13:56
Titel

Antworten mit Zitat Zum Seitenanfang

Ich habe mal eine kleine Testversion hier online gestellt:

http://mariaschaepers.bugs3.com/

Lächel

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! *zwinker*


Zuletzt bearbeitet von Maria Sch. am Di 24.06.2014 13:58, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
remote

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht: Männlich
Verfasst Di 24.06.2014 14:04
Titel

Antworten mit Zitat Zum Seitenanfang

http://validator.w3.org/check?uri=http%3A%2F%2Fmariaschaepers.bugs3.com%2F&charset=%28detect+automatically%29&doctype=Inline&outline=1&group=1&st=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

fehlerhaftes markup.
wenn du willst, dass dein html in unterschiedlichen browsern funktioniert, solltest du _mindestens_ dafür sorgen, dass das markup valide ist.
  View user's profile Private Nachricht senden
Maria Sch.
Threadersteller

Dabei seit: 24.06.2014
Ort: München
Alter: 30
Geschlecht: Weiblich
Verfasst Di 24.06.2014 15:22
Titel

Antworten mit Zitat Zum Seitenanfang

Jaaaa... Ooops

...so recht weiß ich damit jetzt auch nichts anzufangen! * Ich bin ja schon still... * 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
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Di 24.06.2014 16:14
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
remote

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht: Männlich
Verfasst Di 24.06.2014 16:33
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.