Accueil » Dossiers » Tutoriaux » DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet ! » Page 3

DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet !

Par GuillaumeB

Exemple de DHTML : le mouseover

Voici sans doute ce qui se fait de plus simple en DHTML : le mouseover :

<html><head></head><body><img src= »img1.png » onmouseover= »this.src=’img2.gif' »onmouseout= »this.src=’img1.png' »></body></html>

Et oui notre première page Internet ne fait que…quatre lignes ! Plutôt rassurant comme début, non ?

Quelques explications
Ici, nous avons deux images img1.png et img2.gif. Dans un premier temps, nous ne voyons que la première d’entre elles. Nous effectuons ensuite deux petites opérations à l’aide d’un JavaScript directement intégré au code HTML. :
L’opération onmouseover= »this.src=’img2.gif' » signifie que si l’utilisateur passe sa souris sur la première image, alors celle-ci sera remplacée par la seconde.
L’opération onmouseout= »this.src=’img1.png' » signifie que si l’utilisateur déplace sa souris en dehors de l’image,  alors  la situation sera réinitialisée et la seconde image disparaîtra au profit de la première.

Notez que les deux images sont présentes dans le code HTML de la page. Cela signifie qu’elles ont été téléchargées dès le début du chargement de la page. C’est l’usage du JavaScript qui rend son agencement dynamique.

Voir l’exemple (1a) – Télécharger l’exemple

5 Commentaires
0

Vous aimerez aussi

S’abonner
Notifier de
guest
5 Commentaires
plus ancien
plus récent Le plus populaire
Commentaires en ligne
Voir tous les commentaires
lucifer

J’aimerai savoir (l’exemple 3b) comment faire en sorte que les éléments qui ont pour class "exeception" ne puissent pas posséder l’effet du drag and drop ?

En effet si dans notre div, on a un champ input (par exemple) eh bien on ne peut pas remplir ce champs.

Sinon c’est un très bon tuto 😛

Anonyme

Tous simplement, comment faire une fonction qui mettent fin à "Drag.init" ?

je vais faire un onclick="stop_Drag();"

Mais comment faire ?

Glups

Je n’ai pu faire fonctionner cette application qu’en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
Ensuite, impeccable.

Glups
Glups a dit :

Je n’ai pu faire fonctionner cette application qu’en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
Ensuite, impeccable.

(Je parle de l’exemple 2c)

dan4

C’est super mais ça ne fait pas un vrai iframe.

Je dois avoir un index avec un autre fichier en iframe ou include qui lui seul se charge quand je clique sur un élément du conteneur.

5
0
Nous serions ravis d'avoir votre avis, laissez un commentaire !x
()
x
More in Tutoriaux
Tutoriel VirtualBox : créer une machine virtuelle

Création d'une machine virtuelle Lors du premier lancement de VirtualBox, la fenêtre suivante s'affiche : A noter qu'une autre fenêtre…

Close