ich möchte eine fotogalerie machen wie auf der seite http://www.hedwig-bouley.de/ (unter dem menüpunkt fotos)
ich möchte aber zwei solche galerien nebeneinander.
ich habe auch schon das js, aber wenn ich mir die bilder anzeigen lassen will, werden die bilder der zweiten galerie immer auf der ersten angezeigt.
wie löse ich das problem?
css-code
HTML
.fotos1 {
position: absolute;
margin-top: 230px;
margin-left: 50px;
width: 300px;
float: left;
padding-right: 20px;
}
.fotos2 {
position: absolute;
margin-top: 230px;
margin-left: 370px;
width: 300px;
float: left;
padding-right: 20px;
}
js und quellcode
HTML
<script type="text/javascript">
/*<![CDATA[*/
var bilder = new Array();
bilder[1] = new Image();
bilder[1].src = "Bilder/Fotos/001_300P.jpg";
bilder[2] = new Image();
bilder[2].src = "Bilder/Fotos/002_300P.jpg";
bilder[3] = new Image();
bilder[3].src = "Bilder/Fotos/003_300P.jpg";
bilder[4] = new Image();
bilder[4].src = "Bilder/Home/Titel_Bild_04_300P.jpg";
bilder[5] = new Image();
bilder[5].src = "Bilder/Home/Titel_Bild_05_300P.jpg";
bilder[6] = new Image();
bilder[6].src = "Bilder/Home/Titel_Bild_06_300P.jpg";
function show(id)
{var target = document.getElementById("showpic");
target.src=bilder[id].src;}
/*]]>*/
</script>
<div class="fotos1">
<p><img id="showpic" src="Bilder/Fotos/001_300P.jpg"></p><br />
<p class="fotos-text" onclick="show('1')">1</p> |
<p class="fotos-text" onclick="show('2')">2</p> |
<p class="fotos-text" onclick="show('3')">3</p>
</div>
<div class="fotos2">
<p><img id="showpic" src="Bilder/Home/Titel_Bild_01_300P.jpg"></p><br />
<p class="fotos-text" onclick="show('4')">1</p> |
<p class="fotos-text" onclick="show('5')">2</p> |
<p class="fotos-text" onclick="show('6')">3</p>
</div>