Hallo zusammen,
Auf meiner Seite haben User auf ihren Profil bis zu 3 Bilder die sie von sich aus Präsentieren können. Ich hab das so gemacht das ein Startbild vorliegt und 3 Bilder sind daneben aber in einer kleinen größe. Klickt man das kleine Bild an, dann wird das Bild mit dem Startbild ersetzt und wird groß angezeigt.
Das Problem das auftritt, ist das wenn man ein anderes Bild anklickt es drüber angezeigt wird. Ich möchte dass das andere Bild das unter dem Bild ist verschwindet.
Hier mal Visuell zum besseren Verständnis:
Link 1 zeigt wies normal aussieht:
Link 2 zeigt wies aussieht, wenn man ein anderes kleines Bild anklickt sodass es einfach über dem anderen Bild drauf gelegt wird.(darunter liegende Bild soll jedoch weg gehen)
Der CODE:
Code:
<style type="text/css">
/* needed for IE to make :active state work first time */
a, a:visited {
color:#000;
text-align: left;
}
/* kleine bilder an der seite*/
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#F33; text-decoration:none; border:1px solid #000; width:90px; float:left; margin:2px; z-index:50;}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #F33;}
/* styling for RIGHT gallery */
#container_right {position:relative; width:400px; height:200px; }
#container_right img {border:0;}
#container_right .thumbs {width:100px; position:absolute; right:0; top:0;}
#container_right a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:-430px; padding:5px; font-style:italic; z-index:100;}
/*Bild nach links und rechts verschieben!!! bei dem left*/
#container_right div.thumbs em.default, #container_right a.gallery:active em, #container_right a.gallery:focus em {display:block; position:absolute; width:250px; height:370px; top:5px; left:-270px; padding:5px; border-bottom-color:#F00; z-index:50;}
</style>
<style>
a:hover {text-decoration:underline; color:green;}
a {text-decoration:none;}
</style>
<style>
.myse {
border: 1px solid #000;
}
</style>
Code:
<?
if ($dateiname != NULL){
echo "<a class='gallery slidea' href='#nogo'><img src='img/$dateiname' width='90' /><em><img src='img/$dateiname' /></em></a>";
}
?>
<?
if ($bild_1 != NULL){
echo "<a class='gallery slidea' href='#nogo'><img src='img/$bild_1' width='90' /><em><img src='img/$bild_1' /></em></a>";
}
?>
<?
if ($bild_2 != NULL){
echo "<a class='gallery slidea' href='#nogo'><img src='img/$bild_2' width='90' /><em><img src='img/$bild_2' /></em></a>";
}
?>
LG