Autor |
Nachricht |
mauer-design
Threadersteller
Dabei seit: 19.04.2007
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Fr 26.10.2007 10:19
Titel Bildwechsel bei onmouseover |
|
|
Servus,
ich habe ein "Script", das einzelne div visible und hidden setzt. Mein Problme ist nun aber, dass die Divs immer an der gleichen Stelle erscheinen sollen. bisher tun Sie dies nur untereinander. Position abolute kann ich wegen dem Aufbau der Seite nicht einsetzen. Also zur Verständnis: Jedes visible gesetze div soll in der oben linke ecke des gelben Kastens angezeigt werden. Hier mein aktuelles Script:
Code: | <head>
<style>
#imagerahmen { width: 200px; height: 200px; background-color: yellow;}
#image1 {position: relative; top: 0; left: 0; visibility: hidden;}
#image2 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 2;}
#image3 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 3;}
#image4 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 4;}
#image5 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 5;}
#image6 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 6;}
#image7 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 7;}
</style>
</head>
<body>
<a href="#" onmouseover=javascript:document.getElementById('image1').style.visibility='visible' onmouseout=javascript:document.getElementById('image1').style.visibility='hidden'>Bild 1 anzeigen</a>
<a href="#" onmouseover=javascript:document.getElementById('image2').style.visibility='visible' onmouseout=javascript:document.getElementById('image2').style.visibility='hidden'>Bild 2 anzeigen</a>
<a href="#" onmouseover=javascript:document.getElementById('image3').style.visibility='visible' onmouseout=javascript:document.getElementById('image3').style.visibility='hidden'>Bild 3 anzeigen</a>
<a href="#" onmouseover=javascript:document.getElementById('image4').style.visibility='visible' onmouseout=javascript:document.getElementById('image4').style.visibility='hidden'>Bild 4 anzeigen</a>
<a href="#" onmouseover=javascript:document.getElementById('image5').style.visibility='visible' onmouseout=javascript:document.getElementById('image5').style.visibility='hidden'>Bild 5 anzeigen</a>
<a href="#" onmouseover=javascript:document.getElementById('image6').style.visibility='visible' onmouseout=javascript:document.getElementById('image6').style.visibility='hidden'>Bild 6 anzeigen</a>
<a href="#" onmouseover=javascript:document.getElementById('image7').style.visibility='visible' onmouseout=javascript:document.getElementById('image7').style.visibility='hidden'>Bild 7 anzeigen</a>
<p><br />
</p>
<div id="imagerahmen">
<div id="image1">Image 1</div>
<div id="image2">Image 2</div>
<div id="image3">Image 3</div>
<div id="image4">Image 4</div>
<div id="image5">Image 5</div>
<div id="image6">Image 6</div>
<div id="image7">Image 7</div>
</div>
</body>
</html> |
hat einer ne Lösung?
Zuletzt bearbeitet von mauer-design am Fr 26.10.2007 10:20, insgesamt 1-mal bearbeitet
|
|
|
|
|
Fido67
Account gelöscht
Ort: -
|
Verfasst Fr 26.10.2007 10:35
Titel
|
|
|
Hallo,
du könntest das mit margin machen:
Code: | #image2 {position: relative; top: 0; left: 0; margin-top:-200px; visibility: hidden;} |
Zuletzt bearbeitet von am Fr 26.10.2007 10:38, insgesamt 2-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
mauer-design
Threadersteller
Dabei seit: 19.04.2007
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Fr 26.10.2007 15:13
Titel
|
|
|
Das din ist dann aber, dass bei relativer positionierung der content ja nach oben verlagert wird, aber dennoch das div sein platz an der ursprünlichen postion behält, also es sieht perfekt aus, aber der scrolbalken rechts ist ebend so lang, als wären die divs untereinander. kann man das irgendie unterdrücken?
|
|
|
|
|
Fido67
Account gelöscht
Ort: -
|
Verfasst Fr 26.10.2007 15:26
Titel
|
|
|
Da die divs ja in einem container sind kannst du die positionangabe auch weglassen.
So gibts keunen scrollbalken:
Code: | <style>
#imagerahmen { width: 200px; height: 200px; background-color: yellow;}
#image1 {width: 200px; height: 200px; top: 0; left: 0; visibility: hidden;}
#image2 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 2;}
#image3 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 3;}
#image4 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 4;}
#image5 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 5;}
#image6 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 6;}
#image7 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 7;}
</style> |
|
|
|
|
|
|
|
|
Ähnliche Themen |
Bildwechsel durch onMouseOver
onmouseover
[php] OnMouseover Effekt mit php
text bei onmouseover
onmouseover Problem
onMouseOver per HyperLink
|
|