Tuto pour le générateur de boutons en relief et roll over
Suite à l'article script sans java script pour faire des roll over d'image au survol d'image où je vous expliquais comment changer n'importe quelle image
au survol de votre pointeur voici un super générateur avec lequel vous allez faire des boutons en relief et un roll over
Allez sur le site http://fr.cooltext.com/
Pour cet exemple j'ai choisis le design "hippie"
Tapez votre texte , nom de rubrique .... en dessous de "Text"
Vous obtenez cette page çi-dessous
Maintenant il faut modifier votre bouton suivant l'image çi-dessous.
Lorsque vous aurez modifié selon vos désirs le bouton, la dernière étape est celle en bas à droite sur l'image çi-dessus "other", vous allez choisir l'effet que donnera le roll over au survol du bouton; puis vous cliquez sur "render Button"
✿´`·.·´`✿´`·.·´`✿´`·.·´`✿´`·.·´`✿
On obtient 3 images voir image çi-dessous :si vous n'êtes pas satisfait, cliquez sur "modifier ce logo" en bas à droite.
je vous conseille d'enregistrez les images et de ne pas télécharger (risques de virus) en cliquant droit (puis cliquer "enregistrez l'image sous ") et de nommer les imagespuis soit vous hébergez vos images sur un hébergeur tel que imageshack soit vous rangez ces images dans vos documents pour récupérer les urls (adresse des images).
Attention ces images sont temporaires
au bout de quelques heures elles vont disparaitre
d'où l'intérêt de les enregistrer ...
voici mes 2 images
et voici leurs adresses urls respectives
http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-1.png
http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-2-au-survol.png
(pour les récupérer je suis passée en mode html et j'ai fait un copié-collé)
✿´`·.·´`✿´`·.·´`✿´`·.·´`✿´`·.·´`✿
puis je remplace ces urls dans le script çi-dessous
<img src="url logo 1" onmouseover="this.src='url logo 2 au survol';" onmouseout="this.src=''url logo 1;" />
ce qui donne
<img src="http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-1.png" onmouseover="this.src='http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-2-au-survol.png';" onmouseout="this.src='http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-1.png';" />
je copie le script çi-dessus et je le colle en mode source html ce qui donne
Vous pouvez tester en survolant l'image si vous n'observez pas d'effet il est peut être temps de mettre à jour votre navigateur ...
Après il suffit juste de rajouter un lien comme n'importe quelle image ...
allez cliquez maintenant si vous voulez rigolez un peu