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