code javascript pour remplacer une image par une autre

[gdurieux]

Bonjour a tous,

Je voudrais que quand je clique sur une image cela la remplace par une autre.
Je pense que javascript peut le faire.
Donc après avoir inseré mon image originale, je clic sur "advanced edit" puis sur "javascript event".
A partir de la je choisis "onclick" dans la liste déroulante "attribute" mais ensuite je ne sais pas ce que je dois taper dans la ligne "value".

Ca doit être tout bête j'imagine. Si quelqu'un pouvait m'indiquer le texte a taper ce serait super.

Merci d'avance
Guillaume durieux

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

[veronica]

Bonjour à tous,
j'aimerai tant connaitre la réponse à ta question: j'ai le même problème que toi !
Je suppose qu'il faut donner le nom du fichier mais je viens de Frontpage
et je suis perdue avec NVU/Kompozer... De plus quand je veux sauver ma page html Kompozer me la met dans le dossier images... Mais il ne sait pas trouver les images dans le dit dossier... Suis perdue, j'èspère qu'on nous répondra...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8

[Mongo Bob]

est-ce que c'est ce genre de truc que vous voulez
(cliquer sur l'image du dvd)?
http://retourayuma.free.fr/duneuf.php#powell
ce n'est pas "remplacer", ça ouvre dans une nouvelle fenêtre...

[galad]

... De plus quand je veux sauver ma page html Kompozer me la met dans le dossier images... Mais il ne sait pas trouver les images dans le dit dossier... Suis perdue, j'èspère qu'on nous répondra...

Tu as essayé de faire Fichier -> enregistrer sous ?

[Ymai]

Bonjour
Je crois que la résolution de ce petit problème simple (?) passe par une maîtrise suffisante de Javascript et de CSS.
Cela a été discuté là, par exemple:
http://forum.alsacreations.com/topic-1- ... image.html
Il y aurait sans doute moyen d'être un peu plus précis, mais je pense qu'il n'y a pas de solution "simple" où trois mots magiques suffisent...
Pour des réponses plus substantielles, j'irais voir sur le forum "développement web", juste à côté. Il y a là quelques maousses dans le domaine qui peuvent sans doute vulgariser.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Ubuntu/7.10 (gutsy) Firefox/2.0.0.8

[veronica]

Bonsoir,
Merci Mongo Bob, galad et Ymai !
Je vais aller voir le forum d'à coté dont tu parles...

je me suis mal expliquée pour le point concernant la sauvegarde
des fichiers: c'est quand je veux voir la page sur le navigateur
que Kompozer la déplace / la sauve dans le fichier images...
C'est agaçant ! Il propose "déplacer" à chaque fois que je veux
accéder au navigateur, pourquoi ? Un moyen pour qu'il sauve
la page où elle est et les images dans le fichiers "images" ?

En ce qui concerne le javascript, les solutions proposées sont bien
compliquées pour une novice comme moi... De plus dans "l'Editeur
Avancé des propriétés" (clic droit sur une image) il y a "évenements javascripts".
Serait-ce pour faire joli ?
J'aimerai bien l'utiliser moa...
Quelqu'un saurait nous expliquer comment faire ?

J'ai envie de passer à Kompozer por avoir un code plus propre
(ais-je lu de ci de là) mais j'avance guère...
Merci d'avance !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8

[Ymai]

je me suis mal expliquée pour le point concernant la sauvegarde
des fichiers: c'est quand je veux voir la page sur le navigateur
que Kompozer la déplace / la sauve dans le fichier images...

J'avoue ne pas comprendre. Les images sont-elles bien enregistrées avant de passer dans le navigateur?
Une habitude classique est d'enregistrer toutes les images dans un sous-répertoire nommé... "images" du répertoire contenant les fichiers HTML. Quand le texte HTML et les images sont toutes enregistrées à leur place, il n'y a strictement aucune raison pour qu'un nouvel enregistrement ait lieu au moment de visualiser dans le navigateur.

C'est agaçant ! Il propose "déplacer" à chaque fois que je veux
accéder au navigateur, pourquoi ? Un moyen pour qu'il sauve
la page où elle est et les images dans le fichiers "images" ?

La situation est-elle semblable à celle de l'illustration au bas de la page http://info.sio2.be/kpz/1/3.php ?
Perso, je n'ai jamais eu de proposition "déplacée" de la part de KpZ. Donc, j'ai un problème pour comprendre...

En ce qui concerne le javascript, les solutions proposées sont bien
compliquées pour une novice comme moi... De plus dans "l'Editeur
Avancé des propriétés" (clic droit sur une image) il y a "évenements javascripts".
Serait-ce pour faire joli ?

Pas du tout. Mais il y a des "trucs" plus compliqués que d'autres.
Essaie, par exemple:

Code : Tout sélectionner

Attribut: onclick
Valeur: alert('Bonjour chez vous')

Malheureusement, pour le changement d'images, c'est un peu plus compliqué. Et je ne vois pas comment expliquer cela en 5 lignes... Ma tendance naturelle à m'étendre, sans doute.

J'ai envie de passer à Kompozer por avoir un code plus propre
(ais-je lu de ci de là) mais j'avance guère...

Le code le plus propre sera obtenu avec une page toute vide.
KpZ permettra de garder du code propre avec un peu plus que cela. Mais il est dépourvu des gadgets (souvent "sales") qui attirent parfois dans d'autres logiciels.
Rien à faire: il faut mettre un peu les mains dans le cambouis. Mais c'est, je crois, à la portée de l'honnête homme (et femme, n'en déplaise à Voltaire) d'aujourd'hui.


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Ubuntu/7.10 (gutsy) Firefox/2.0.0.8

[veronica]

Merci Ymai !
Il est super le tuto... Je crois que j'aurai du commencer par la...
Logique que Kpz ne retrouve pas mes images, je ne lui avais
pas donné de chemin dès le départ ! Faut te dire que j'utilise
Frontpage d'habitude où cela se fait automatiquement (la création
des différents dossiers...).
Bon je me mets au tuto et recommence tout depuis le début...
Pour en revenir au javascript proposé dans l'éditeur avancé des images,
je ne pense pas que ce soit compliqué, c'est juste que je ne connais
pas la syntaxe... Kpz propose "attribut" (onmouseover par exemple)
puis "valeur" c'est la ou je coince... Je suppose qu'il faut lui donner
le chemin de l'image remplacée (la nouvelle image), mais sous
quelle forme ?

Je continuerai mes recherches, ça se trouve dans le tuto que tu propose
cela sera dit !
Merci encore Ymai.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8

[Ymai]

Bonjour

. Je suppose qu'il faut lui donner
le chemin de l'image remplacée (la nouvelle image), mais sous
quelle forme ?

Ben non, c'est là que ça coince.
A cet endroit, il faut noter une instruction donnée en Javascript qui:
- recherche l'élément contenant l'image dans la page
- remplace le nom actuel de l'image par le nom de la nouvelle image
Comme il y a plusieurs choses à faire, il vaut mieux encapsuler tout cela dans une fonction Javascript donnée dans l'en-tête de la page (par exemple).

Si le problème concerne un nombre restreint d'images, on peut certainement aussi passer par un peu de CSS.
Je vais essayer de trouver quelques minutes dans la journée pour voir cela de plus près (sans promesse ferme).

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Ubuntu/7.10 (gutsy) Firefox/2.0.0.8

[Ymai]

Bon, voici une solution simple, avec plein de défauts. Mais ça fonctionne dans la plupart des cas.
Cliquer sur l'image.
http://sapajou.be/test.html
Ce qui donne:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      test
    </title>
<script language="javascript" type="text/javascript">
    function echanger (id, image2)
    {
    var toto = document.getElementById (id);
    toto.src="images/"+image2;
    }
</script>
  </head>
  <body>
    <img onclick='echanger(this.id, "Kompozer.png")' style="width: 80px; height: 15px;" id="monImage" alt="NVU" src=
    "images/FaitAvecNvu80x15fonce.png" name="monImage">
  </body>
</html>

Le secret réside dans la fonction Javascript "echanger".
Rien à faire, il faut écrire son texte avec ses dix doigts, quelque part dans l'entête du document, par exemple.

On insère l'image qui doit pouvoir être échangée.
On clique droit sur la balise <img> de la barre d'état > Propriétés avancées
Onglet "Attributs HTML"
> Attribut = id
> Valeur = monImage
Onglet "Événement Javascript"
> Attribut = onclick
> Valeur = echanger(this.id, "LeNomDeLAutreImage.ext")

"this.id" désigne l'identificateur (id) de l'objet actuellement actif: j'ai nommé l'image qui est cliquée.
"LeNomDeLAutreImage.ext" désigne le nom de la deuxième image, y compris son extension (revoir l'exemple)

La même fonction peut être utilisée pour basculer d'autres paires d'images dans la page. Le principe d'appel de la fonction javascript sera le même.
Attention, cela fonctionnera très mal avec des images assez grosses. Lorsque l'on clique, la deuxième image est téléchargée avant d'être affichée. D'où une latence qui sera souvent insupportable.
Je laisse à d'autres le soin d'indiquer les parades et / ou d'autres méthodes plus efficaces. Pas tirer toute la couverture à moi, quand même.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Ubuntu/7.10 (gutsy) Firefox/2.0.0.8

[Mongo Bob]

dans l'exemple ci-dessus (pas eu de réponse comme quoi c'est cet effet-là qui était recherché), à savoir :
http://retourayuma.free.fr/duneuf.php#powell
je mets rien dans l'en-tête mais dans le code html, un lien pointe en href sur la 2ème image, ce lien agit sur la 1ère image, c'est tous les autres attributs du lien, dont href, qui font le reste (les textes entre <!-- et --> sont des commentaires, pas du code à reprendre!):

Code : Tout sélectionner

<a href="2ème image" onclick=
          "window.open(this.href, 'nomdupopup<!--facultatif]'-->, 'height=600<!--hauteur de la 2ème image-->, width=400<!--largeur...-->, top=50<!--à tant de distance du bord supérieur"-->, left=50<!--idem(...)du bord gauche-->, toolbar=no<!--pas de barre d'outils-->, location=no<!--je sais plus-->, menubar=no<!--pas de barre de menus-->, resizable=no<!--pas redimensionnable-->, scrollbars=no<!--pas de scrollbar-->, status=no'<!--je sais pus-->); return false;<!--si tu mets pas ça, ça ouvre dans une nouvelle page, désolé, je suis un peu à la bourre-->">
          <img alt="description de la 1ère image" src="emplacement...." width="169"<!--largeur en pixels sans mention d'unité"-->a>

