✔ Layer überdecken verhindern

Status
Nicht offen für weitere Antworten.
D

dateninquisitor

Mitglied
Hallo zusammen,

habe folgendes Problem:
ich will auf mehreren Layern Gif-Bilder mit Imagemaps anzeigen, die sich jedoch nicht überdecken sollen, damit die Imagemaps funktionieren.

Das Bild hilft vielleicht, was gemeint ist.
Bild

Und zwar:
Ich will ein Stadtgebiet mit einzelnen Stadtteilen je nach Variablen entweder grün, rot oder gelb einfärben, und jeweils eine Imagemap darüberlegen.
Vielleicht ist es auch die falsche Rangehensweise, könnte man es vielleicht auch ganz anders machen?

Gruss Tom
 
Zuletzt bearbeitet:
Jetzt sehe ich gerade, wie du das gemeint hast:
für jeden Kanton hast du ein Hintergrundbild erstellt.
Das Problem bei mir:
Die Stadtteile sind schon beim Laden verschieden eingefärbt.
Also das wären bei 10 Bezirken (die alle über Imagemaps weiterverlinken) und 3 Farben(Status des Bezirks) viel zu viele Möglichkeiten.

Vielleicht noch eine Idee?

Gruss Tom
 
müsste ich jetzt ausprobieren,.. ich weiss zwar nicht ganz genau wie du das meinst, aber ev. kannst du den Image-maps background-color zuweisen ... weiss ich aber nicht
 
Aber ich habe doch nur ein "usemap"+Imagemap, wenn man ein Hintergrundbild benutzt oder?
Auf dem Bild habe ich pro Layer und Bild ein "usemap"+Imagemap, geht auch ohne Probleme, nur das überlappen kann ich leider nicht verhindern.
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#lay112 {
	position:absolute;
	left:184px;
	top:119px;
}
#lay098 {
	position:absolute;
	left:588px;
	top:266px;
}
#lay100 {
	position:absolute;
	left:558px;
	top:295px;
}
#lay102 {
	position:absolute;
	left:618px;
	top:293px;
}
#lay104 {
	position:absolute;
	left:602px;
	top:154px;
}
#lay117 {
	position:absolute;
	left:619px;
	top:291px;
}
#lay108 {
	position:absolute;
	left:481px;
	top:21px;
}
#lay106 {
	position:absolute;
	left:547px;
	top:206px;
}
#lay115 {
	position:absolute;
	left:513px;
	top:275px;
}
#lay111 {
	position:absolute;
	left:356px;
	top:173px;
}
#lay114 {
	position:absolute;
	left:501px;
	top:219px;
}
#lay110 {
	position:absolute;
	left:459px;
	top:115px;
}
#lay106 {
	position:absolute;
	left:547px;
	top:205px;
}
img{

}
-->
</style>
</head>
<body>
<map name="map112" id="map112">
<area shape="poly" coords="4,256,23,287,61,268,81,286,166,210,238,89,174,29,167,5,156,16,119,12,110,100,40,159,48,175,40,232" href="detail.php?plz=112" /></map>
<map name="map111" id="map111">
<area shape="poly" coords="4,159,97,5,120,37,145,38,152,44,139,70,139,128,145,141,180,150,192,172,203,183,180,190,145,216,78,169" href="detail.php?plz=111" />
</map>
<div id="lay098"><img src="../bilder/plz/gelb/098.gif"/></div>
<div id="lay100"><img src="../bilder/plz/gelb/100.gif" /></div>
<div id="lay102"><img src="../bilder/plz/rot/102.gif" /></div>
<div id="lay104"><img src="../bilder/plz/gelb/104.gif" /></div>
<div id="lay106"><img src="../bilder/plz/rot/106.gif" /></div>
<div id="lay108"><img src="../bilder/plz/gruen/108.gif" /></div>
<div id="lay110"><img src="../bilder/plz/rot/110.gif" /></div>
<div id="lay111"><img src="../bilder/plz/gruen/111.gif" border="1" usemap="#map111"/></div>
<div id="lay112"><img src="../bilder/plz/rot/112.gif" border="1" usemap="#map112"/></div>
<div id="lay114"><img src="../bilder/plz/gelb/114.gif" /></div>
<div id="lay115"><img src="../bilder/plz/gruen/115.gif" /></div>
<div id="lay117"><img src="../bilder/plz/gruen/117.gif" /></div>
</body>
</html>
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück