Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 24.01.2010, 19:19
rafa rafa ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.04.2009
Beiträge: 30
rafa befindet sich auf einem aufstrebenden Ast
Standard Bild über Bild

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
Mit Zitat antworten
Sponsored Links