A voir également:
- OnMouseOver pour changer une image distante
- Changer dns - Guide
- Image iso - Guide
- Changer clavier qwerty en azerty - Guide
- Comment agrandir une image - Guide
- Changer carte graphique - Guide
2 réponses
epitale
Messages postés
3943
Date d'inscription
jeudi 5 février 2009
Statut
Membre
Dernière intervention
27 octobre 2017
915
12 mars 2013 à 12:13
12 mars 2013 à 12:13
bonjour GérardMaire
si tu n'utilises pas jquery ajoute dans ton <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
après tu peux faire quelque chose du genre :
<p>c'est un <span id="img1" class="mot_img">texte</span> assez des <span id="img2" class="mot_img">mots</span> qui font apparaitre des <span id="img3" class="mot_img">images </span></p>
<div id="case_image"></div>
<script>
$('.mot_img').mouseover(function() {
var image=$(this).attr('id');
$('#case_image').html('<img src=images/'+image+'.jpg />');
});
</script>
pour le css
<style>
.mot_img{
cursor:pointer;
color:#0099FF;
}
#case_image et #case_image img devront aussi surement avoir leur css pour s'adapter
</style>
tes images doivent être les plus légère possible au risque de faire moche lors de leur apparition, ou bien les faire apparaitre une fois charger genre : a la place de $('#case_image').html()
$('#case_image img').animate({opacity: '0'}, 'slow', function(){
$("#case_image img").one("load", function() {
$('#case_image img').animate({opacity: '1'}, 'slow');
}).attr("src", 'images/'+image+'.jpg');
});
--
si tu n'utilises pas jquery ajoute dans ton <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
après tu peux faire quelque chose du genre :
<p>c'est un <span id="img1" class="mot_img">texte</span> assez des <span id="img2" class="mot_img">mots</span> qui font apparaitre des <span id="img3" class="mot_img">images </span></p>
<div id="case_image"></div>
<script>
$('.mot_img').mouseover(function() {
var image=$(this).attr('id');
$('#case_image').html('<img src=images/'+image+'.jpg />');
});
</script>
pour le css
<style>
.mot_img{
cursor:pointer;
color:#0099FF;
}
#case_image et #case_image img devront aussi surement avoir leur css pour s'adapter
</style>
tes images doivent être les plus légère possible au risque de faire moche lors de leur apparition, ou bien les faire apparaitre une fois charger genre : a la place de $('#case_image').html()
$('#case_image img').animate({opacity: '0'}, 'slow', function(){
$("#case_image img").one("load", function() {
$('#case_image img').animate({opacity: '1'}, 'slow');
}).attr("src", 'images/'+image+'.jpg');
});
--
12 mars 2013 à 22:46
12 mars 2013 à 22:56
et puis c'est plus simple qu'en javascript pur