Utilisation du widget info-bulle Spry sous Dreamweaver

Le widget Info-bulle Spry affiche des informations supplémentaires lorsqu’un utilisateur place le pointeur de la souris au-dessus d’un élément spécifique d’une page web. Le contenu supplémentaire disparaît lorsque l’utilisateur cesse l’opération. Vous pouvez également configurer les info-bulles de manière à ce qu’elles restent ouvertes plus longtemps afin de permettre aux utilisateurs d’interagir avec le contenu qui s’y trouve.

Le widget Info-bulle comprend les trois éléments suivants :

• Le conteneur d’info-bulle. Il s’agit de l’élément qui contient le message ou le contenu que vous souhaitez afficher lorsque l’utilisateur active l’info-bulle.

• L’élément ou les éléments de page permettant d’activer l’info-bulle.

• Le script du constructeur. Il s’agit du code JavaScript indiquant à Spry de créer la fonctionnalité d’info-bulle.

Lorsque vous insérez un widget Info-bulle, Dreamweaver crée un conteneur d’info-bulle à l’aide de balises div et entoure l’élément de « déclenchement » (l’élément de page permettant d’activer l’info-bulle) de balises span. Dreamweaver utilise ces balises par défaut. Toutefois, toutes les balises peuvent être utilisées avec l’infobulle et l’élément de déclenchement dans la mesure où elles se trouvent dans le corps de la page.

Lorsque vous utilisez le widget Info-bulle, tenez compte des considérations suivantes :

• Toute infobulle ouverte se ferme avant l’ouverture de la suivante.

• Les info-bulles restent affichées lorsque les utilisateurs placent le pointeur de la souris au-dessus de la zone de déclenchement.

• Vous n’êtes soumis à aucune restriction en ce qui concerne le type de balises que vous pouvez utiliser pour les déclenchements et le contenu d’info-bulle. (Il est toutefois toujours recommandé d’avoir recours à des éléments de niveau bloc afin d’éviter des problèmes de rendu inter-navigateurs éventuels).

• Par défaut, l’info-bulle est de 20 pixels, et apparaît en bas à droite du curseur. Vous pouvez utiliser les options de décalage horizontal et vertical de l’inspecteur Propriétés pour définir un point d’aspect personnalisé.

• Il n’existe actuellement aucun moyen permettant l’ouverture d’une info-bulle lorsqu’une page se charge dans un navigateur.

Le widget Info-bulle nécessite très peu de code CSS. Spry utilise JavaScript pour afficher, masquer et positionner l’info-bulle. Vous pouvez appliquer toute autre mise en page à l’info-bulle à l’aide des techniques CSS standard, selon les exigences de votre page. La seule règle contenue dans le fichier CSS par défaut est une solution aux problèmes Internet Explorer 6 consistant à faire apparaître l’info-bulle au-dessus des éléments de formulaires ou des objets Flash.

Vous trouverez une explication plus détaillée du fonctionnement du widget Spry Infobulle, ainsi qu’une description complète de son code, à l’adresse www.adobe.com/go/learn_dw_sprytooltip_fr.

Vous trouverez un didacticiel vidéo sur l’utilisation du widget Spry Infobulle à l’adresse www.adobe.com/go/lrvid4046_dw.

Insertion du widget Info-bulle

Cette action permet d’insérer un nouveau widget Info-bulle intégrant un conteneur dédié au contenu de l’info-bulle et une phrase d’espace réservé faisant office de déclencheur d’info-bulle.

Vous pouvez également sélectionner un élément existant sur la page (par exemple, une image), puis insérer l’info-bulle. Lorsque vous effectuez cette opération, l’élément sélectionné fait office de déclencheur de la nouvelle info-bulle. L’élément sélectionné doit inclure une balise entière (par exemple, une balise img ou p) afin de permettre à Dreamweaver de lui attribuer un ID s’il n’en dispose pas déjà un.

Modification des options de widget Info-bulle

Vous pouvez définir les options vous permettant de personnaliser le comportement du widget Info-bulle.

1. Amenez le pointeur de la souris ou placez le point d’insertion dans le contenu de l’info-bulle sur la page.

2. Cliquez sur l’onglet bleu du widget Info-bulle pour le sélectionner.

3. Définissez les options dans l’inspecteur Propriétés du widget Info-bulle, à votre convenance.

Nom

Nom du conteneur d’info-bulle. Le conteneur renferme le contenu de l’info-bulle. Par défaut, Dreamweaver utilise une balise div en tant que conteneur.

Déclencheur

Elément de la page qui active l’info-bulle. Par défaut, Dreamweaver insère une phrase d’espace réservé, entourée de balises span, en tant que déclencheur, mais vous pouvez sélectionner n’importe quel élément de la page disposant d’un ID unique.

Suivre la souris

Lorsqu’elle est sélectionnée, cette option oblige l’info-bulle à suivre la souris lors du survol de l’élément de déclenchement.

Masquer lors du retrait de la souris

Lorsqu’elle est sélectionnée, cette option permet de garder l’info-bulle ouverte tant que la souris la survole (même si la souris quitte l’élément de déclenchement). Il est utile de laisser l’infobulle ouverte si elle contient des liens ou d’autres éléments interactifs. Si cette option n’est pas sélectionnée, l’élément de l’info-bulle se ferme lorsque la souris quitte la zone de déclenchement.

Décalage horizontal

Calcule la position horizontale de l’info-bulle par rapport à la souris. La valeur de décalage est exprimée en pixels ; le décalage par défaut est de 20 pixels.

Décalage vertical

Calcule la position verticale de l’info-bulle par rapport à la souris. La valeur de décalage est exprimée en pixels ; le décalage par défaut est de 20 pixels

Afficher le délai

Délai en millisecondes avant l’apparition de l’info-bulle lorsqu’elle se trouve dans l’élément de déclenchement. La valeur par défaut est 0.

Masquer le délai

Délai en millisecondes avant la disparition de l’info-bulle lorsqu’elle a quitté l’élément de déclenchement. La valeur par défaut est 0.

Effet

Type d’effet que vous voulez utiliser lorsque l’info-bulle apparaît. Store simule l’effet d’un store qui monte et descend pour afficher et masquer l’info-bulle. Fondu fait apparaître et disparaître l’info-bulle en fondu. La valeur par défaut est aucun.