Changer image principale au survol de liens
metis15
Messages postés
465
Date d'inscription
Statut
Membre
Dernière intervention
-
metis15 Messages postés 465 Date d'inscription Statut Membre Dernière intervention -
metis15 Messages postés 465 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je cherche ceci :
Soit une grande image principale
+ une série de petites vignettes
Il me faut qu'au survol des vignettes, celle-ci s'affiche en grand à la place de la grande image.
Au détour d'une discussion, j'ai trouvé ce code mais je n'ai pas la source :
Dans le head :
Dans le body :
(pour les 3 dernières, mettre une taille réduite qui va bien)
QUESTION :
Ca marche bien, mais je n'ai pas trouvé de solution élégante pour reproduire ce fonctionnement sur plusieurs séries d'images, sauf en reproduisant le script avec des mainimg2 et othimg2, 3, etc.
Ca marche avec plusieurs séries, mais c'est lourdingue.
Une idée pour faire mieux ?
(je précise que je ne connais pas grand chose au codage, chui trop vieux, je ne m'y ferai jamais(;o)))
Je cherche ceci :
Soit une grande image principale
+ une série de petites vignettes
Il me faut qu'au survol des vignettes, celle-ci s'affiche en grand à la place de la grande image.
Au détour d'une discussion, j'ai trouvé ce code mais je n'ai pas la source :
Dans le head :
<script src='jquery-1.8.3.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
main = $(".mainimg").attr("src");
$(".othimg").fadeTo("slow", 0.3); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".othimg").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
newSrc = $(this).attr("src");
$(".mainimg").attr("src",newSrc);
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});
</script>
Dans le body :
<img src="image1.jpg" class="mainimg" />
<img src="image1.jpg" class="othimg" />
<img src="image2.jpg" class="othimg" />
<img src="image3.jpg" class="othimg" />
(pour les 3 dernières, mettre une taille réduite qui va bien)
QUESTION :
Ca marche bien, mais je n'ai pas trouvé de solution élégante pour reproduire ce fonctionnement sur plusieurs séries d'images, sauf en reproduisant le script avec des mainimg2 et othimg2, 3, etc.
Ca marche avec plusieurs séries, mais c'est lourdingue.
Une idée pour faire mieux ?
(je précise que je ne connais pas grand chose au codage, chui trop vieux, je ne m'y ferai jamais(;o)))
A voir également:
- Changer image principale au survol de liens
- Changer dns - Guide
- Changer de carte graphique - Guide
- Vérificateur de liens - Guide
- Image iso - Guide
- Changer wifi chromecast - Guide
5 réponses
Bonjour
voila un truc moins lourd
le html
<script language="JavaScript" type="text/javascript">
function AFFICHE(mon_texte){
document.getElementById('resultat').innerHTML ="<img src='" + mon_texte + "'/>";
}
</script>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('image1.jpg');" onmouseout="javascript:AFFICHE('image1.jpg');"><img src="image1.jpg" /></a></div>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('image2.jpg');" onmouseout="javascript:AFFICHE('image2.jpg');"><img src="image2.jpg" /></a></div>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('image3.jpg');" onmouseout="javascript:AFFICHE('image3.jpg');"><img src="image3.jpg" /></a></div>
<div id="resultat"><img src="image1.jpg" /></div>
le CSS
.vignette {
margin: 0;
width:100px;
display:inline-block;
}
.vignette img {
width: 100%;
}
#resultat {
margin: 20px auto;
width:auto;
height: auto;
}
sinon il y a des diaporama jquery qui te font ca
http://www.guillaumevoisin.fr/jquery/jdiaporama-v3-le-diaporama-jquery-est-de-retour
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
voila un truc moins lourd
le html
<script language="JavaScript" type="text/javascript">
function AFFICHE(mon_texte){
document.getElementById('resultat').innerHTML ="<img src='" + mon_texte + "'/>";
}
</script>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('image1.jpg');" onmouseout="javascript:AFFICHE('image1.jpg');"><img src="image1.jpg" /></a></div>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('image2.jpg');" onmouseout="javascript:AFFICHE('image2.jpg');"><img src="image2.jpg" /></a></div>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('image3.jpg');" onmouseout="javascript:AFFICHE('image3.jpg');"><img src="image3.jpg" /></a></div>
<div id="resultat"><img src="image1.jpg" /></div>
le CSS
.vignette {
margin: 0;
width:100px;
display:inline-block;
}
.vignette img {
width: 100%;
}
#resultat {
margin: 20px auto;
width:auto;
height: auto;
}
sinon il y a des diaporama jquery qui te font ca
http://www.guillaumevoisin.fr/jquery/jdiaporama-v3-le-diaporama-jquery-est-de-retour
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
OK pour le script que je viens d'essayer.
Ca marche pour une grande image et des vignettes.
Mais ça ne fait pas ce que je cherche à obtenir.
Il faut que je fasse marcher ça sur plusieurs séries d'images différentes.
(plusieurs grandes et la série de vignettes correspondantes)
Là, chaque paquet de vignettes ne change que dans la fenêtre de la première grande :
<div id="resultat"><img src="images/imageA1.jpg" /></div>
Doit y avoir un truc avec l'ID, mais je ne suis pas très dégourdi avec le codage...(;o)))
Ca marche pour une grande image et des vignettes.
Mais ça ne fait pas ce que je cherche à obtenir.
Il faut que je fasse marcher ça sur plusieurs séries d'images différentes.
(plusieurs grandes et la série de vignettes correspondantes)
Là, chaque paquet de vignettes ne change que dans la fenêtre de la première grande :
<div id="resultat"><img src="images/imageA1.jpg" /></div>
Doit y avoir un truc avec l'ID, mais je ne suis pas très dégourdi avec le codage...(;o)))
le script fait exactement ce que tu as demandé
"Bonjour,
Je cherche ceci :
Soit une grande image principale
+ une série de petites vignettes
Il me faut qu'au survol des vignettes, celle-ci s'affiche en grand à la place de la grande image. "
de plus pas besoin de faire des vignettes en plus
bon si tu veux du travail supplémentaire et faire des vignettes en plus
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('grandeimage1.jpg');" onmouseout="javascript:AFFICHE('grandeimage1.jpg');"><img src="vignetteimage1.jpg" /></a></div>
"Bonjour,
Je cherche ceci :
Soit une grande image principale
+ une série de petites vignettes
Il me faut qu'au survol des vignettes, celle-ci s'affiche en grand à la place de la grande image. "
de plus pas besoin de faire des vignettes en plus
bon si tu veux du travail supplémentaire et faire des vignettes en plus
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('grandeimage1.jpg');" onmouseout="javascript:AFFICHE('grandeimage1.jpg');"><img src="vignetteimage1.jpg" /></a></div>
Oui, le script fait ce que je souhaite, pour une grande image et ses vignettes.
Mais je cherche à avoir plusieurs fois ce script dans une même page (sur d'autres séries d'images).
C'est là où ça ne marche plus...
Ceci dit, merci pour ton aide. (;o))
Mais je cherche à avoir plusieurs fois ce script dans une même page (sur d'autres séries d'images).
C'est là où ça ne marche plus...
Ceci dit, merci pour ton aide. (;o))
Il faut juste faire autant de fonction qu'il y a de serie d'image en changeant l'id de la div d'affichage et le nom de la fonction
exemple la meme fonction mais sur une ID différente et un nom e fonction différent (en gras ce qui change)
la fonction
function AFFICHE1(mon_texte){
document.getElementById('resultat1').innerHTML ="<img src='" + mon_texte + "'/>";
affichage de la vignette et appel de la fonction
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE1('grandeimage1.jpg');" onmouseout="javascript:AFFICHE1('grandeimage1.jpg');"><img src="vignetteimage1.jpg" /></a></div>
la div affichant l'image
<div id="resultat1"><img src="image1.jpg" /></div>
le css
#resultat, #resultat1, #resultat2 {
margin: 20px auto;
width:auto;
height: auto;
}
exemple la meme fonction mais sur une ID différente et un nom e fonction différent (en gras ce qui change)
la fonction
function AFFICHE1(mon_texte){
document.getElementById('resultat1').innerHTML ="<img src='" + mon_texte + "'/>";
affichage de la vignette et appel de la fonction
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE1('grandeimage1.jpg');" onmouseout="javascript:AFFICHE1('grandeimage1.jpg');"><img src="vignetteimage1.jpg" /></a></div>
la div affichant l'image
<div id="resultat1"><img src="image1.jpg" /></div>
le css
#resultat, #resultat1, #resultat2 {
margin: 20px auto;
width:auto;
height: auto;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ah oui, comme ça marche !
J'espérais qu'on allait pouvoir trouver un truc pour ne pas avoir à répéter la définition de la fonction, mais ça semble impossible.
Il faut bien cibler l'image qui est concernée par le script...
Donc plus simple, on ne peut pas.
Là, on est dans du JS.
L'exemple que je donne au début est basé sur jquery.
Les effets de "fade" sont assez chouettes.
J'ai testé en répétant le script autant de fois qu'il y a une grande image dans la page, ça marche aussi.
Le script est plus long à cause des "fade", c'est donc assez lourd.
Je pensais à une solution où des parties de script pouvaient être communes.
Mais je ne suis pas capable d'écrire ça.
Cependant, merci pour ton aide.
J'espérais qu'on allait pouvoir trouver un truc pour ne pas avoir à répéter la définition de la fonction, mais ça semble impossible.
Il faut bien cibler l'image qui est concernée par le script...
Donc plus simple, on ne peut pas.
Là, on est dans du JS.
L'exemple que je donne au début est basé sur jquery.
Les effets de "fade" sont assez chouettes.
J'ai testé en répétant le script autant de fois qu'il y a une grande image dans la page, ça marche aussi.
Le script est plus long à cause des "fade", c'est donc assez lourd.
Je pensais à une solution où des parties de script pouvaient être communes.
Mais je ne suis pas capable d'écrire ça.
Cependant, merci pour ton aide.