Bonjour a tous ,
je programme actuellement un site de jeu ( simulation de vie ) et mon objectif est de créé une interface agreable au visiteur afin de pouvoir choisir ces objets dans sa "maison";
J'ai donc pour cela penser au système d'une galerie d'image JS.
Le problème étant , je fais mes début en JS et je n'arrive pas a programmer ce système. mon code est le suivant :
et mon javascript :
[code]
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.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
[code]
Vous remarquerez ici une galerie standar pris sur alsacreation.
J'aurais besoin de savoir comment transformer la partie ou s'affiche l'image et son titre en une div comportant mes variables php ainsi que les input "utiliser" , "vendre"
Merci de votre aide
je programme actuellement un site de jeu ( simulation de vie ) et mon objectif est de créé une interface agreable au visiteur afin de pouvoir choisir ces objets dans sa "maison";
J'ai donc pour cela penser au système d'une galerie d'image JS.
Le problème étant , je fais mes début en JS et je n'arrive pas a programmer ce système. mon code est le suivant :
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Titre de la photo 1</title>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
div#galerie
{
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 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 2.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="fromage.png" title="From qui pue"><img src="fromage.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="fromage.png" title="Titre de la photo 2"><img src="fromage.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="fromage.png" title="Titre de la photo 3"><img src="fromage.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="fromage.png" title="Titre de la photo 4"><img src="fromage.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="fromage.png" title="Titre de la photo 5"><img src="fromage.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="fromage.png" title="Titre de la photo 6"><img src="fromage.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="fromage.png" title="Titre de la photo 7"><img src="fromage.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="fromage.png" title="Titre de la photo 8"><img src="fromage.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="fromage.png" title="Titre de la photo 9"><img src="fromage.png" alt="Le titre de la photo 9" /></a></li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
</body>
</html>
et mon javascript :
[code]
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.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
[code]
Vous remarquerez ici une galerie standar pris sur alsacreation.
J'aurais besoin de savoir comment transformer la partie ou s'affiche l'image et son titre en une div comportant mes variables php ainsi que les input "utiliser" , "vendre"
Merci de votre aide