AccueilPortailFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 lien et roll over html

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Lunard
Chef
Chef
avatar

Féminin
Nombre de messages : 642
Age : 28
Date d'inscription : 01/04/2006

MessageSujet: lien et roll over html   Jeu 28 Mai 2009, 05:08

Nous allons apprendre à faire ceci avec imageready: >>clic ici<<

En survolant le bouton avec la souris, une lueur externe apparait et le bouton change de couleur, la transformation d'une image au survol de la souris s'appelle un roll over (utilisateur de e-anim, ce nom doit vous rappeler quelque chose). En cliquant sur le bouton, et pas sur l'image autour, on remarque que c'est un lien vers mon forum de test.
Nous allons donc apprendre à créer un roll over et un lien vers un site avec imageready.


I) préparation de l'image dans Photoshop
Dans Photoshop, on commence par mettre en place les éléments de notre image finale.
On va créer un calque pour le bouton avec la lueur externe et le changement de couleur (ou toute autre modification de votre choix) qui apparaitra au moment du survol de la souris, puis cacher ce calque en cliquant sur le petit œil à gauche du calque dans la fenêtre des calques.





Maintenant on passe tout ça dans imageready


II) Le roll over
Nous sommes dans imageready donc, nous allons afficher la fenêtre contenu web (menu fenêtre => contenu web )
elle ressemble à ça:


Dans la fenêtre des calques, on se place sur le calque du bouton survolé, qui est toujours caché, et dans la fenêtre contenu web on clique sur la petite flèche noire "créer une transformation par souris d'après le calque"


Ensuite on rend visible l'image survolé qui était jusqu'à présent cachée.


Le roll-over est terminé, si on veux vérifier qu'il est bien réussi, on va dans fichier => aperçu dans, et on sélectionne un navigateur web

Le navigateur que vous avez sélectionné s'ouvre et vous devez avoir une page comme ça:
Spoiler:
 
avec l'image qui change en passant votre souris dessus. Ne faites pas attention au code qui est en dessous, on verra à quoi il sert plus tard, vous pouvez fermé cette fenêtre et revenir dans imageready, nous devons ajouter le lien.


III) Le lien
Nous remarquons que des tranches se sont créer tout à l'heure, alors je vérifie que je suis bien sur la tranche du bouton (la tranche 3 chez moi).
Nous allons ouvrir la fenêtre des tranches (fenêtre => tranches ), et dans la case url, écrire le lien du site où on veux que le bouton nous envoie.
Si on veux que le lien s'ouvre dans un nouvel onglet du navigateur, on met _blank en cible, sinon on met rien et le lien s'ouvrira à la place de la page actuelle (moi je préfère l'ouvrir dans un nouvel onglet)


On refait un aperçu dans le navigateur comme tout à l'heure, et on vérifie que notre lien marche bien.


IV) Enregistrement
Maintenant enregistrez votre créa en .psd comme vous avez l'habitude pour pouvoir la retravailler plus tard si besoin (fichier => enregistrer ).
Puis faites fichier => "enregistrer une copie optimisée sous", choisissez le dossier de destination et "html et images"

Enregistrez
Le code html sera enregistré dans le dossier que vous avez choisi, et un dossier nommé "image" sera créé dans ce dossier où se trouverons les images (si un dossier image existe déjà, les images iront dedans avec les images déjà présentes)

V) Hébergement et mise dans une page html
Il nous faut récupérer le code html de cet ensemble d'image, on l'a enregistré tout à l'heure, allons voir dans le dossier où on a enregistré et ouvrons le fichier html avec le bloc note (ou un autre logiciel d'affichage de texte, mais pas avec un navigateur web) clic droit => ouvrir avec => bloc note
On voit un code html qui parait complexe à première vue, mais ne vous inquiétez pas, vous n'avez pas besoin de comprendre tout ce qu'il veux dire.
En résumé, il explique à un navigateur comment afficher les images que vous venez d'enregistrer sur votre ordi en même temps que ce code, donc si vous l'ouvrez avec votre navigateur, vous verrez l'aperçu comme tout à l'heure, mais il ne marchera que sur votre ordi. Pour le diffuser à tout le monde sur le net, il va falloir héberger les images, et remplacer les liens relatif qui mènent aux images sur votre ordi par les liens directs des images hébergées.
Çà peut paraitre pas évident, mais en observant bien c'est tout simple, regardez:

J'ai hébergé normalement mes images, j'en ai 5, mais vous pouvez en avoir beaucoup plus, les voici:
image 1 (haut): http://i64.servimg.com/u/f64/09/04/68/88/vien-d10.gif
image 2 (bas gauche): http://i64.servimg.com/u/f64/09/04/68/88/vien-d11.gif
image 3 (bouton): http://i64.servimg.com/u/f64/09/04/68/88/vien-d12.gif
image 4 (bouton survolé): http://i64.servimg.com/u/f64/09/04/68/88/vien-d13.gif
image 5 (bas droite): http://i64.servimg.com/u/f64/09/04/68/88/vien-d14.gif

Dans mon code html, je vais repérer les lien à changer par mes images:
Spoiler:
 
je vous ai mis aussi le numéro des images, mais il est facile à trouver puisqu'il est dans le nom du fichier, allé on remplace tout ça, ça me donne:
Spoiler:
 

Vous pouvez maintenant mettre ce code dans une page html, comme le message d'accueil de votre forum par exemple, le portail ou un sous forum, mais pas dans un message (il faudrait du bbcode, et il n'existe pas de balise bbcode pour les roll-over, on pourrait l'afficher dans un message sans roll-over, mais on avait pas besoin de ce tuto pour ça


)

_________________
Revenir en haut Aller en bas
http://collegepoudlard.virtuaboard.com
 
lien et roll over html
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» roll-over, zone réactive, image et son
» Jouer un son lorsque le bouton est en état survolé [RESOLU]
» [RESOLU] Lien sur roll-over
» [résolu] Lien dans image survolée vers page html
» [Résolu] Lien HTML ouvrir nouvelle fenêtre

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le fofo de Lunard :: étagère 3: Tutos et astuces :: ● Tutoriels :: Photoshop :: Imageready-
Sauter vers: