Interaktives Bild.

JumpinJack · Beitrag von **JumpinJack** » 08.09.2004 19:34

Hallo Leute.

Also ich brauche mal wieder eure Hilfe. Ich habe ein Bild wo mehrere Felder unterschiedlichter Form farblich makiert werden soll. Die Makierung soll durch ein kleines ACP entweder weiss oder gelb sein. Meine frage ist nun: Wie kann ich das am besten machen?
Was auch noch Pflicht ist: Bei der farblichen Makierung soll über der Makierung auch ein Link liegen. Also ein klick auf die gelbe Fläche und schwups öffnet sich eine andere Seite.

Ich hoffe ihr versteht mein Prob. Mit normalen Zellen bekomme ich das hin, aber in einer Garfik mit runden oder vieleckigen Formen bin ich ein wenig ratlos. Ich hatte schon an Flash gedacht, aber das kann ich ja schlecht mit php über ein ACP ändern.

Vielleicht wießt ihr ja eine Lösung.

Beitrag von **Pyramide** » 08.09.2004 20:56

Du könntest z.B. Imagemaps mit Javascript und/oder css verbinden. Habs selber noch nicht getestet aber sollte eigentlich irgendwie machbar sein

Elo · Beitrag von **Elo** » 08.09.2004 21:49

Imagemap wäre auch mein Tipp. Gibt ein kleines Freewaretool was dir die Arbeit bei der Erstellung etwas vereinfacht.
ftp://ftp.fu-berlin.de/pc/win95/network ... ths131.exe

JumpinJack · Beitrag von **JumpinJack** » 09.09.2004 09:13

Klasse Tool. Danke für die Infos und Hilfe.

JumpinJack · Beitrag von **JumpinJack** » 09.09.2004 12:07

Ihr habt nicht zufällig dafür ne Doku?! Oder anders, Habt ihr eine Beispieldatei damit ich weiß wie ich das einbinde. Mit dem Porgramm klappt das belegen der Felder einwandfrei, nur im Browser wird nix angezeigt.

Ne kleine BeispielDatei wäre da klasse um zu sehen wo mein Fehler war.

Elo · Beitrag von **Elo** » 09.09.2004 13:03

Mr.Google weiss mehr.
http://www.google.com/groups?q=imagemap ... lr=lang_de

Bsp. per CSS:
http://www.alistapart.com/d/imagemap/example2.html

Beitrag von **Pyramide** » 09.09.2004 15:08

http://de.selfhtml.org/html/grafiken/ve ... sitive.htm

JumpinJack · Beitrag von **JumpinJack** » 15.09.2004 09:59

OK...sorry das ich mich nicht gemeldet habe, aber ich war halt am rätseln wie es geht. Nun habe ich es auch raus. Vielen dank für die Hilfe.

Wenn ihr mir aber nochmal helfen könntet?!?

Das mit den ImageMaps klappt. Ich würde halt das mit dem MouseOver noch hinbekommen.

Hier mal mein Code:

Code: Alles auswählen

<MAP NAME="test">

<AREA SHAPE=POLY COORDS="265,508,301,513,311,513,302,567,251,561,258,515,265,508,265,508" HREF="http://bienenkaul.de" ALT="Ach sowieso">
<AREA SHAPE=POLY COORDS="294,378,345,385,345,409,292,401,294,379,294,378,294,378" HREF="http://heise.de" ALT="laber">
<AREA SHAPE=POLY COORDS="342,568,328,572,301,568,310,515,333,514,350,512,342,568" HREF="http://schwad-dich-moed.de" ALT="Schwad">
<AREA SHAPE=POLY COORDS="291,407,345,416,350,436,359,467,350,470,326,474,299,474,283,471,291,408,291,407" HREF="http://sport.de" ALT="dasd">
<AREA SHAPE=POLY COORDS="390,500,385,553,342,567,350,511,366,508,390,501,390,500" HREF="http://heise.de">
<AREA SHAPE=POLY COORDS="424,539,383,553,391,499,432,486,426,538,424,539" HREF="http://tagesschau.de" ALT="tagesschau">
<AREA SHAPE=default HREF="test.html">
</MAP>
<p><img src="bienchen.jpg" border="0" alt="Karte" usemap="#test"></p>

Nun würde ich halt die ImageMaps gerne Standradmäßig in Farbe A einfärben und beim MouseOver in Farbe B einfärben.

Ich hab da auch schon mal einen Tipp bekommen aber da komme ich nicht weiter. Ich weiss nicht wie ich das css einbauen kann. Könnt ihr mir grad sagen wo das hinsoll und wie es funktioniert.

Der Tipp was das mit der Zeile zu machen:

Code: Alles auswählen

a#<NAME>:hover { background-image: url(<URI>); }

Aber ich steh da irgendwie, wie ein Ockse vorm Berg.

<edit> Also ich hab mal experimentiert:

Code: Alles auswählen

<area shape="poly" coords="238,399,290,407,282,470,265,468,249,458,231,456,231,455" alt="was weiss ich" onMouseover="this.style.backgroundColor='yellow'" onMouseout="this.style.backgroundColor='lightblue';"  href="http://heise.de" />

Aber das schmeist keine Farbe aus.
Hat einer einen Tipp was ich noch machen soll? Muss ich was in den <body>-Tag eintragen oder wie?
</edit>