Verweis-Sensitive Grafiken ("map area shape") - Mouse-Over-Effekt unmöglich?

[TryPod]

Hallo,

seht euch mal bitte folgende Seite an:

www.selfhtml.de - Beispiel (http://selfhtml.teamone.de/html/grafiken/verweis_sensitive.htm#definieren)

Dort wird die Funktionsweise von sog. verweis-sensitiven Grafiken (ihr könnt euch vermutlich eher unter den Begriffen "map" und "area shape" etwas vorstellen) erklärt. Soweit noch nicht spektakulär.

Meine Frage ist folgende: Ist es möglich - ggf. unter Zuhilfenahme von CSS - es so hinzubekommen, dass bei MouseOver die sensitiven Flächen (also dort, wo sich auf dem Beispiel-Bild die Links zu den Städten befinden) ihre Farbe verändern?

Anders ausgedrückt: Ihr kennt natürlich folgendes:

<style type="text/css">
<!--

A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}

-->
</style>

Verlinkter Text wird bei MouseOver unterstrichen. Ist nichts Neues.

Geht sowas in der Art wie oben beschrieben auch bei diesen verweis-sensitiven Grafiken?

[Sphinx]

Meiner Meinung nach mit JAVA Script möglich direkte Bildmanipulationen... oder was leider sehr gern auch für solche Sachen benutzt wird... Flash

Mit CSS wirst du da kein Erfolg haben.

Bzw. improvisieren : Bei Klick/Mouseover auf "Stadt" neues Bild laden wo die Grafikausgetauscht wird durch ein Bild wo die Stadt unterstrichen erscheint - Aber bei einer größeren Map halt zu lange ladezeiten...

[imagine]

