nicht angemeldet
image-map oder so...
Moischen Leudings!
Ich habe eine Bild-Kollage erstellt und möchte nun in dieses Bild Roll-over-effekte einfügen.
Die Kollage besteht aus einem Hintergrund und z.b. einem Bild von mir im Winterurlaub.
Wenn ich nun mit der Maus über dieses Bild gehe, soll sich das Bild ändern. Da das Bild aber ein Polygon ist und andere Bilder überschneidet, kann ich nicht einfach die Kollage in Einzelteile zerlegen. Dann wäre es ja auch nicht so schwer...
Ich suche praktisch nach einer Kombination zwischen map, um die Koordinaten angeben zu können, und layern, damit an genau der selben Stelle dann in genau der selben Form ein anderes Bild erscheint.
Kann mir bitte jemand helfen?!
MfG, fl@lander19.
-
Hallo Madding!
Positioniere jedes einzelne Bild mit genauer Größe in ein genau gleich großes LayerFeld (mittels CSS und <div>-Tags). Alles was durch einen darüberliegenden LayerFeld verdeckt wird, ist NICHT anklickbar, auch wenn dieser untere Layer sichtbar ist, weil sich etwa in dem oben liegenden LayerFeld-Bereich kein Inhalt befindet.
Bei NICHT.rechteckförmigen Bildern entstehen dadurch allerdings im MouseHandler-Effekt "falsche" Zuweisungen: Dieses läßt sich sehr aufwändig ändern, wenn komplizierte Polygonfelder auf dieses Bild linken, im transparenten Bereich jedoch auf das darunter durchscheinende Bild dann linken.
Viiiiiiel Arbeit! Sieht aber bestimmt gut aus, und funktioniert auch auf allen modernen Browsern!
Gruss KLAUS.-
Danke Klaus.
Wie ist das mit Netscape? Ich dachte ab Version 4.0 geht das mit den Layern nicht mehr?
Außerdem muss ich mich wohl ersteinmal mit Layern genauer beschäftigen, damit ich verstehe, was du meinst. Ich habe bisher fast alles in Flash gemacht und bin deshalb nicht so gut mit der Materie "HTML" vertraut.
Wenn du noch weitere Tipps weißt, dann immer her damit!
Das gilt natürlich auch für alle anderen!MfG, Martin aka fl@lander19.
-
Hallo Martin,
hier der "Layer"-Quellkode, der in allen Browsern (ausser NS 4.x) wunderbar funktioniert:<HEAD>
<TITLE>::: LAYER-StilTechnik :::</TITLE>
<style type="text/css">
body { background-image:url(hleiste01.gif); }#bild001 { position:absolute; left:300px; top:100px; z-Index:1; }
#bild002 { position:absolute; left:170px; top:150px; z-Index:2; }
#bild003 { position:absolute; right:12px; bottom:220px; z-Index:3; }
#bild004 { position:absolute; right:240px; bottom:220px; z-Index:4; }
#txtfeld001 { position:absolute; left:180px; top:70px; z-Index:5; }
#txtfeld002 { position:absolute; right:12px; bottom:140px; z-Index:6; }#bild001[id] { position:fixed; } //Extra-ID für alle Browser, die die Fixierung nicht verstehen,
#textfeld002[id] { position:fixed; } //diese setzen die Position dann immerhin noch auf absolute - siehe oben.
</style></HEAD>
<BODY>
<div id="bild001"><img src="BILDER/frN01.gif" width="70" height="58" border="0 title="xxx"></div>
<div id="bild002"><img src="BILDER/frNietzsche1t2.jpg" width="70" height="58" border="0" title="xxx"></div>
<div id="bild003"><img src="BILDER/frNietzsche1.jpg" width="70" height="58" border="0" title="xxx"></div>
<div id="bild004"><img src="BILDER/frNietzsche1t1.gif" width="70" height="58" border="0" title="xxx"></div><div id="txtfeld001">
<table width="100px" height="160px">
<td>1111</td>
<td>2222</td>
</table>
</div><div id="txtfeld002">
<table width="140px" height="80px">
<td>xxxx</td>
<td>yyyy</td>
</table>
</div>
</BODY>Anmerkung: Layout wie im Printbereich ! TEXT in Tabellen formatieren
BILD als Einzelbild ohne Text setzen
z-Index:1; gibt die Layerlage an, wobei 1 ganz unten ist und 999 ganz oben
Fixierte Position bleibt beim Scrollen in der voreingestellten Position (scrollt nicht mit!).
right: Abstand vom rechten FensterRand,
left: Abstand vom linken FensterRand,
top: Abstand von oben,
bottom: Abstand von unten.Gruss KLAUS
-
-