Bonjour à tous
j'ai bien suivi et exécuté le tuto ci-dessus
http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
ça marche pile poil Cependant j’aimerai
A ) mettre les mini photos non pas en haut horizontalement mais à gauche verticalement avec la grande image sur la droite des mini photos .
B) comment faire pour créer un lien sur la grande photo lorsqu’elle est affichée.
Je n'ai changé que quelques broutilles dans la dimension et couleur du cadre en CSS par rapport au tuto.
Est ce qu'un " savant " aurait un tuyau ?
PS à MIKACHU Merci pour ton info, j'avais lu ( un peu vite ) j'espère avoir compris ???[/i]
Modifié par afelix (03 Jun 2007 - 21:02)
j'ai bien suivi et exécuté le tuto ci-dessus
http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
ça marche pile poil Cependant j’aimerai
A ) mettre les mini photos non pas en haut horizontalement mais à gauche verticalement avec la grande image sur la droite des mini photos .
B) comment faire pour créer un lien sur la grande photo lorsqu’elle est affichée.
Je n'ai changé que quelques broutilles dans la dimension et couleur du cadre en CSS par rapport au tuto.
Est ce qu'un " savant " aurait un tuyau ?
<!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>PATRICIA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="PATRICIA" href="CSS.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="galerie">
<ul id="galerie_mini">
<li><a href="copie de statue.jpg" title="penseuse"><img src="statue 50 x 90.jpg" alt="penseuse" /></a></li>
<li><a href="copie El Juli.jpg" title="El JULI"><img src="El Juli.jpg" alt="El JULI" /></a></li>
</ul>
<dl id="photo">
<dt>sculptures</dt>
<dd><img id="big_pict" src="copie de statue.jpg" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
</body>
</html>
div#galerie
{
width: 1150px ;
height: 800px;
background: #eef ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float : left ;
}
ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}
dl#photo
{ clear: left ;
margin : 10% ;
}
dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 10px solid #dcb ;
}
p
{
font-size: 18px;
text-align: center ;
}
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
PS à MIKACHU Merci pour ton info, j'avais lu ( un peu vite ) j'espère avoir compris ???[/i]
Modifié par afelix (03 Jun 2007 - 21:02)
