Reprogrammer une galerie photo
Résolu
MVU
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
MVU Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
MVU Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je suis en train de refaire le site internet de ma société, dans ce but je doit faire des galeries photos pour présenter des véhicules à vendre. J'ai trouvé quelques trucs intéressant mais je voudrais que les miniatures des photos se positionnent a gauche et non pas au dessus de la photo agrandie.
Voici le code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
div#galerie
{
width: 700px ;
background: #eed ;
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: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 0.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
</style>
</head>
<body>
<div id="galerie">
<ul id="galerie_mini">
<li><a href="../images/batiment/001.JPG" title="206 societe"><img src="../images/batiment/mini/001mini.JPG" alt="206" width="160" height="120" border="0" /></a></li>
<li><a href="../images/batiment/002.JPG" title="Titre de la photo 2"><img src="../images/batiment/mini/002mini.JPG" alt="Le titre de la photo 2" width="160" height="120" border="0" /></a></li>
<li><a href="../images/batiment/003.JPG" title="Titre de la photo 3"><img src="../images/batiment/mini/003mini.JPG" alt="Le titre de la photo 3" width="160" height="120" border="0" /></a></li>
<li><a href="../images/batiment/004.JPG" title="Titre de la photo 3"><img src="../images/batiment/mini/004mini.JPG" alt="Le titre de la photo 3" width="160" height="120" border="0" /></a></li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img src="../images/batiment/001.JPG" alt="Photo 1 en taille normale" name="big_pict" width="640" height="480" id="big_pict" /></dd>
</dl>
</div>
</body>
</html>
et le code javascript :
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;
voila si quelqu'un sait comment faire je suis preneur :) pis en meme temps si c'était possible de faire défiler les photos juste en passant le pointeur de la souris dessus a la place de devoir cliquer sur chaque miniature, apparement c'est avec la fonction onMouseOver mais je n'ai pas réussi non plus à l'integrer.
Merci d'avoir prit la peine de me lire :)
je suis en train de refaire le site internet de ma société, dans ce but je doit faire des galeries photos pour présenter des véhicules à vendre. J'ai trouvé quelques trucs intéressant mais je voudrais que les miniatures des photos se positionnent a gauche et non pas au dessus de la photo agrandie.
Voici le code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
div#galerie
{
width: 700px ;
background: #eed ;
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: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 0.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
</style>
</head>
<body>
<div id="galerie">
<ul id="galerie_mini">
<li><a href="../images/batiment/001.JPG" title="206 societe"><img src="../images/batiment/mini/001mini.JPG" alt="206" width="160" height="120" border="0" /></a></li>
<li><a href="../images/batiment/002.JPG" title="Titre de la photo 2"><img src="../images/batiment/mini/002mini.JPG" alt="Le titre de la photo 2" width="160" height="120" border="0" /></a></li>
<li><a href="../images/batiment/003.JPG" title="Titre de la photo 3"><img src="../images/batiment/mini/003mini.JPG" alt="Le titre de la photo 3" width="160" height="120" border="0" /></a></li>
<li><a href="../images/batiment/004.JPG" title="Titre de la photo 3"><img src="../images/batiment/mini/004mini.JPG" alt="Le titre de la photo 3" width="160" height="120" border="0" /></a></li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img src="../images/batiment/001.JPG" alt="Photo 1 en taille normale" name="big_pict" width="640" height="480" id="big_pict" /></dd>
</dl>
</div>
</body>
</html>
et le code javascript :
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;
voila si quelqu'un sait comment faire je suis preneur :) pis en meme temps si c'était possible de faire défiler les photos juste en passant le pointeur de la souris dessus a la place de devoir cliquer sur chaque miniature, apparement c'est avec la fonction onMouseOver mais je n'ai pas réussi non plus à l'integrer.
Merci d'avoir prit la peine de me lire :)
A voir également:
- Reprogrammer une galerie photo
- Galerie photo en ligne gratuite - Guide
- Google photo - Télécharger - Albums photo
- Comment masquer une photo dans la galerie - Guide
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
- Google maps photo maison - Guide
