Franc83

Boutons rollover

20-07-2008

Des boutons "menu" en rollover

Voici des boutons en "rollover" dont les utilisations peuvent être multiples....
Du retour en haut de page, de l'ouverture d'un lien (livre d'or ou autre), de retour à la page d'accueil...

Voici la technique utilisée pour construire ce type de boutons.

Ici il s'agit de boutons construits grâce à GlassyButton.
Mais il existe d'autres moyens pour les constuire soi-même, ou trouver des sites qui en proposent.

Voici les deux images qui sont utilisées pour le rollover :

pour le retour à l'accueil :

accueil1
accueil2

pour le retour en haut de page :

L'exemple suivant vous renverra à l'accueil du site, et en haut de page :

Tout d'abord le code utilisé :

<table height="46" cellspacing="1" cellpadding="1" width="240" align="center" border="0" bakcground-color="#ffffff">
<tbody>
<tr>
<td align="center"><a href="http://www.franc83.fr/index.php?lng=fr#top"><img onmouseover="javascript:this.src='http://URL/bouton2.gif'" onmouseout="javascript:this.src='http://URL/bouton1.gif'" alt="retour en haut de page" src="http://URL/bouton1.gif" /></a> </td>
</tr>
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center"><a href="http://www.franc83.fr/index.php?lng=fr" target="_blank"><img onmouseover="javascript:this.src='URL/bouton2.gif'" onmouseout="javascript:this.src='URL/bouton1.gif'" alt="retour à l'accueil" src="URL/bouton1.gif" /></a></td>
</tr>
</tbody>
</table>

Et donc, mise en pratique.....en respectant bien les hauteurs et largeurs des boutons dans le code source, à l'endroit "width" et "height", pour assurer qu'aucune déformation ne viendra perturber votre gif. Et choisissez un gif au format transparent si votre fond n'est pas blanc, afin qu'il se fonde dans le fond du site ou blog.

Les seules limites sont celles de votre imagination.

" Ne recopiez pas ces boutons pour votre usage personnel, vous utiliseriez ma bande passante, si vous voulez, sauvegardez les sur votre disque et hébergez les, ainsi en est-il de la nettiquette....merci "

Dans le même esprit

Div boutons

Loader Ajax

Menu Barre CSS

Menu cascade

Menu Diodes

Menu Fade

Menu latéral css

Loupe horizontale

Loupe verticale

Menu Outlook Express

Menu Slide java

Menu nowrap

Menu Filtres IE

Menu slide Frames

Menu images css

Barre CSS java

Menu en iframes

Menu en pur CSS

Menu multi-slide

Citez cet article

Commentaires (1)
1. special
Ecrit par webdz , le 29-07-2009 12:32

http://nom_du_blog.spaces.live.com/blog/cns!B0F429822ED6549!474.entry>plugins pour visualiserdes médias

Des logiciels Utiles

http://nom_du_blog.spaces.live.com/blog/cns!B0F429822ED6549!465.entry>Vidéo dans un billet

http://nom_du_blog.spaces.live.com/blog/cns!B0F429822ED6549!462.entry>Menu css et java script

http://nom_du_blog.spaces.live.com/blog/cns!B0F429822ED6549!461.entry>Utiliser Msn pour héberger vos images

Retout à l'accueil
Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés.
Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur.
Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire

Code:*
Je désire être prévenu par mail des commentaires qui suivront
Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved