Bonjour à tous,
et oui encore une question à propos de cette galerie.
http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
Je précise que si je poste un message c'est parce que je n'ai pas trouvé de réponse
Me concernant, je débute dans tout. Je n'ai aucune base en javascript ou très peu. Le css je commence à saisir quelques subtilités et le html ca peut aller (ce n'est pas non plus le plus compliqué).
Alors voici ce que je souhaiterais obtenir grâce à votre galerie:
au niveau de la présentation de la galerie je souhaite mettre en premier la grande photo puis les miniatures puis le titre (qui se transforme en description).
Je précise que la ca fonctionne car j ai mis le titre en position absolue (donc bof bof quand même)
Quand je modifie le code html avec le css ca ne fonctionne plus (lors du clic sur la photo l'image s'affiche dans une autre fenêtre). J'imagine que ca vient du javascript.
au niveau de l'affichage des miniatures je voudrais qu'elles s'affichent au survol de celles-ci. Je crois qu'il faut modifier de onclic. non ?
Voici le code html css:
voila le javascript d'origine
Modifié par epock29 (29 Jul 2007 - 20:40)
et oui encore une question à propos de cette galerie.
http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
Je précise que si je poste un message c'est parce que je n'ai pas trouvé de réponse
Me concernant, je débute dans tout. Je n'ai aucune base en javascript ou très peu. Le css je commence à saisir quelques subtilités et le html ca peut aller (ce n'est pas non plus le plus compliqué).
Alors voici ce que je souhaiterais obtenir grâce à votre galerie:
au niveau de la présentation de la galerie je souhaite mettre en premier la grande photo puis les miniatures puis le titre (qui se transforme en description).
Je précise que la ca fonctionne car j ai mis le titre en position absolue (donc bof bof quand même)
Quand je modifie le code html avec le css ca ne fonctionne plus (lors du clic sur la photo l'image s'affiche dans une autre fenêtre). J'imagine que ca vient du javascript.
au niveau de l'affichage des miniatures je voudrais qu'elles s'affichent au survol de celles-ci. Je crois qu'il faut modifier de onclic. non ?
Voici le code html css:
<!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>Galerie</title>
<style type="text/css">
div#galerie
{
width: 210px ;
height:300px;
background:#fff ;
padding: 10px ;
margin: 10px;
text-align: center ;
border: 1px solid #000 ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin-left:4px;
margin-right:6px;
border: 1px solid #000 ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font-family:"Verdana", Trebuchet MS, Arial, sans-serif;
font-size:10px;
color: #333333;
position: absolute;
left: 80px;top:300px;/*et avec ca je bidouille la présentation de la galerie*/
}
dl#photo dd
{
margin:0px ;
}
dl#photo img /*tour gris photo principal*/
{
border: 1px solid #cccccc ;
}
</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="galerie">
<dl id="photo">
<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
<dt>Titre de la photo 1</dt>
</dl>
<ul id="galerie_mini">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
</ul>
</div>
</body>
</html>
voila le javascript d'origine
// JavaScript Document
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 pageModifié par epock29 (29 Jul 2007 - 20:40)
:
![[img=http://img361.imageshack.us/img361/5894/galeriejr4.th.jpg]](http://img361.imageshack.us/my.php?image=galeriejr4.jpg){kind=link}