18041 sujets

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

Images zoomable

bonjours;
voilà je voudrer faire des images zoomable sur mon site comme l'explique l'exellent site CSS débutant.
Mais mon probleme c'est que je n'arrive pas a mettre les petite images en bas et l'image zoomable qui apparaitrer en haut Smiley sweatdrop l'inverse proposer par le tuto.
c'est sur le fichier html ou css que l'on doit apporter les modification???
pratoenitalie a écrit :
c'est sur le fichier html ou css que l'on doit apporter les modification???

Comme marqué dans le tuto, il faut toucher au code CSS et au code XHTML
Smiley cligne Sinon, tout est dit dans le tuto, et bien fait, donc je ne vois pas quoi ajouter de plus, surtout sans que tu donnes l'url de la page en question Smiley ravi
trés bien compris mais quelles modifications doi-je apporter aux fichier pour que les petites images ce trouve en bas et la grande image en haut? Smiley confus
pratoenitalie a écrit :
trés bien compris mais quelles modifications doi-je apporter aux fichier pour que les petites images ce trouve en bas et la grande image en haut? Smiley confus


Dans le code CSS :
img#grande {
	imprécation : va en haut !;
}
img.petite {
	imprécation: va en bas !;
}


Plus sérieusement, sans avoir la moindre idée de ce que tu as réalisé (code, page en ligne...) ça risque d'être dur de t'aider.

Hors considérations tarabiscotées de positionnement, un élément sera en haut s'il est placé en premier dans le code HTML, et un élément sera en dessous s'il est placé en second.
mon code 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>Livre d'or - Pot de peinture </title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="teste-imageclicable.css" />
	   <link rel="shortcut icon" type="image/x-icon" href="favicom-p.ico" />
   </head>
   <body>
   <div class="thumb">
  <a href="#">
  <img src="pompeï20.jpg" alt="Inachis-io" />
  </a>
</div>
<div class="thumb">
  <a href="#">
  <img src="pompeï21.jpg" alt="Machaon" />
  </a>
</div>
<div class="thumb">
  <a href="#">
  <img src="pompeï23.jpg" alt="Polyommatus-icarus" />
  </a>
</div>	
 </body>
</html>

mon code css
body {
	background-color:black;	 
	color:white;
	height:500px;
	} 

img {border:0} 

.thumb {
	width:100px;
	height:75px; 
	margin:1px;
	float:none; 
	background-color:#D3D3D3; 
	display:block;
	} 

.thumb a {
	display:block;
	}

.thumb a:hover {
	position:absolute;	
	}	 
	
/*hack pour permettre le rollover 
de gauche à droite avec mozilla*/

body>.thumb a:hover {	  
	position:relative;	 
	}	
	
.thumb a img { 
	margin:0;
	padding:0;
	width:100px;
	height:75px; 
	}

.thumb a:hover img {
	position:relative;
	left:0px;
	top:80px;
	width:300px;
	height:225px;  
	}

l'image que sa donne
upload/11531-capturethu.jpg" alt="upload/11531-capturethu.jpgupload/11531-capturethu.jpg" />

et l'image que j'aimerai avoir
upload/11531-capturethu.jpg
Je ne sais vraiment pas quelle morceau de code changer ???
merci Smiley smile
Sujet clos
Aller à