sans commentaire, les attributs de largeur etc... sont à adapter :

Code : Tout sélectionner

<a href="img/2emeimage.jpg" onclick=
          "window.open(this.href, 'nompopup', 'height=600, width=400, top=50, left=50, toolbar=no, location=no, menubar=no, resizable=no, scrollbars=no, status=no'); return false;">
          <img alt="descriptionimage" src="img/1ereimage.jpg" width="169"></a>

maintenant, je ne sais pas faire ça par l'interface de Kpz mais que en insérant dans le code (veronica, il faut un éditeur-texte).
La source est là (je me suis trompé sur la demande de praounette dans un autre post la dernière fois que je l'ai donnée, alors dites-moi si c'est bien ce que vous cherchiez, pour plus de précisions éventuelles!) :
http://openweb.eu.org/articles/popup/

[veronica]

Bonjour vous tous,
On avance... Vous êtes géniaux !

Pardon Mongo Bob, je pensai t'avoir répondu...
Ce n'est pas une fenêtre "pop up" que je cherche,
c'est mettre des vignettes qui appellent
des images en passant la souris dessus, tu sais une sorte
de menu pour une galerie d'images. Je fais un site pour
des architectes et j'ai environ 30 projets d'archi (pour commencer)
à mettre en ligne... Pour cela je ne voulais pas entrer dans l'écriture
de code (je n'y connais rien et ça va me prendre 1 siècle...).
Je pensais que ça pouvait se faire sur Kpz de manière similaire
à Frontpage où je choisis une vignette puis clic/menu pour créer
un évènement au passage de la souris...

Ymai, merci pour tes géniales explications, (mais si pour la couverture )
qui me donnent une idée:
si je fais des vignettes numérotées sur chaque page de projet,
chacune renvoyant à des images (de 4 à 20 images par projet),
puis-je entrer un code une fois pour toute qui dirait:
"onmouseover" vignette 1 la fait "s'éclairer" puis "clic" la fait changer
de couleur ?
Je mettrai ensuite les liens sur chaque vignette de chaque page
car bien sur les vignettes ne renverraient pas aux mêmes images ?
Je ne sais si je suis claire... En fait c'est seulement l'effet que je recherche,
de boutons clignotants (ou interactifs).
Et d'automatiser tout ça en créant une page "modèle".

Je vais potasser tes explications Ymai, je sens que j'y trouverai la solution
car ton exemple est proche de ce que je cherche...

Autre solution possible: faire mes vignettes numérotées "interactives" sur Gimp
(que je ne connais pas mais ça vaut peut-être le coup que je m'y mette aussi)
puis les introduire sur les pages et leur donner les liens ?

A suivre donc et encore merci à tous, ça avance...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8

[Mongo Bob]

c'est peut-être la même réponse que dans l'autre post, dans lequel praounette voulait l'affichage d'une autre image par passage de la souris sur la 1ère, sans cliquer :
http://www.geckozone.org/forum/viewtopi ... 743#410743
mais ce que tu veux paraît plus sophistiqué :

puis-je entrer un code une fois pour toute qui dirait:
"onmouseover" vignette 1 la fait "s'éclairer" puis "clic" la fait changer
de couleur ?

ce n'est pas un "agrandissement" ( = l'appel à la même image en grand format) de la vignette, alors?
- la vignette est grisée
- je passe la flèche dessus, la vignette s'éclaircit
- je clique et elle change de couleur?

[veronica]

re bonjour, oui Mongo Bob, c'est bien ça :

- la vignette est grisée
- je passe la flèche dessus, la vignette s'éclaircit
- je clique et elle change de couleur?

Je suis en train d'essayer de le faire avec les explications de Ymai
mais évidemment, novice oblige, c'est pas encore top:
l'image change, mais ce n'est pas celle que j'espère qui apparait...

Le tuto d'Alsacreations dont tu me donnes le lien, c'est ce que je cherche, mais il manque l'effet du clic... Je vais l'étudier de ce pas.
Merci Mongo Bob ! A suivre...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8

[veronica]

Ça marche !!!
Suis bien contente, merci à tous.
En plus de vos explications cette page m'a
permis de comprendre le processus:
http://tecfa.unige.ch/themes/FAQ-FL/rol ... over.html#
Si ça peut aider autrui...
A bientôt pour d'autres questions !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8