Afficher puis faire dispara�tre une image

**david252** · 06/07/2011, 10h34

Bonjour � tous,

J'aurai besoin de votre aide au sujet de javascript.

Je veux modifier une page .php pour :

Afficher une image qui lorsque l'on clique dessus, permet d'ouvrir une page web et dispara�t en m�me temps. Le fait de cliquer sur cette image, permettra d'afficher une zone de texte cacher derri�re l'image. Dans cette zone de texte serait affich� une valeur que je r�cup�rerai de ma base de donn�e.

Auriez-vous une id�e de comment proc�der ? Aussi ce que je n'arrive pas � comprendre c'est comment de ma page .php je dois � faire appel � une fonction en javascript et lui dire o� elle se trouve ?

Merci par avance pour votre aide

David

**Finality** · 06/07/2011, 10h52

Salut

apparemment tu d�butes en JavaScript. Ton besoin fais appel � plusieurs notions de JS : �v�nement pour l'action sur le clic, AJAX pour la r�cup�ration de la valeur.

Je te conseille donc de lire ce cours : http://javascript.developpez.com/tut.../introduction/ , sans quoi tu vas vite �tre perdu

**david252** · 06/07/2011, 11h34

Merci

Je viens de lire la documentation.

Je pars dans cette direction, qu'en pensez vous ? :

C:\images\mon_image.png
C:\mon_site\js\mon_script.js

Donc dans ma page php, je ferai appel � une fonction qui sera pr�sente dans mon_script.js, dois-je placer le "onClick" dans la page .php ou bien dans le mon_script.js ?

Merci

**Sharcoux** · 06/07/2011, 14h59

la page html envoy�e au client doit contenir :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
<head>
    ...
    <script type="text/javascript" src="js/mon_script.js"></script>
    ...
</head>

c'est aussi sur ton �l�ment html que tu dois ajouter le onclick. Si ton html est dans ton fichier php, c'est bien l� que tu dois le mettre

**RomainVALERI** · 06/07/2011, 18h30

Envoy� par david252

dois-je placer le "onClick" dans la page .php ou bien dans le mon_script.js ?

Envoy� par Sharcoux

c'est aussi sur ton �l�ment html que tu dois ajouter le onclick. Si ton html est dans ton fichier php, c'est bien l� que tu dois le mettre

Tant qu'� apprendre les bases, autant faire les choses bien

Pour placer des �v�nements sur des �l�ments de ta page, 3 solutions :

1) directement dans le HTML, par exemple :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<div id="divMachin" onclick="alert('rouge');">bla bla</div>

>>> probl�me : c'est carr�ment � contre-courant du principe de s�paration "contenus/mise en forme/comportements", �a peut poser des soucis de compatibilit� entre navigateurs, et c'est une gal�re � maintenir

2) dans ton code JS, en utilisant les propri�t�s des �l�ments DOM :
a) soit entre balises script sur la page (inconv�nients : quasiment les m�mes que la solution 1)
b) soit dans un fichier JS � part appel� depuis le head de la page.

En tout cas dans ces deux cas (a et b), tu auras quelque chose comme :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
var elem = document.getElementById("idDeTonElement");
elem.onclick = function() {
   alert("à la bombe");
};

Mais ce n'est pas id�al non plus dans certains cas de figure. Notamment, si d'autres �v�nements ont �t� ajout�s de cette mani�re � l'�l�ment sur le m�me d�clencheur, il y aura �crasement de la premi�re fonction par la seconde. Ca se produit le plus souvent avec des fonctions appel�es au d�marrage sur window.onload par exemple...

3) avec de vrais gestionnaires d'�v�nement

IE :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function traitementClic(e) {
   // ici, le code à exécuter quand l'événement se produit.
   // "e" est une référence à l'objet (de type Event) correspondant
}
var elem = document.getElementById("idDeTonElement");
elem.attachEvent("onclick", traitementClic);

FF et les autres :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function traitementClic(e) {
   // ici, le code à exécuter quand l'événement se produit.
   // "e" est une référence à l'objet (de type Event) correspondant
}
var elem = document.getElementById("idDeTonElement");
elem.addEventListener("click", traitementClic, false);

version cross-browser :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function traitementClic(e) {
   // ici, le code à exécuter quand l'événement se produit.
   // "e" est une référence à l'objet (de type Event) correspondant
}
function addEvent(cible, condition, effet) {
   if (cible.addEventListener) {
      cible.addEventListener(condition, effet, false);
   }
   else if (cible.attachEvent) {
      cible.attachEvent("on" + condition, effet);
   }
}
var elem = document.getElementById("idDeTonElement");
addEvent(elem, "click", traitementClic);

Enfin, grosso modo, hein ^^

Afficher puis faire dispara�tre une image

JavaScript

Discussions similaires

Partager

Partager