Changer image en JS
Résolu/Fermé
halima15
Messages postés
167
Date d'inscription
dimanche 15 novembre 2009
Statut
Membre
Dernière intervention
21 avril 2010
-
7 févr. 2010 à 19:21
artragis Messages postés 481 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 6 avril 2010 - 8 févr. 2010 à 17:14
artragis Messages postés 481 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 6 avril 2010 - 8 févr. 2010 à 17:14
A voir également:
- Changer image en JS
- Changer dns - Guide
- Piratage facebook changer mot de passe - Guide
- Changer clavier qwerty en azerty - Guide
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
3 réponses
artragis
Messages postés
481
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
6 avril 2010
146
7 févr. 2010 à 19:43
7 févr. 2010 à 19:43
tu veux faire un rollover, tu en as plusieurs type : les lourds, les fréquents bien écrits et les légers bien butors
mais surtout aujourd'hui il existe une technique simple : le CSS
avec le css voila ce que ça donne : code en deux partie :
1 le HTML
comme je l'ai mis il suffit d'une image à fond transparent
2Le CSS
avec un JS je te mets un code bien butor mais très léger, le but étant de te dégouter de cette solution :
mais surtout aujourd'hui il existe une technique simple : le CSS
avec le css voila ce que ça donne : code en deux partie :
1 le HTML
<img src="image_fond_transparent.gif" id="id_image_rollover"/>
comme je l'ai mis il suffit d'une image à fond transparent
2Le CSS
#id_image_rollover{
background-image:url('image_que_tu_veux_afficher');
}
#id_image_rollover:hover{//on met l'élément ":hover" pour dire "au passage de la souris"
background-image:('image_de_remplacement');
}
avec un JS je te mets un code bien butor mais très léger, le but étant de te dégouter de cette solution :
<img id="id_image_rollover" src="premiere_image" onmouseover="document.getElementById('id_image_rollover').src='image_remplacement.png'"/>
halima15
Messages postés
167
Date d'inscription
dimanche 15 novembre 2009
Statut
Membre
Dernière intervention
21 avril 2010
10
7 févr. 2010 à 20:15
7 févr. 2010 à 20:15
Voilà j'ai trouvé la solution
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function changerImage() {
var k=Math.floor(Math.random()*4);
switch(k) {
case 0:document.getElementById('image').src="Chaimaa.jpg";break
case 1:document.getElementById('image').src="Ilhame.jpg";break
case 2:document.getElementById('image').src="aya.jpg";break
case 3:document.getElementById('image').src="Imane.jpg";break
}
}
//-->
</script>
</head>
<body>
<a href="#" onmouseover="changerImage()">Cliquez ici pour changer l'image</a><br>
<img src="aya.jpg" width=100 height=100 id="image"></img>
</body>
</html>
et Bonne chance à vous tous:)
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function changerImage() {
var k=Math.floor(Math.random()*4);
switch(k) {
case 0:document.getElementById('image').src="Chaimaa.jpg";break
case 1:document.getElementById('image').src="Ilhame.jpg";break
case 2:document.getElementById('image').src="aya.jpg";break
case 3:document.getElementById('image').src="Imane.jpg";break
}
}
//-->
</script>
</head>
<body>
<a href="#" onmouseover="changerImage()">Cliquez ici pour changer l'image</a><br>
<img src="aya.jpg" width=100 height=100 id="image"></img>
</body>
</html>
et Bonne chance à vous tous:)
halima15
Messages postés
167
Date d'inscription
dimanche 15 novembre 2009
Statut
Membre
Dernière intervention
21 avril 2010
10
7 févr. 2010 à 21:27
7 févr. 2010 à 21:27
tu sait j'ai un autre probleme
je veux faire une liste déroulante qui porte les noms des images ,
et quand l'utilisateur selectionne un nom l'image s'affiche
et le meme probleme je veux qui'il s'affichage dans la même page et pas dans une autre
voilà ce que j'ai fait et ça marche pas
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function afficherImage() {
for(var i=0;i<document.formulaire.image.length;++i)
if(document.formulaire.image.options[i].selected == true)
document.formulaire.getElementById('image').src=document.formulaire.image.options[i].value;
}
//-->
</script>
</head>
<body onload="afficherImage()">
<form name="formulaire">
<select name="image"><option value="chaimaa.jpg">Chaimaa<option value="aya.jpg">Aya<option value="Imane.jpg">Imane<option value="ilham.jpg">Ilham</select>
<img src="chaimaa.jpg" id="image" width=100 height=100>
</form>
</body>
</html>
pouvez vous me donner la solution ou mon erreur
je veux faire une liste déroulante qui porte les noms des images ,
et quand l'utilisateur selectionne un nom l'image s'affiche
et le meme probleme je veux qui'il s'affichage dans la même page et pas dans une autre
voilà ce que j'ai fait et ça marche pas
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function afficherImage() {
for(var i=0;i<document.formulaire.image.length;++i)
if(document.formulaire.image.options[i].selected == true)
document.formulaire.getElementById('image').src=document.formulaire.image.options[i].value;
}
//-->
</script>
</head>
<body onload="afficherImage()">
<form name="formulaire">
<select name="image"><option value="chaimaa.jpg">Chaimaa<option value="aya.jpg">Aya<option value="Imane.jpg">Imane<option value="ilham.jpg">Ilham</select>
<img src="chaimaa.jpg" id="image" width=100 height=100>
</form>
</body>
</html>
pouvez vous me donner la solution ou mon erreur
artragis
Messages postés
481
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
6 avril 2010
146
>
halima15
Messages postés
167
Date d'inscription
dimanche 15 novembre 2009
Statut
Membre
Dernière intervention
21 avril 2010
8 févr. 2010 à 17:14
8 févr. 2010 à 17:14
alors je connais plus le code exact mais les options sont assez complexe il faut que tu ailles voir sur le net mais c'est ton "option[i]" qui va pas... il y a des choses à mettre entre crochet.
artragis
Messages postés
481
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
6 avril 2010
146
7 févr. 2010 à 20:26
7 févr. 2010 à 20:26
ha tu voulais faire une permutation aléatoire. sinon c'est ce que je t'avais dit non?
par contre il est inutile de mettre un lien, c'est lourd et ça change rien.
par contre il est inutile de mettre un lien, c'est lourd et ça change rien.
