1 / 3

 Les balises HTML et les objets JavaScript correspondants

 Les balises HTML et les objets JavaScript correspondants. Collection images.

sumi
Download Presentation

 Les balises HTML et les objets JavaScript correspondants

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Les balises HTML et les objets JavaScript correspondants Collection images Chaque image insérée dans le document HTML à partir de la balise <img> appartient à la collection images[ ] (Array JS), dont chaque élément est un objet de type Image (c'est un objet au même titre que les objets du noyau JS Date, String et Array). Rappel : Insertion d'une image dans un document HTML, attributs name et id Les différentes façon d'accéder à l'objet en JS : Propriétés : http://www.javascriptkit.com/javatutors/image2.shtml

  2. Les balises HTML et les objets JavaScript correspondants Collection images Pré-chargement d'images en mémoire : Le constructeur Image( ) permet de créer un objet de type Image. Attention, cet objet n'étant pas dans le document HTML (il n'a pas été créé par la balise <img>), il n'appartient donc pas à la collection images[ ]!Néanmoins, il possède les propriétés des objets de type Image, présentées précédemment. Instance d'un objet Image : Echange d'une image du document HTML par une image pré-chargée en mémoire (application au RollOver) : de l'objet Image nommée imgJS La propriété src du document HTML de la collection des images de l'image nommée imgHTML La propriété src

  3. Les balises HTML et les objets JavaScript correspondants Exemples Pratiques Le 'RollOver'. • Schéma d'exécution : • Insertion d'une image dans le corps (body) du document HTML, avec les attributs name et/ou id. • Pré-chargement en mémoire JS d'une image, instance de l'objet Image(), et affectation de l'URL de l'image par la propriétésrc. • Ecriture de la fonction, nommée rollover(), qui assure l'échange entre l'image du document HTML et l'image pré-chargée en mémoire. • Appel de cette fonction lors du survole par la souris de l'image, événement onmouseover. • Retour à l'image initiale, lorsque la souris quitte l'image, événement onmouseout.

More Related