Bilder in Layers

[Lisan al-Gaib]

Ich habe zahlreiche Tutorials gelesen und doch nicht sonderlich schlauer daraus gewurden. Ich habe zwar ein wenig schon kapiert aber funktionieren tut es immer noch nicht.

Ich habe eine Karte gestaltet, so 50 x 30 Felder groß. Es soll der Spieler jedoch immer nur 9 Felder angezeigt bekommen, wobei die 8 Felder, die das mittlere Umranden jeweils nach außen hin mit einem schwarzen Nebel begrenzt werden. Dieser Nebel soll durch eine PNG Datei, die in der langsam aus dem transparenten ins schwarze übergeht gewährleistet werden.
Dazu muss ich im Prinzip einfach nur die beiden Bilder übereinander legen....
Ja nur sind leider jegliche Versuche und Experimente mit z-index fehlgeschlagen und ich habe aufgegeben.

Könnte mir jemand freundlicher weise ein wenig Nachhilfe darin geben, wie ich soetwas auf die Reihe bekomme Also das Bild soll in einer Zelle einer Tabelle übereinander gelegt werden hier mein kläglicher Versuch:

 <td>
			
			<div style="z-index:2; position:absolute;"><img src="shadow_lu.png" /></div>
			<div style="z-index:1;"><img src="map01_5.jpg" /></div>

		</td>

Bitte, ich wäre sehr zu Dank verpflichtet, wenn mir jemand helfen könnte.

Mfg. Mahdi

 

[Watusimann]

zu deinem tranzparenten Bild ... der IE zeigt dieses nicht.
zu deinem Code:

#oben {
position:absolute;
height:100px;
width:70px;
top:40px;
left:40px;
border:1px solid #ccc;
background-color:#ccc;
z-index:2
}
#unten {
position:absolute;
height:100px;
width:70px;
top:43px;
left:43px;
border:1px solid #777;
background-color:#777;
z-index:1
}

aufrufen tust du das ganze dann so

<div id="oben">&nbsp;</div>
<div id="unten">&nbsp;</div>

... wenn ich dich richtig verstanden habe

 

[Maik]

Bei mir werden die Grafiken gemäß ihrer Schichtposition übereinander positioniert.

• Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000

 

[Lisan al-Gaib]

Ja, gut nun habe ich herausgefunden, dass das an dem PNG Bild und seiner Transparenz liegt.
Ein .gif wird bei mir komischer weise mit transparenz angezeigt. Wie kann ich ein relativ realiistische Schattenmap erzeugen, die ich darüber legen kann? Als .gif als PNG? Ich habe da leider noch keine Erfahrung.

Mfg. Mahdi

 

[Maik]

Der IE kann transparente PNGs (noch) nicht darstellen. Hierfür empfehle ich dir die PNG-Behavior-Technik.