Aus und Einblenden

Malaxo

Erfahrenes Mitglied
Hallo Leute, bin nicht gerade ein JS profi aber hab mal folgendes geschafft, Rollover nicht beachten:

funktion
HTML:
<script>
		function setVisible(ObjId)
		{
			var Obj = document.getElementById(ObjId);
		   Obj.style.visibility = (Obj.style.visibility == "hidden")?"visible":"hidden";
		}
	</script>


was man sieht
HTML:
<a href="#" onmouseover="austausch1.src='bilder/uhr/ck1.png';" onmouseout="austausch1.src='bilder/uhr/ck1_g.png';" onclick="setVisible('ck1_gross');">

was erscheinen soll
HTML:
<div id="ck1_gross" style="visibility:hidden">blub</div>

Jetzt ist das so das es mehrere gibt. es sind 9 kleine Bilder, wenn man auf eins drauf klickt sollte es grösser irgend wo platziert erscheinen. Wenn man auf ein anderes klickt soll das 1. Weg und das 2. erscheinen. etc. etc. es darf also nur immer 1 grosses Bild erscheinen und nicht überlagern. Wie mach ich das? Irgend wie muss alles was dann visible zu hidden und das was man angeklickt hat zu visible:)

Hoffe man kommt draus bei meiner erklärung.
Nochmal: ich habe wenig ahnung von JS.
 
Und wie wäre es mit diesem Script, das die Grafiken in einer Box tauscht?

Code:
<script type="text/javascript">
function swapImage(imgName,swapImg) {
        document.images[imgName].src=swapImg;
}
</script>
Code:
<body>

<div id="ck_gross">
    <!-- In dieser Box werden die großen Grafiken getauscht -->
    <img src="blind.png" alt="" name="start">
</div>

<ul>
    <li><a href="#" onclick="swapImage('start','ck1_gross.png')"><img src="ck1_klein.png" alt=""></a></li>
    <li><a href="#" onclick="swapImage('start','ck2_gross.png')"><img src="ck2_klein.png" alt=""></a></li>
    <li><a href="#" onclick="swapImage('start','ck3_gross.png')"><img src="ck3_klein.png" alt=""></a></li>
    <!-- usw. -->
</ul>

</body>
 

Neue Beiträge

Zurück