nicht angemeldet
Hover Effekt - verschiedene Bereiche in einem Bild
Hallo erstmal,
Ich habe folgende Frage:
Ich möchte gerne verschiedene Hover-Effekte haben wenn ich über bestimmte Bereiche in einem Bild fahre. Ich möchte dies gerne für einen Hallenplan einer Messe nutzen. Die Besucher der Homepage sollen im Hallenpan mit der Maus auf einen Stand fahren und dort dann in einem neuen Fenster Logo, Homepage und Kurzbeschreibung des Aussteller sehen. Beispiele sagen wohl mehr:
http://www.fineartzurich.ch/index.php?id=42&doc=standplan
so solls ungefähr aussehen.
Wie kann ich so etwas umsetzen? Ich bin Neuling, also vielleicht nicht gleich die ganz harten Geschütze.
Gibt es irgendwo Vorlagen für so etwas?
Ich hab dies hier gefunden.
http://host.sonspring.com/hoverbox/
das finde ich auch sehr schön, ich weiß nur nicht ob es möglich ist das so umzuschrieben das es für mich funktioniert, also ein Bild und dann Koordinaten.
Vielen Dank schonmal
Christoph
-
Hallo,
schau Dir mal die image map an.
Bei der Hoverbox gibt es wohl ein Tutorial zum downloaden?
Die Grundlagen solltest Du für eine Umsetzung jedoch schon kennen.
Gruß, Ich
-
Hallo,
schau Dir mal die image map an.
Bei der Hoverbox gibt es wohl ein Tutorial zum downloaden?
Die Grundlagen solltest Du für eine Umsetzung jedoch schon kennen.
Gruß, Ich
Hallo,
leider finde ich das Tutorial nicht. Da ist nur die eine Seite. Ich würd halt nur gern wissen obs mit Hoverbox überhaupt geht. Oder was man sonst nehmen kann.
Vielleicht weiß das ja jemand oder hat ähnliches schonmal gemacht.Danke schonmal für die Antwort.
Gruß-
Hallo,
Oder was man sonst nehmen kann.
Vielleicht weiß das ja jemand oder hat ähnliches schonmal gemacht.folgendes mal ganz allgemein zu deinem Vorhaben:
Eine 1:1 Entsprechung der HTML Image-Map in CSS gibt es nicht. Das bedeutet, du brauchst für jeden einzelnen "Hover-Punkt" auch ein eigenes HTML-Element. Diese sind von ihrer (visuellen) Form her immer viereckig. Hinzukommt, dass die IEs <= 6 :hover nur für Links (<a>) unterstützen.Machbar ist es aber (mit mehr oder weniger viel Aufwand).
Hier nur mal ein Beispiel, wie man so etwas realisieren kann.Google kann dir ggf. auch noch weiterhelfen.
Ich selbst habe so etwas bisher noch nicht benötigt, deshalb kann ich nicht aus eigener Erfahrung urteilen, aber:
Meiner Meinung nach lässt sich das Ganze wesentlich einfacher (mit viel weniger Aufwand) per Javascript lösen, oder auch mit einer Kombinationslösung aus JS + CSS. Natürlich mit dem Nachteil verbunden, dass es eben bei deaktiviertem JS nicht mehr "funktioniert".
Welche Variante man also wählt, sollte man im Einzelfall sorgfältig abwägen (Aufwand <-> Nutzen).Gruß Gunther
-
Hallo,
Oder was man sonst nehmen kann.
Vielleicht weiß das ja jemand oder hat ähnliches schonmal gemacht.folgendes mal ganz allgemein zu deinem Vorhaben:
Eine 1:1 Entsprechung der HTML Image-Map in CSS gibt es nicht. Das bedeutet, du brauchst für jeden einzelnen "Hover-Punkt" auch ein eigenes HTML-Element. Diese sind von ihrer (visuellen) Form her immer viereckig. Hinzukommt, dass die IEs <= 6 :hover nur für Links (<a>) unterstützen.Machbar ist es aber (mit mehr oder weniger viel Aufwand).
Hier nur mal ein Beispiel, wie man so etwas realisieren kann.Google kann dir ggf. auch noch weiterhelfen.
Ich selbst habe so etwas bisher noch nicht benötigt, deshalb kann ich nicht aus eigener Erfahrung urteilen, aber:
Meiner Meinung nach lässt sich das Ganze wesentlich einfacher (mit viel weniger Aufwand) per Javascript lösen, oder auch mit einer Kombinationslösung aus JS + CSS. Natürlich mit dem Nachteil verbunden, dass es eben bei deaktiviertem JS nicht mehr "funktioniert".
Welche Variante man also wählt, sollte man im Einzelfall sorgfältig abwägen (Aufwand <-> Nutzen).Gruß Gunther
Hallo, ich habe nun hier http://www.cssplay.co.uk/menu/solar_map
genau das gefundes was ich gesucht habe. Ich habe das ganze auch schon ein wenig angepasst. Mein Problem ist allerdings das ich die Position der Hover Boxen (keine Ahnung wie die wirklich heissen) nicht verändern kann. Also nicht die Position der aktiven elemente über die ich mit der Maus fahren muss, sondern die dann aufspringenden Elemente.
Ich benutze Coda und Dreamweaver am Mac. Dreamweaver habe ich nur noch 20 Tage ;-), ich wäre also um eine schnelle Antwort dankbar.
Vielen Dank.
Christoph-
Hi,
Hallo, ich habe nun hier http://www.cssplay.co.uk/menu/solar_map
genau das gefundes was ich gesucht habe. Ich habe das ganze auch schon ein wenig angepasst. Mein Problem ist allerdings das ich die Position der Hover Boxen (keine Ahnung wie die wirklich heissen) nicht verändern kann. Also nicht die Position der aktiven elemente über die ich mit der Maus fahren muss, sondern die dann aufspringenden Elemente.
Die sind doch einfach nur absolute positioniert, soweit ich das jetzt auf den ersten Blick sehe ...
Allerdings wird auch da wieder der ganz fiese Hack verwendet, fuer aeltere IEs Tabellen *im* Link unterzubringen - was kein gueltiges HTML darstellt.
Ich benutze Coda und Dreamweaver am Mac. Dreamweaver habe ich nur noch 20 Tage ;-)
Prima, das stimmt hoffnungsvoll fuer die Zukunft - dann kannst du ja danach anfangen, mit HTML und CSS wirklich umzugehen zu lernen :-)
MfG ChrisB
-
Hi,
Hallo, ich habe nun hier http://www.cssplay.co.uk/menu/solar_map
genau das gefundes was ich gesucht habe. Ich habe das ganze auch schon ein wenig angepasst. Mein Problem ist allerdings das ich die Position der Hover Boxen (keine Ahnung wie die wirklich heissen) nicht verändern kann. Also nicht die Position der aktiven elemente über die ich mit der Maus fahren muss, sondern die dann aufspringenden Elemente.
Die sind doch einfach nur absolute positioniert, soweit ich das jetzt auf den ersten Blick sehe ...
Allerdings wird auch da wieder der ganz fiese Hack verwendet, fuer aeltere IEs Tabellen *im* Link unterzubringen - was kein gueltiges HTML darstellt.
Ich benutze Coda und Dreamweaver am Mac. Dreamweaver habe ich nur noch 20 Tage ;-)
Prima, das stimmt hoffnungsvoll fuer die Zukunft - dann kannst du ja danach anfangen, mit HTML und CSS wirklich umzugehen zu lernen :-)
MfG ChrisB
Hallo ChrisB,
Ich habe gestern Nacht auch noch rausgefunden das die Hover-Boxen absolut positioniert sind, da war ich wohl etws voreilig. ich würd gerne wissen ob ich die mit dreamweaver irgendwie visuell verschieben kann. Es werden wahrscheinlich so an die 35 hover effekte im Bild, da wird es vermutlich sehr mühsam das über das Eingeben von Werten zu machen.
Daher wollt ich wissen ob ich die in Dreamweaver im Entwurfsmodus verschieben kann.Ja ich arbeite mich langsam vor, learning by doing. Aber Dreamweaver ist mir da nn doch etwas zu teuer und auch überdimensioniert für den Anfang.
Gruß
ChristophGruß
Christoph
-
-
-
-
-