18041 sujets

Questions générales et questions de débutants

Améliorer ma galerie d'image

J'ai réussi à créer une galerie d'image avec des noms de couleurs. Et mon problème c'est de remplacé les rectangles de couleurs par des images.

Voici le html: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" href="styles.css" />
	   
</head>
<body
<div id="container">
	<div id="galerie">
	<div id="bloc_img">
	<div id="img_1"></div>
	<div id="img_2"></div>
	<div id="img_3"></div>
	
	</div>
	<div id="bloc_bt">
	            <a href="#img_1" class="bt_1">BLEU</a>
	            <a href="#img_2" class="bt_2">JAUNE</a>
	            <a href="#img_3" class="bt_3">VERT</a>
			    
				
	        </div>	</div>
	</div>


Voici le CSS: 

body {
	    margin:0;	
        }
	#container {
	    width:720px;	  
	    margin:50px auto;
	}
	#galerie {
            width:700px;
	    background:#eee;
	    border-bottom:3px solid #aaa;
	    padding:10px;
	    float:left;
	}
	#bloc_img {
	    width:700px;
	    height:500px;
            float:left;
            margin-bottom:10px;
	    border-top:1px solid #aaa;
	    border-bottom:1px solid #fff;
	}
	#img_1, #img_2, #img_3 {
	    width:700px;
	    height:500px;	    
	    display:none;	}	
	#img_1:target {	   
	    display:block;	    
	    background:#03a7e7;	}	
	#img_2:target  {	   
	    display:block;
	    background:#fdd12c;
	}
	#img_3:target  {
	    display:block;
	    background:#467d76;
	}
	#bloc_bt {
	    float:left;
	    width:700px;
	    height:50px;
	}
	a.bt_1, a.bt_2, a.bt_3 {
	    float:left;
	    width:50px;
            height:50px;
	    margin-right:11px;
	    color:#fff;	    text-align:center;
	    line-height:50px;
	    text-decoration:none;
}
	a.bt_1:hover, a.bt_2:hover, a.bt_3:hover  a.bt_4:hover: a.bt_5:hover:
        a.bt_6:hover{
	color:#545454;
	}
	a.bt_1 {
	
	    background:#03a7e7;
	}
	a.bt_2 {
	    background:#fdd12c;
	}
	a.bt_3 {
	    margin-right:0;
	    background:#467d76;
	}

Modifié par 6l20 (20 Apr 2012 - 16:16)
Sujet clos
Aller à