Tableau récapitulatif des évènements

Description

1. Ajoutez une page à votre portfolio en affichant les assistants HTML et JAVASCRIPT ainsi que la directive 1643
2. Inscrivez le titre : Les évènements javascript
3. Sélectionnez la matière : informatique
4. Inscrivez dans le champ No de la directive : 1643
5. Inscrivez dans votre page le titre de niveau 1 : Les évènements javascript
6. Vous allez utiliser les images suivantes pour cette activité. Utilisez les URLs de ces images (clic droit + propriétés) ou enregistrez ces images et placez-les dans votre espace de téléchargement. et
7. Cliquez le bouton SURVOL
   Inscrivez pour chacune des questions dans la fenêtre de dialogue qui s'affiche :
   - URL du lien : javascript:void(0)
   - Nom de l'objet image : im
   - URL de l'image 1 : http://ladifference.info/i/images//image1.jpg
   - URL de l'image 2 : http://ladifference.info/i/images//image2.jpg
   
   Explication du code :
   - balise A HREF=javascript:void(0) signifie que le lien n'est pas activé. Vous pouvez placer comme valeur de HREF l'URL d'un site internet de votre choix.
   
   - Les paramètres onMouseOver et onMouseOut indique l'action à effectuer lorsque la souris survole et quitte l'image.
   
   Ainsi, onMouseOver='im.src="http://...image2.jpg"' indique que lorsque la souris survole l'image, la source le l'objet nommé im sera l'image 2.
   
   De la même façon, onMouseOut='im.src="http://.../image1.jpg"' indique que lorsque la souris quitte l'image, la source le l'objet nommé im sera l'image 1.
   
   
8. Ajoutez sous cette image une ligne horizontale <hr />
9. Créez un autre effet de survol sur image :
   - en utilisant de nouveau le bouton Survol
   - en nommant l'objet image d'un nom autre que im (im2 par exemple)
   - et en choisissant deux images de votre choix (de mêmes dimensions)
   Utilisez au besoin ces commandes dans le terminal afin de redimensionner vos 2 images aux mêmes dimensions
   convert NOM_DE_L_IMAGE_1 -resize 200x200\! monimage1.png
   
   convert NOM_DE_L_IMAGE_2 -resize 200x200\! monimage2.png
   
   - Téléchargez ces 2 images dans votre espace de téléchargement
   
   
10. Ajoutez sous cette image une ligne horizontale
11. Ajoute maintenant une troisième image qui contiendra l'évènement onMouseOver qui lancera la fonction javascript alert() qui affichera le message "Les évènements javascript!".
    
    Pistes :
    1- insère une image dans ta page
    2- ajoute à cette image un lien "inopérant" :<a href="javascript:void(0)" ><img src="..." /></a> 3- ajoute ensuite à ce lien l'évènement onmouseover <a href="javascript:void(0)" onmouseover=""><img src="..." /></a>
    4-insére dans cet évènement la fonction alert('Les évènements javascript!')
    
    
12. Ajoute ensuite un LIEN sur le texte "Couleur d'arrière-plan"
    
    Pistes :
    1- insère dans ta page le texte "Couleur d'arrière-plan"
    2- Sélectionne ce texte et clique le bouton LIEN
    3- inscrire l'URL "javascript:void(0)" >
    4- ajoute ensuite à ce lien l'évènement onclick <a href="javascript:void(0)" onclick="">Couleur d'arrière-plan</a>
    4-insére dans cet évènement la fonction document.bgColor='blue';
    
    
13. Visualisez votre page et apportez des modifications au besoin.