imagemap im imagemap

**piepser** · 30.01.2011, 14:35

Hallo,
ich habe aus einer Grafik (ein einfacher Kreis) mittels imagemap Teile (wie Kuchenstücke) ausgeschnitten. Das funktioniert soweit auch super. Wenn ich dann mit der Maus drüber fahre, bekomme ich auch einen wechsel in diesem Bereich angezeigt. Zu dem Wechsel gehört allerdings auch, dass ich an der Seite, also ausserhalb des Kreises auch Text von mehreren Zeilen angezeigt bekomme. Und jetzt kommt mein Problem. Ich möchte die einzelnen Zeilen wiederum zerschneiden und beim draufklicken sollte erst der seitenaufruf (href) erfolgen.
Meine Frage also. Ist so ein verschachteltes imagemap möglich? und wenn ja, wäre es lieb wenn mir vielleicht jemand einen Denkanstoss geben könnte, wie ich es am besten angehen.
Im Voraus schon einmal vielen, lieben Dank.
lg piepser

**wildmieze** · 30.01.2011, 18:33

Hmm .. ich würde die Textzeilen als Text anzeigen lassen, und nicht als Bild. Dann gibt es auch kein Problem, einzelne Teile davon zu verlinken ..
.. oder spricht irgendwas wichtiges gegen die Anzeige in Textform?

**piepser** · 30.01.2011, 20:29

hi,
nein gegen eine Textanzeige spricht soweit nichts dagegen. nur das ich nicht weiss, wie ich den Text immer so genau hinter die Kuchenstücke positioniert bekomme. Wäre da eine Tabelle sinnvoll?
lg piepser

**wildmieze** · 31.01.2011, 01:04

Kommt wohl auf die genaue Darstellung an. Ich würde aber schätzen, daß man das per css und Positionierung lösen kann .. da kannst Du dann pixelgenau angeben, wo der Text erscheinen soll ..

**piepser** · 31.01.2011, 08:53

kann ich dann auch davon ausgehen, dass der Text immer genau hinter den Kuchenstücken kommt, oder kann es sein, dass es sich verschiebt. z.B. bei anderen Bildschirmauflösungen?

**wildmieze** · 31.01.2011, 10:17

Öhmm .. *kratzamkopp* .. eigentlich dürfte sich da nichts verschieben .. kommt aber wohl darauf an, wie man es genau macht ..

**piepser** · 31.01.2011, 15:12

also irgendwie möchten alle Ansätze welche ich habe nicht funktionieren

.
Ich habe hier mal den wichtigen Teil von meinem Code angehangen. Bei der Mausbewegung wechselt sich der eine Teil des Kreises in eine andere Farbe und gleichzeitig sollte dann der mehrzeilige Text angezeigt werden.
Kann mir evtl. jemand die Richtung zeigen. Gerne auch mit CSS. Wie wechsel ich also die Farbe und lasse gleichzeitig noch Text anzeigen? Das (href="123.html") sollte demnach erst ausgeführt werden, wenn auf eine Zeile vom Text geklickt wurde. Beim Farbenwechsel und Textanzeige sollte kein klicken erforderlich sein.
Im Voraus noch mal vielen, lieben Dank.
lg piepser

.box{

width:1000px;
height:800px;
margin: 20px auto;
background: #ccc;
}

.bild{
padding: 155px 0px 0px 265px;
}

<div class="box">
<div class="bild">
<img name="Bild"
src="kreis_01.jpg" alt="" border="0" width="502" height="502" usemap="#planetmap" />
<map name="planetmap">
<area shape="poly" onMouseOver="document.Bild.src='kreis_01_b.jpg';" onMouseOut="document.Bild.src='kreis_01.jpg';"
coords="251,360,251,500,275,499,310,494,345,482,388,459,425,429,463,382,479,350,494,309,499,275,500,250,358,250,357,271,349,294,341,311,328,326,316,337,302,347,288,354,270,359,250,360"
alt="123" href="123.html" />
</map>

</div>
</div>

**piepser** · 31.01.2011, 20:42

so, bin jetzt doch noch ein stückchen meinem Ziel näher gekommen.

Bekomme jetzt alles so angezeigt, wie ich es gerne hätte. Nur sollte mein Bild wieder in den Ursprung wechseln, wenn ich die Ecke verlasse und da passiert nix

Das OnMouseOut musste ich erst einmal ausschalten, damit der Rest so angezeigt wird, wie es soll. Jetzt weiss ich nicht mehr, wo ich es wieder anschalten kann. Habe schon einige Stellen probiert. Aber leider ohne Erfolg.
Schicke Euch hier mal den Code mit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>inhalt</title>

<style type="text/css">
.box{

width:1000px;
height:800px;
margin: 20px auto;
background: #ccc;
}

.bild{
padding: 155px 0px 0px 265px;
}

</style>
</head>
<body scroll="yes" bgcolor="white" >
<div>
<div class="box">
<div class="bild">
<img name="Bild"
src="kreis_100.jpg" alt="" border="0" width="502" height="502" usemap="#planetmap" />
<map name="planetmap">
<area shape="poly" onMouseOver="document.Bild.src='kreis_100_b.jpg';" "
coords="251,360,251,500,275,499,310,494,345,482,388,459,425,429,463,382,479,350,494,309,499,275,500,250,358,250,357,271,349,294,341,311,328,326,316,337,302,347,288,354,270,359,250,360"
alt="AAA" />

<area shape="poly" coords="436,419,493,417,491,452,437,448,437,419" alt="XXX" href="test.html" />
<area shape="poly" coords="436,450,491,450,491,473,437,473" alt="YYY" href="test.html" />

</map>
</div>
</div>
</div>
</body>
</html>

zur Startseite vom TP

Thema: imagemap im imagemap

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

imagemap im imagemap

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

Imagemap

Imagemap

ImageMap

imagemap

imagemap - url

Aktive Benutzer

Aktive Benutzer

Berechtigungen