Afficher puis faire disparaître une image

Version imprimable

06/07/2011, 10h34
david252

Afficher puis faire disparaître une image

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
06/07/2011, 10h52
Finality

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 :ccool:
06/07/2011, 11h34
david252

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 ;)
06/07/2011, 14h59
Sharcoux
la page html envoyée au client doit contenir :
Code:

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

Citation:

Envoyé par david252

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

Citation:

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:

<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 :weird:

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:

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:

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:

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:

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 ^^