Créer un compte Utilisateur
9 visiteur(s) et 0 membre(s) en ligne.  

 Lettre d'information
 


Votre adresse E-mail



Recevez par mail les nouveautés du site.

 

08) Le RollOver

(359 mots dans ce texte )  -   lu : 347 Fois     Page Spéciale pour impression

Le RollOver ou encore appelé image retournée est un ensemble constitué de deux images strictement identiques. Le fait de passer avec le curseur de la souris au-dessus de la zone délimitée par le RollOver fera apparaître la deuxième image.
Chaque cercle est en fait composé de deux images. La deuxième ne sera visible que lorsque l'on déplace le curseur dessus.
Il faut bien évidemment avoir effectué les diverses retouches de ces images avec un logiciel de traitement d'images tel que Photoshop ou Paint Shop Pro.

Passons aux choses sérieuses. Ouvrez Dreamweaver (version 2, 3 ou 4).

Placez tout d'abord un calque sur votre page avec l'icône . Vous le positionnerez précisément plus tard.

Cliquez ensuite sur l'icône Image Retournée pour insérer vos images.

Dans le premier champ entrez le nom de l'image au repos.

Dans le deuxième champ entrez le nom de l'image quand le curseur est dessus (au travail).

Dans le champ lien donnez la page que l'on doit ouvrir lorsque l'on cliquera dessus et laissez la case Précharger les images cochée.


Effectuez les mêmes opérations avec toutes vos images retournées. Et une fois quelles sont toutes placées approximativement sur la page, vous pouvez les placer précisément.

Si vous devez effectuer une interface dont certaines images retournées se placent sur d'autres (comme celle qui sert d'exemple), vous pouvez donner un ordre de placement verticale grâce au Z-index.

Plus ce chiffre (celui dans la fenêtre du Z-index) sera grand plus près de vous sera l'image.


Dans l'exemple choisi cela donne ceci après placement des images au pixels près grâce aux flèches de direction du clavier:


Effectuez un F12 pour visionner votre interface et admirez le résultat.


Tutorial crée par le super webmaster de lewebfacile.net 




Retour à la sous-rubrique :
  • Dreamweaver

  • Autres publications de la sous-rubrique :
  • 01) Présentation du logiciel
  • 02) Animez vos calques
  • 03) Les Frames (cadres)
  • 04) Les modeles
  • 05) Creez un puzzle
  • 06) Creez une mailing list
  • 07) Menus deroulants dynamiques graphiques
  • 09) Inserez de la musique
  • 10) Triez un tableau
  • 11) Les styles HTML
  • 12) Les menus deroulants
  • 13 ) Le RollOver a distance
  • 14) Explications supplementaires
  • 16) Les nouvelles fonctions de Dreamweaver Mx
  • Ce site a été construit avec NPDS
    admin