débutante en Javascript insertions d'images

Sujet résolu

15 novembre 2008 à 18:28:55

Bonjour,

Voilà, je débute en Java script, je voudrais en faite que mon image change lorsque je passe la souris dessus. J'ai donc ce script :

<html>
 <head>
 </head>
 <body>
  <script type="text/javascript">
  <!--
  
  document.write('essai');
 var mon_image = new Image();
mon_image.src = '/mon_image.PNG';
var mon_image2 = new Image();
mon_image2.src = 'mon_image2.PNG';

document.write('<img alt="" src="'+mon_image.src+'" onmouseover="this.src=\''+mon_image2.src+'\'" onmouseout="this.src=\''+mon_image.src+'\'"/>');

  //-->
  </script>
 </body>
</html>

Seulement je ne sais par comment "relier" mes images pour les faire apparaitre; a quoi correspond ".PNG", ".src"... ? Mes images sont en bmp .

Merci d'avance.

smilz

15 novembre 2008 à 18:41:55

Déjà, oublie le BMP pour des sites, c'est un format très lourd. Pour convertir tes fichiers, ouvre les dans paint et enregistre en ".png".

Relis ce tuto, toute les réponses sont dedans (en faite, il faut que tu révises ton xHTML

) ! http://www.siteduzero.com/tutoriel-3-1 [...] tml#ss_part_1 .
Normalement y a tout dedans, et rien ne sert de créer un objet Image() pour ton script, fais simplement :
<img alt="" src="image.png" onmouseover="this.src = 'image2.png'" onmouseout="this.src = 'image.png'" />
pas besoin de balise script.

Laurette_B

15 novembre 2008 à 18:55:35

Merci, j'ai donc transformé mes images dans le bon format. Pour faire simple , j'ai enregistrer ma page .html sur mon bureau et mes 2 images également. J'ai donc remplacer par le nom de mes images, mais sa ne marche toujours pas le navigateur m'affiche une croix rouge.
voici mon script :

<html>
 <head>
 </head>
 <body>
 
<img alt="" src="vertf.png" onmouseover="this.src = 'vertc.png'" onmouseout="this.src = 'vertf.png'" />

  </script>
 </body>
</html>

Merci

smilz

15 novembre 2008 à 19:02:08

Fais attention, paint a tendance à mettre les extension (.png) en majuscules, vérifie qu'elles ne le sont pas. (sinon tu as juste à les renommer).

Afficher les extensions des fichiers sous windows.

Laurette_B

15 novembre 2008 à 19:05:44

Bah déjà j'ai pas paint en faite

je l'ai perdu ya des années

...
Mais j'ai fait ça avec un autre logiciel et je viens de m'apercevoir que quand je lui demande de les convertir en .png il me les mets en .tga et ... je sais pas pourquoi, du cou j'ai essayer dans mon script avec .tga et là non + pas de résultat...

angelus76

15 novembre 2008 à 19:12:53

.tga c'est du targa non ?
je pensse pas que les navigateur supporte l'extention :s

tu utilise quoi ? dxtbmp ?

de plus je comprend pas ton utilisation de l'objet images
pourquoi ne pas utilisé
getElementById()
getElementsByName()
ou encore
getElementsByTagName()

puis innerHTML

bon mtn tu fait juste un effet au survole de la sourie
donc tu peux meme te passer de fair une fonction pour fair apparaitre une image differente au survole

Laurette_B

15 novembre 2008 à 19:18:52

Ouff c'est bon j'ai enfin réussi...

ça c'est fait merci a vous !!
Maintenant je vais en profiter pour vous poser une autre petite question :
là dès que je passe ma souris sur l'image, celle ci change(de couleur en fait) et comment je pourrait faire le plus simplement possible pour que lorsque je survol l'image un son est joué ?

smilz

15 novembre 2008 à 19:31:47

Le son c'est vraiment galère (enfin pas tant) et pas très recommandé

(j'écoute souvent de la musique quand je suis sur internet)

Laurette_B

15 novembre 2008 à 19:39:44

oui, je sais bien ... mais s serrai juste un petit son en faite ...
Une idée pour un script simple ?

askerat

15 novembre 2008 à 22:05:27

Citation : angelus76

.tga c'est du targa non ?
je pensse pas que les navigateur supporte l'extention :s

tu utilise quoi ? dxtbmp ?

de plus je comprend pas ton utilisation de l'objet images
pourquoi ne pas utilisé
getElementById()
getElementsByName()
ou encore
getElementsByTagName()

puis innerHTML

bon mtn tu fait juste un effet au survole de la sourie
donc tu peux meme te passer de fair une fonction pour fair apparaitre une image differente au survole

Remarque, il y a même appendChild() sinon, qui est bien plus propre qu'un innerHTML, surtout lorsqu'on passe par un constructeur de l'Element Image. Pourquoi faire un new Image(), si c'est pour ne garder que son attribut src. Autant faire un var src = ...;. Car là les new Image() dans le code ne servent strictement à rien. Le plus simple, serait tout simplement de ne créer qu'une image, celle de base dans le html, ou php, java, asp autre .. Puis sur le onmouseover, changer juste l'attribut src. Sinon, si tu compte ajouter ton image dynamiquement là le new Image() se justifie, mais passer par un new Image(), veut dire que tu utilises ton objet Image. C'est pas juste une structure, ça représente vraiment ton élément html. Donc tu peux l'utiliser de cette facon par exemple :

document.getElementById("id").appendChild(mon_image);

Pour changer l'image, tu fais :

document.getElementById("id").removeChild(mon_image);
document.getElementById("id").appendChild(mon_image2);

Laurette_B

16 novembre 2008 à 0:07:52

D'accord j'essaierais de faire sa plus proprement !
Merci a vous tous