de l'onglet Javascript...Si vous désirez incorporer une bannière dans une de vos pages HTML, WebExpert 5 vous permet par cet assistant de le faire très facilement.
Pour lancer l'assistant, cliquez sur le bouton
de l'onglet Javascript...
Le script de détection (inséré dans l'en-tête du doucument) a déjà été expliqué en détail pour le javascript (Images alternatives sur lien), nous ne le ferons donc plus ici.
On emploie dans ce javascript l'élément <SELECT> qui permet d'afficher un menu de sélection et permet de choisir une réponse unique (ou multiple).
La procédure employée dans cet effet est assez simple. On attribue l'URL de la nouvelle image à afficher dans le document en changeant l'attribut SRC du code de l'image (imgDepart1) de départ, c'est-à-dire celle qui est insérée par défaut dans le document, par celle qui est sélectionnée dans la balise <OPTION>, qui est une balise qui ne peut être employée qu'à l'intérieur d'un élément <SELECT>, ne peut contenir que du texte et présente les différents choix d'un menu.
C'est par l' événement onChange (après détection des navigateurs compatibles effectuée par le script de détection) de l'élément de sélection (<SELECT>), provoqué soit par un nouveau choix (élément <SELECT> avec l'attribut SIZE=1), soit par un clic sur la ligne affichée (élément <SELECT> avec l'attribut SIZE= qui comprend une valeur >1) qui correspond à l'option de l'image (SRC) désirée, qu'est attribuée la nouvelle valeur de l'URL du code de l'image.
En effet, on attribue par cet événement la nouvelle valeur SRC du code HTML de l'image (IMG) insérée dans le document [NAME="imgDepart1"], elle -même contenue dans l'élément form, qui correspond à la valeur de l'option sélectionnée dans l'élément <SELECT> (form.listeImg1.options[form.listeImg1.selectedIndex].value). Par ce procédé, l'image dont l'URL est placée dans les différentes options remplace l'URL de l'image de départ et ainsi de suite.
L'assistant a placé, dans le code de l'image de départ ses attributs de largeur (WIDTH) et de hauteur (HEIGHT) : ce procédé exige alors que toutes les images possèdent les mêmes caractéristiques de largeur et de hauteur, car dans le cas inverse, les images plus petites (ou plus grandes) seront adaptées à ces valeurs et seront tronquées. Cela a pour avantage, par contre, que l'élément de sélection (select) soit toujours impeccablement placé par rapport au image : en effet, si une des images est plus grande par exemple, l'espace écran étant différent, l'élément de sélection en sera perturbé.
De plus, dans l'assistant, vous pouvez choisir d'afficher la sélection en une ligne (comme dans cette page) ou affichant plusieurs lignes : en fait, la différence d'affichage est produite par la simple différences de l'attribut (SIZE="1") de l'élément select. Dans ce second choix (affichage de plusieurs lignes), l'élément de séclection sera encore plus perturbé si les images sont de dimension diférente.
Il vous sera proposé (ci-dessous) une variante qui résout ce problème.
Vous pouvez changer l'affichage de l'élément de sélection (<SELECT>), en modifiant la valeur de son attribut (SIZE=), l'image de départ, en remplacant le code de l'image (de référence), mais sans oublier de lui attribuer le même nom (NAME="imgDepart1") et enfin, ajouter et/ou supprimer des images supplémentaires, par l'ajout et/ou le retrait des balises "<OPTION> (<OPTION VALUE="autreimage.gif">Image supplémentaire) et le texte qui les définit.
Si les images que vous désirez présenter sont de dimension différentes et en même temps, éviter que les images ne soient pas tronquées, vous devez effectuer quelques changements.
En premier lieu, supprimer les valeurs de WITH et de HEIGHT du code HTML de l'image (départ) : de cette manière, les dimensions des autres images ne seront pas fixées par celles de la première.
Ensuite, placer l'élément <FORM> qui comprend l'élément de sélection (et les différentes options) à un endroit de votre document, où celui-ci sera moins ou pas perturbé par le changement de dimension des images. Voici un exemple ci-dessous, où l'ensemble est placé dans un tableau (invisible) dont la première cellule possède une largeur et hauteur suffisante que pour contenir toutes les images :