[ js, css] PRZESUWANKIE OBRAZKA NA WIERZCH PO NAJECHANIU

[furiatex]

witam,
mam taki problem:
chcę umieścić na stronie 3 miniaturki zdjęć, które lekko na siebie nachodzą. po najechaniu myszką obrazek spod spodu wysuwa się na wierzch. Każdy jest na osobnym div'ie
nie mam pomysłu jak to zrobić. jedynie mam taki zarys że w kodzie js znarzenie onmouseover powinno odwoływać się do kolejności div'ów obrazków... może opcji z-index?? oczywiście na pewno są inne sposoby......
proszę o pomoc


p.s. żeby nie zakładać kolejnego tematu: chcę zrobić cień dla obrazka. chodzi o różnice w wyświetlaniu przez przeglądarek bo opcja filtrów CSS działą tylko w IE a ten sam IE nie czyta plików PNG. więc wpadłem na taki pomysł aby automatycznie otwierała się wersja z filtrami jeśli użytkownik ma IE a jeśli ma inną przeglądarkę otwiera się plik z narzuconymi cieniami w PNG.
Jak to zrobić żeby za dużo nie zagmatwać w kodzie strony??


z góry dzięki

[furiatex]

nikt nie ma żadnego pomysłu??

pomóżcie PROSZĘ...

[gorylek]

DOM i JavaScript oraz operowanie nimi na z-index elementu.
Pozdrawiam

[furiatex]

ok, dzięki gorylek za zainteresowanie. Mógłbyś troszkę bardziej rozwinąć temat? bo jeśli chodzi o samodzielne programowanie to jestem jeszcze bardzo początkujący....

[furiatex]

ok, jakoś sobie poradziłem poszukałem różnych źródeł w necie i wyszło z tego coś takiego....
ten kod nie jest jakiś zaskakująco błyskotliwy ale ważne, że działa.
Jeśli ktoś ma jakiś pomysł na jego usprawnienie to czekam na sugestie...


w pliku change_order.js wpisujemy:

Kod: Zaznacz cały

function changeStackOrder()
{
document.getElementById("fotka1").style.zIndex="5";
}

	function changeStackOrderOdwrot()
	{
	document.getElementById("fotka1").style.zIndex="2";
	}

function changeStackOrder2()
{
document.getElementById("fotka2").style.zIndex="5";
}

	function changeStackOrderOdwrot2()
	{
	document.getElementById("fotka2").style.zIndex="3";
	}
	
function changeStackOrder3()
{
document.getElementById("fotka3").style.zIndex="5";
}

	function changeStackOrderOdwrot3()
	{
	document.getElementById("fotka3").style.zIndex="2";
	}

w sekcji head dokumentu html umieściłem(wywołąnie pliku js i osadzone css div dla poszczególnego zdjęcia:

Kod: Zaznacz cały

<script type="text/javascript" src="Scripts/change_order.js"></script>

<style>
#fotka1 {
	position: absolute;
	margin-left: 30px;
	margin-top: 5px;
	z-index: 3;
	}
	
#fotka2 {
	position: absolute;
	margin-left: 60px;
	margin-top: 150px;
	z-index: 4;
	}
	
#fotka3 {
	position: absolute;
	margin-left: 30px;
	margin-top: 270px;
	z-index: 3;
	}
</style>

przy każdej fotce umieszczamy:

Kod: Zaznacz cały

<div id="fotka1">
    	<a href="fotka1d.jpg"  onmouseover="changeStackOrder()" value="Change stack order" 	onmouseout="changeStackOrderOdwrot()" value="Change stack order odwrot">
	<img src="fotka1.png" border="0" alt="Suto zastawiony półmisek wędlin" /></a></div>
    
<div id="fotka2">
    	<a href="fotka2d.jpg" onmouseover="changeStackOrder2()" value="Change stack order" onmouseout="changeStackOrderOdwrot2()" value="Change stack order odwrot" >
		<img src="fotka2.png" border="0"alt="Catering, obsługa bankietów i przyjęć"/></a></div>
    

<div id="fotka3">
    	<a href="fotka3d.jpg" onmouseover="changeStackOrder3()" value="Change stack order" onmouseout="changeStackOrderOdwrot3()" value="Change stack order odwrot"" >
		<img src="fotka3.png" border="0" alt="Restauracja w biurowcu Marynarska Point, Warszawa" /></a></div>

oczywiśćie trzeba poustawiać odpowiednio dla każdego z-index w css oraz w js