A voir également:
- Modifier une image au survole d'une autre
- Modifier dns - Guide
- Modifier une liste déroulante excel - Guide
- Modifier une story facebook - Guide
- Légender une image - Guide
- Créer une image iso - Guide
6 réponses
Un autre code éventuellement :
Le code affiche 2 images différentes et au survol de la première effectue un changement de la seconde (une sorte de "hover") dans le "div" correspondant puis ré-affiche l'image d'origine quand on quitte le "survol" de la première image.
Pour en afficher plusieurs, il faut changer le numéro dans la partie javascript:AFFICHE('image2.png','6') et idem pour la "div" <div id="toto_6">
Exemple :
<script type="text/javascript">
function AFFICHE(image,id){
document.getElementById('toto_'+id).innerHTML = '<img src="'+image+'"/>';
}
</script>
<img src="image1.png" onmouseover="javascript:AFFICHE('image2.png','1');" onmouseout="javascript:AFFICHE('image1.png','1');" />
<div id="toto_1">
<img src="image1.png" />
</div>
Le code affiche 2 images différentes et au survol de la première effectue un changement de la seconde (une sorte de "hover") dans le "div" correspondant puis ré-affiche l'image d'origine quand on quitte le "survol" de la première image.
Pour en afficher plusieurs, il faut changer le numéro dans la partie javascript:AFFICHE('image2.png','6') et idem pour la "div" <div id="toto_6">
Exemple :
<img src="line.png" onmouseover="javascript:AFFICHE('corners.png','1');" onmouseout="javascript:AFFICHE('line.png','1');" />
<div id="toto_1">
<img src="line.png" />
</div>
<img src="line1.png" onmouseover="javascript:AFFICHE('corners1.png','2');" onmouseout="javascript:AFFICHE('line1.png','2');" />
<div id="toto_2">
<img src="line1.png" />
</div>
Salut,
Il y a du choix ... au plus simple je dirais d'utiliser l'élément "hover" en CSS ou alors d'utiliser du Javascript.
Il y a du choix ... au plus simple je dirais d'utiliser l'élément "hover" en CSS ou alors d'utiliser du Javascript.
Salut
Ton index (en gros ^^):
img.js
En gros un truc du genre, c'est un peu rapide mais après a toi de faire comme bon te semble !
j'ai utiliser jquery, pour plus d'info:
https://jquery.com/
J'ai pas tester mais comme je t'ai dis c'est juste un guide, si tu comprend pas ou qu'il y a une erreur n'hésite pas a reposter.
Bye
Ton index (en gros ^^):
<html>
<head><title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="img.js"></script>
</head>
<body>
<img src="source1" alt="source1" title="source1" class="img" />
<img src="source2" alt="source2" title="source2" class="img" />
</body>
</html>
img.js
jQuery(function($){
img.init();
}
var img = {
init: function(){
$(".img").click(function(){
$(".img").animate({"width" : "160px", "height" : "90px"}, 500);
$(this).delay(500).animate({"width" : "320px", "height" : "180px"}, 500);
});
}
}
En gros un truc du genre, c'est un peu rapide mais après a toi de faire comme bon te semble !
j'ai utiliser jquery, pour plus d'info:
https://jquery.com/
J'ai pas tester mais comme je t'ai dis c'est juste un guide, si tu comprend pas ou qu'il y a une erreur n'hésite pas a reposter.
Bye
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question