|
JavaScript permet à un site web pour répondre aux événements utilisateur , modifier le contenu d'une page en fonction de diverses souris et des frappes . Les menus et les boutons servent souvent déclencheurs de ces changements , mais DIV peuvent être tout aussi sensibles . A DIV est une balise HTML qui sert de conteneur pour d'autres contenus, tels que du texte et des photos . Passer la souris sur n'importe quelle partie de la DIV peut déclencher un changement. En déplaçant la souris au large de la DIV peut déclencher un autre . Instructions
1 Insérer une fonction d'assistance entre les balises head qui permet à votre script fonctionne sur tous les navigateurs . La fonction va ajouter des écouteurs d'événements aux éléments HTML de la page. Lorsqu'elle est appelée , la fonction d'assistance prend trois arguments , ou des ensembles d' instruction : . L'élément cible , le type d' événement et la fonction à appeler
fonction addEvent (obj , type, fn) {
Si ( obj.attachEvent ) {
obj [' e' + type + fn] = fn ;
obj [ type + fn] = function () { obj [' e' + type + fn] ( window.event );}
obj.attachEvent ( 'on' + type obj [ type + fn] ) ; } else
obj . addEventListener (type, fn , false); }
2 créer une fonction entre les balises head qui utilise l'événement de charge, ou le chargement de la page dans la fenêtre pour appeler la fonction " testMouse " . Cela ajoutera deux écouteurs d'événements à votre DIV :
window.onload = testMouse ;
3 créer des fonctions qui se traduira par la couleur de votre DIV changement sur la page basé sur le passage de la souris et événements mouseout . Commencez par créer " testMouse , " qui obtiendra le DIV par son ID de " testDiv . " Ecoutez les événements mouseover ou mouseout et appeler les fonctions " addColor " ou " removeColor " , respectivement. Créer des fonctions " removeColor " qui changent la couleur de fond " addColor " et
fonction testMouse () { var
divField = document.getElementById (" testDiv "); .
addEvent ( divField , ' mouseover' , addColor ) ;
addEvent ( divField , « mouseout », removeColor ) ;
}
fonction addColor () {
var removeColor () { var
divField = document.getElementById (" testDiv ");
= divField.style.backgroundColor ""; }
4 Placez vos balises DIV et exemple de texte entre les balises body de votre document:
texte ici Texte ici Texte ici . Photos
5 Placer les styles CSS pour votre DIV entre les balises head pour en faire une taille fixe et de lui donner un fond bleu : Photos
6 Enregistrez votre page et l'ouvrir dans un navigateur pour tester votre code. Passer la souris sur votre DIV devrait tourner du bleu au gris. Déplacer votre souris au large de la DIV devrait tourner de nouveau à gris
Le code complet devrait ressembler à ceci : .
Photos
|