Das ist mit CSS möglich, allerdings kannst du wie bereits genannt Bilder nicht mehr manipulieren wenn sie bereits beim Besucher auf dem Rechner sind. Deshalb lässt du das Bild einfach wie es ist und tauschst es gegen ein zweites aus.
Beispiel (http://www.alistapart.com/d/imagemap/example2.html)
Artikel dazu (http://www.alistapart.com/articles/imagemap/)


Die Ladezeiten nerven natürlich. Um sich die zu ersparen werden beide Versionen des Bilds in ein großes Bild gepackt und dieses einfach an die richtige Position verschoben, so dass immer nur der Ausschnitt sichtbar wird den man gerade benötigt.

Beispiel mit insgesamt nur einem Bild (http://www.alistapart.com/d/sprites/ala-image3.html)
Noch eins (http://www.alistapart.com/d/sprites/ala-blobs2.html)
Artikel dazu (http://www.alistapart.com/articles/sprites/)

[TryPod]

Hallo,

vielen Dank für eure Antworten. :)

Besonders das Beispiel mit diese farbigen Flecken ist für mich hilfreich. Da fuchse ich mich mal rein. Genau sowas habe ich gesucht.

Bisher habe ich mit starren Tables gearbeitet. Die Beispiele mit CSS zeigen ziemlich gut, dass es möglich ist, verlinkte Bereiche teilweise überlappen zu lassen. Sowas habe ich gesucht.

Danke nochmal.

:)

[TryPod]

Hallo,

zu dem Beispiel mit den farbigen Flecken hier (http://www.alistapart.com/d/sprites/ala-blobs2.html) habe ich eine Frage.

Mir ist das Prinzip klar: Es wird eine große Hintergrundgrafik mit allen möglichen "Zuständen" geladen, aber es wird nur der obere Teil angezeigt. Dann werden mit Hilfe von CSS bestimmte Bereiche markiert und ein Teil davon verlinkt.

Nun zu meiner Frage:

Im Quelltext des "Flecken"-Beispiels oben kann man folgendes sehen:

#blob1 {left: 9px; top: 7px; width: 86px; height: 130px;}
#blob2 {left: 77px; top: 16px; width: 79px; height: 86px;}
#blob3 {left: 160px; top: 0px; width: 112px; height: 77px;}
#blob4 {left: 173px; top: 57px; width: 120px; height: 80px;}
#blob5 {left: 110px; top: 102px; width: 98px; height: 45px;}

Damit werden die auszutauschenden Bereiche markiert. Wenn man mit der Maus über diese Bereiche fährt, dann sollen dort die Grafiken ausgetauscht werden. Soweit, so gut.

Aber es fällt auf, dass es sich bei diesen Bereichen um viereckige Bereiche handelt.

Wie macht man es, wenn man beispielweise ein Dreieck oder einen Kreis oder eine Kugel hat, deren äußerer Rand als "mouseOver-Grenze" gelten soll? Dann ist es ja kein simples Viereck mehr, sondern halt ein Dreieck bzw. ein Kreis. Ich müsste ja sehr viel mehr Koordinaten eingeben als nur die obigen vier (nämlich left, top, width und height). Wie geht das dann?

Und noch eine Frage:

Im Quelltext des obigen Beispiels steht das hier:

#blob1 a:hover {background: url(blobs.gif) -10px -307px no-repeat;}

Es wird hier für den ersten "Blob" die Austausch-Grafik angegeben. Weshalb sind nur zwei Koordinaten nötig?

[imagine]

Original geschrieben von TryPod
Aber es fällt auf, dass es sich bei diesen Bereichen um viereckige Bereiche handelt.

Wie macht man es, wenn man beispielweise ein Dreieck oder einen Kreis oder eine Kugel hat, deren äußerer Rand als "mouseOver-Grenze" gelten soll? Dann ist es ja kein simples Viereck mehr, sondern halt ein Dreieck bzw. ein Kreis. Ich müsste ja sehr viel mehr Koordinaten eingeben als nur die obigen vier (nämlich left, top, width und height). Wie geht das dann?
Ein Element kann jede beliebige Form annehmen, solange es rechteckig ist. :)
Es lässt sich zwar optisch die Illusion eines runden oder n-eckigen Elements erreichen, indem man entsprechende Bilder oder dreieckige DIVs an den Rand floaten lässt, die Fäche zum Klicken bleibt aber rechteckig. Jedenfalls fällt mir im Moment nix ein wie man das ändern könnte. Da ich mich aber nicht wirklich mit Imagemaps befasst habe muss das nicht unbedingt was heißen.
Siehe zB Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) (mit DIVs) oder Sliding Doors (http://www.alistapart.com/articles/slidingdoors/) (mit Bildern). Wenn du das stark vergrößerst wirst du sehen, dass die Ecken immer noch klickbar sind.
Original geschrieben von TryPod
Im Quelltext des obigen Beispiels steht das hier:

#blob1 a:hover {background: url(blobs.gif) -10px -307px no-repeat;}

Es wird hier für den ersten "Blob" die Austausch-Grafik angegeben. Weshalb sind nur zwei Koordinaten nötig?
Die erste Zahl beschreibt wieweit der Hintergrund nach rechts geschoben wird, die zweite wie weit nach unten.
In diesem Beispiel also -10 Pixel nach rechts (effektiv 10 Pixel nach links) und -307 Pixel nach unten.
Mehr als zwei Koordinaten brauchst du nicht, da das ganze ja nur zweidimensional ist. Damit lässt sich jeder Punkt auf dem Bild eindeutig markieren.

[TryPod]

Hallo imagine,

danke für deine Antwort.

Auf die Idee mit dem Kreis oder mit dem Dreieck bin ich gekommen, weil ich auf der SelfHTML-Seite, die ich in meinem Eingangsposting hier erwähne, folgendes gelesen habe:

"Mit shape="rect" bestimmen Sie eine viereckige Fläche, mit shape="circle" einen Kreis, und mit shape="polygon" können Sie ein beliebiges Vieleck als verweis-sensitiv definieren."

Nun ist diese Sache mit den Verweis-Sensitiven Grafiken natürlich was anderes als die CSS-Geschichte mit den bunten Flecken.

Hmm, ich probiere mal ein bisschen rum, vielleicht bekomme ich ja was hin.

:)