A voir également:
- RAD ZONE au secours!!!!
- Zone telechargement - Accueil - Outils
- Combien y a-t-il de bateaux dans la zone de 1500 pixels de large et 500 pixels de haut à partir du coin supérieur gauche de cette image ? - Forum Graphisme
- Zone téléchargement - Accueil - Services en ligne
- 02 880 zone - Guide
- Appel data zone franche - Forum Enregistrement / Traitement audio
2 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
12 oct. 2007 à 14:24
12 oct. 2007 à 14:24
SALUT
oui cela ce fais en js ! mais il faut changer completement ta page pour faire une page
ou il ni as pas de iframe et ou les photo sont appelees par javascript!
mais franchement , moi dans ton cas ( je sais que tu voudrais eviter mais ) je ferais un hyperlien ou un bouton precedent !!!
cela ne changeras pas grand chose a ta page , mais personellement je trouve cela beaucoup plus pratique et ergonomique pour le visiteur d avoir une navigation sur la page
que de le faire par la barre de navigation !!!
RAD
oui cela ce fais en js ! mais il faut changer completement ta page pour faire une page
ou il ni as pas de iframe et ou les photo sont appelees par javascript!
mais franchement , moi dans ton cas ( je sais que tu voudrais eviter mais ) je ferais un hyperlien ou un bouton precedent !!!
cela ne changeras pas grand chose a ta page , mais personellement je trouve cela beaucoup plus pratique et ergonomique pour le visiteur d avoir une navigation sur la page
que de le faire par la barre de navigation !!!
RAD
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
13 oct. 2007 à 16:31
13 oct. 2007 à 16:31
voila un exemple !
RAD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title> </title> <style type="text/css"> div#galerie { width: 410px; 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 2.5em/1.5em Georgia, serif; color: #dcb; } dl#photo dd { margin: 0; } dl#photo img { border: 1px solid #dcb; } </style> <script type="text/javascript">function displayPics() { var photos = document.getElementById('galerie_mini'); // On récupère l'élément ayant pour id galerie_minivar liens = photos.getElementsByTagName('a'); // On récupère dans une variable tous les liens contenu dans galerie_minivar 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 normalevar 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_minifor (var i = 0; i < liens.length; ++i) { // Au clique sur ces liensliens[i].onclick = function() { big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lienbig_photo.alt = this.title; // On change son titretitre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photoreturn 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</script> </head> <body> <div id="galerie"> <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> <li> <a href="images/photo5.png" title="Titre de la photo 5"> <img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li> <li> <a href="images/photo6.png" title="Titre de la photo 6"> <img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li> <li> <a href="images/photo7.png" title="Titre de la photo 7"> <img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li> <li> <a href="images/photo8.png" title="Titre de la photo 8"> <img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li> <li> <a href="images/photo9.png" title="Titre de la photo 9"> <img src="images/minis/m_photo9.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>
RAD
12 oct. 2007 à 15:01
Merci.Cordialement.