Souci codage Html
lexsniper
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
katsuo49 Messages postés 330 Date d'inscription Statut Membre Dernière intervention -
katsuo49 Messages postés 330 Date d'inscription Statut Membre Dernière intervention -
Bonjour tout le monde,
Avant tout je tiens à préciser que j'ai fait qqs recherches mais en vain. Egalement je ne suis pas très fort encore dans ce domaine alors svp ne tenez pas rigueur de mon ignorance de newbee... ;-)
Alors pour mon petit souci c'est que je souhaiterais coder une ligne pour donner le résultat suivant:
- Lorsque je clique sur l'image miniature a droite de ma page, une image associée s'affiche dans la partie gauche (ca c'est bon j'y arrive)... par contre la ou ca se corse un peu c'est que j'aimerais que l'image affichée a gauche soit cliquable avec une adresse url.
ci-dessous le code:
<div class="imgPreview"> <img id="currentImg" // les images agrandies
src="images/Imggrande00.jpg" /> </div> // première image par défault
<div class="imgThumbs">
<ul>
<li style="padding: 0pt;"><a
onclick="showImage('Imggrande00.jpg');"><img
style="border: 0px solid ; width: 140px; height: 68px;" alt=""
src="images/th00.jpg" /></a></li>
<li><a href="#"
onclick="showImage('Imggrande01.jpg');"><img
src="images/th01.jpg" /></a></li>
<li><a href="#" onclick="showImage('Imggrande02.jpg');"><img
src="images/th02.jpg" /></a></li>
<li><a href="#" onclick="showImage('Imggrande03.jpg');"><img
src="images/th03.jpg" /></a></li>
<li><a href="#" onclick="showImage('Imggrande04.jpg');"><img
src="images/th04.jpg" /></a></li>
<li><a href="#"
onclick="showImage('Imggrande05.jpg');"><img
src="images/th05.jpg" /></a></li>
</ul>
</div>
</div>
Merci bcp pour votre aide.
Avant tout je tiens à préciser que j'ai fait qqs recherches mais en vain. Egalement je ne suis pas très fort encore dans ce domaine alors svp ne tenez pas rigueur de mon ignorance de newbee... ;-)
Alors pour mon petit souci c'est que je souhaiterais coder une ligne pour donner le résultat suivant:
- Lorsque je clique sur l'image miniature a droite de ma page, une image associée s'affiche dans la partie gauche (ca c'est bon j'y arrive)... par contre la ou ca se corse un peu c'est que j'aimerais que l'image affichée a gauche soit cliquable avec une adresse url.
ci-dessous le code:
<div class="imgPreview"> <img id="currentImg" // les images agrandies
src="images/Imggrande00.jpg" /> </div> // première image par défault
<div class="imgThumbs">
<ul>
<li style="padding: 0pt;"><a
onclick="showImage('Imggrande00.jpg');"><img
style="border: 0px solid ; width: 140px; height: 68px;" alt=""
src="images/th00.jpg" /></a></li>
<li><a href="#"
onclick="showImage('Imggrande01.jpg');"><img
src="images/th01.jpg" /></a></li>
<li><a href="#" onclick="showImage('Imggrande02.jpg');"><img
src="images/th02.jpg" /></a></li>
<li><a href="#" onclick="showImage('Imggrande03.jpg');"><img
src="images/th03.jpg" /></a></li>
<li><a href="#" onclick="showImage('Imggrande04.jpg');"><img
src="images/th04.jpg" /></a></li>
<li><a href="#"
onclick="showImage('Imggrande05.jpg');"><img
src="images/th05.jpg" /></a></li>
</ul>
</div>
</div>
Merci bcp pour votre aide.
A voir également:
- Souci codage Html
- Codage ascii - Guide
- Editeur html - Télécharger - HTML
- Codage binaire - Guide
- Br html ✓ - Forum Webmastering
- Espace html ✓ - Forum HTML
8 réponses
bonjour,
je suppose, puisque tu ne l'as pas posté, que tu effectue le changement d'image via un javascript. Celui-ci modifie l'attribut "src" de ta balise <img />. Il suffit que tu ajoute un lien, comme ça :
<div class="imgPreview"><a href="TON_LIEN" id="currentImgLien"> <img id="currentImg" // les images agrandies
src="images/Imggrande00.jpg" /></a> </div> // première image par défault
Ensuite à ton script qui modifie la propriété src de img tu ajoutes une modification de href pour la balise a.
Je pense que cela devrait suffire. ;)
je suppose, puisque tu ne l'as pas posté, que tu effectue le changement d'image via un javascript. Celui-ci modifie l'attribut "src" de ta balise <img />. Il suffit que tu ajoute un lien, comme ça :
<div class="imgPreview"><a href="TON_LIEN" id="currentImgLien"> <img id="currentImg" // les images agrandies
src="images/Imggrande00.jpg" /></a> </div> // première image par défault
Ensuite à ton script qui modifie la propriété src de img tu ajoutes une modification de href pour la balise a.
Je pense que cela devrait suffire. ;)
A mon avis, tu n'as pas utilisé les bons mots clef dans ta recherche ^^
Regarde du coté des images cliquables, tu trouveras tout ce qu'il te faut.
Mais le plus simple est d'utiliser the gimp ( gratuit )
Il te permet d'éditer ton image et de mettre des liens cliquables. Ensuite il génerera la code html qui fera que l'image sera cliquable.
Voila un tuto qui explique la marche à suivre pour faire un lien dans une carte, tu fais pareil mais avec ton image ;)
http://www.infetech.com/article.php3?id_article=159
Les forum sont faits pour trouver des réponses mais les moteurs de recherche aussi.
Regarde du coté des images cliquables, tu trouveras tout ce qu'il te faut.
Mais le plus simple est d'utiliser the gimp ( gratuit )
Il te permet d'éditer ton image et de mettre des liens cliquables. Ensuite il génerera la code html qui fera que l'image sera cliquable.
Voila un tuto qui explique la marche à suivre pour faire un lien dans une carte, tu fais pareil mais avec ton image ;)
http://www.infetech.com/article.php3?id_article=159
Les forum sont faits pour trouver des réponses mais les moteurs de recherche aussi.
Il va juste me generer un code pour chaque image mais cela ne me dis pas comment faire de sorte que le lien change en fonction de l'image affichée...
Comme le lien va avec l'image, si l'image change, le lien change aussi.
Mais enfait, il faut enregistrer l'image avec les liens dans gimp sous format html ensuite tu prends le code de la page que tu insère dans ta page ( c'est ce qui est inscrit dans le tuto ).
Le code de gimp est surtout quand se sont des zones cliquables. Sinon je crois que si tu mets dans ta balise img un href + ton lien, ca devrait aller.
Mais enfait, il faut enregistrer l'image avec les liens dans gimp sous format html ensuite tu prends le code de la page que tu insère dans ta page ( c'est ce qui est inscrit dans le tuto ).
Le code de gimp est surtout quand se sont des zones cliquables. Sinon je crois que si tu mets dans ta balise img un href + ton lien, ca devrait aller.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
salut salut,
Dsl pour ce retard dans me réponse...
katsuo49 je te remercie pour la réponse. toutefois qu'entend tu lorsque tu mets
"Ensuite à ton script qui modifie la propriété src de img tu ajoutes une modification de href pour la balise a. "
A quel endroit je dois modifier le script?
en fait au total j'ai 6 images qui ont un lien différent. je dois mettre une condition de quel type?
merci
Dsl pour ce retard dans me réponse...
katsuo49 je te remercie pour la réponse. toutefois qu'entend tu lorsque tu mets
"Ensuite à ton script qui modifie la propriété src de img tu ajoutes une modification de href pour la balise a. "
A quel endroit je dois modifier le script?
en fait au total j'ai 6 images qui ont un lien différent. je dois mettre une condition de quel type?
merci
si tu postes ton script je pourrais sûrement de dire précisément comment modifié.
Pas besoin d'ajouter de condition, si tu arrives à changer d'image en cliquant sur tes miniatures c'est que ton script fonctionne. Il te suffit normalement d'ajouter une ligne ou deux et c'est bon.
Par exemple : transforme onclick="showImage('Imggrande00.jpg');"
en onclick="showImage('Imggrande00.jpg', 'TON_LIEN');"
Il te suffit de traiter ton nouvel argument dans ton script en javascript.
Après modifier un lien n'est pas plus compliqué que de modifier l'emplacement d'une image.
Si tu ne vois vraiment pas comment faire, postes ton javascript.
Pas besoin d'ajouter de condition, si tu arrives à changer d'image en cliquant sur tes miniatures c'est que ton script fonctionne. Il te suffit normalement d'ajouter une ligne ou deux et c'est bon.
Par exemple : transforme onclick="showImage('Imggrande00.jpg');"
en onclick="showImage('Imggrande00.jpg', 'TON_LIEN');"
Il te suffit de traiter ton nouvel argument dans ton script en javascript.
Après modifier un lien n'est pas plus compliqué que de modifier l'emplacement d'une image.
Si tu ne vois vraiment pas comment faire, postes ton javascript.
Donc si j'ai bien saisi c'est ici qu'il faut que je déclare l'argument 'TON_LIEN' ?
<script type="text/javascript">
function showImage(imgName) {
var curImage = document.getElementById('currentImg');
var thePath = 'images/';
var theSource = thePath + imgName;
curImage.src = theSource;
}
</script>
<script type="text/javascript">
function showImage(imgName) {
var curImage = document.getElementById('currentImg');
var thePath = 'images/';
var theSource = thePath + imgName;
curImage.src = theSource;
}
</script>
la partie html modifié :
<div class="imgPreview"><a href="TON_LIEN" id="currentImgLien"> <img id="currentImg" // les images agrandies
src="images/Imggrande00.jpg" /></a> </div>
le script modifié :
<script type="text/javascript">
function showImage(imgName, imgLien) {
var curImage = document.getElementById('currentImg');
var curImageLien = document.getElementById('currentImgLien');
var thePath = 'images/';
var theSource = thePath + imgName;
curImage.src = theSource;
curImageLien.href = imgLien;
}
</script>
Ensuite comme tu le faisais pour définir le nom de l'image, tu ajoutes le lien. Normalement tu as juste à copier/coller, ça devrait fonctionner. Bien sûr en faisant comme tu l'as fait pour l'emplacement de l'image tu peux définir un lien relatif, ou laisser tels quel pour un lien absolu.
<div class="imgPreview"><a href="TON_LIEN" id="currentImgLien"> <img id="currentImg" // les images agrandies
src="images/Imggrande00.jpg" /></a> </div>
le script modifié :
<script type="text/javascript">
function showImage(imgName, imgLien) {
var curImage = document.getElementById('currentImg');
var curImageLien = document.getElementById('currentImgLien');
var thePath = 'images/';
var theSource = thePath + imgName;
curImage.src = theSource;
curImageLien.href = imgLien;
}
</script>
Ensuite comme tu le faisais pour définir le nom de l'image, tu ajoutes le lien. Normalement tu as juste à copier/coller, ça devrait fonctionner. Bien sûr en faisant comme tu l'as fait pour l'emplacement de l'image tu peux définir un lien relatif, ou laisser tels quel pour un lien absolu.
