Navbar thème firefox

5/5 (2 avis)

Vue 8 847 fois - Téléchargée 401 fois

Description

Un exemple de barre de naviguation avec les boutons de FireFox
Nécessite JavaScript pour fonctionner
Voici les naviguateur WEB compatibles:
FireFox: toutes versions
Mozilla 1.0 et +
Internet Explorer 4.0 et +
Netscape Navigator 3.0 et +

Source / Exemple :


<!-- Un exemple de barre de naviguation avec les boutons de FireFox -->

<!-- Voici le code HTML à placer dans votre page -->
<!-- La seul chose que vous aurez besoin de modifier est l'URL de votre page d'accueil (tout en bas) -->

<HEAD>
<!-- Mise en cache des PNG dans le naviguateur -->
<!-- NE MODIFIEZ RIEN SAUF LES CHEMIN D'ACCÈS SI VOUS LE VOULEZ -->

<!-- Bouton de page précédente -->
<SCRIPT LANGUAGE="JavaScript">
if(document.images)
{
i325996 = new Image;
i325996 = "mouseover/gauche.png";
}
</SCRIPT>
<!-- FIN DU SCRIPT -->

<!-- Bouton de page suivante -->
<SCRIPT LANGUAGE="JavaScript">
{
i629177 = new Image;
i629177 = "mouseover/droite.png";
}
</SCRIPT>
<!-- FIN DU SCRIPT -->

<!-- Bouton de rafraîchissement -->
<SCRIPT LANGUAGE="JavaScript">
if(document.images)
{
i449427 = new Image;
i449427 = "mouseover/refresh.png";
}
</SCRIPT>
<!-- FIN DU SCRIPT -->

<!-- Bouton de fermeture -->
<SCRIPT LANGUAGE="JavaScript">
if(document.images)
{
i545790 = new Image;
i545790 = "mouseover/stop.png";
}
</SCRIPT>
<!-- FIN DU SCRIPT -->
<!-- Bouton d'accueil -->
<SCRIPT LANGUAGE="JavaScript">
if(document.images)
{
i685103 = new Image;
i685103 = "mouseover/home.png";
}
</SCRIPT>
<!-- FIN DU SCRIPT -->
</HEAD>

<BODY>
<!-- Bouton de page précédente -->
<A HREF="javascript:history.go(-1)"
onMouseOver="i325996.src='mouseover/gauche.png'"
onMouseOut="i325996.src='mouseout/gauche.png'">
<IMG SRC="mouseout/gauche.png" BORDER=0 NAME="i325996" ALT="Précédent" HSPACE=0 VSPACE=0></A>
<!-- FIN DU SCRIPT -->

<!-- Bouton de page suivante -->
<A HREF="javascript:history.go(+1)"
onMouseOver="i629177.src='mouseover/droite.png'"
onMouseOut="i629177.src='mouseout/droite.png'">
<IMG SRC="mouseout/droite.png" BORDER=0 NAME="i629177" ALT="Suivant" HSPACE=0 VSPACE=0></A>
<!-- FIN DU SCRIPT -->

<!-- Bouton de rafraîchissement -->
<A HREF="javascript:history.go(0)"
onMouseOver="i449427.src='mouseover/refresh.png'"
onMouseOut="i449427.src='mouseout/refresh.png'">
<IMG SRC="mouseout/refresh.png" BORDER=0 NAME="i449427" ALT="Rafraîchir" HSPACE=0 VSPACE=0></A>
<!-- FIN DU SCRIPT -->

<!-- Bouton de fermeture -->
<A HREF="javascript:close()"
onMouseOver="i545790.src='mouseover/stop.png'"  onMouseOut="i545790.src='mouseout/stop.png'">
<IMG SRC="mouseout/stop.png" BORDER=0 NAME="i545790" ALT="Fermer cette fenêtre" HSPACE=0 VSPACE=0></A>
<!-- FIN DU SCRIPT -->

<!-- Bouton d'accueil -->
<A HREF="#votrePage.html"
onMouseOver="i685103.src='mouseover/home.png'"
onMouseOut="i685103.src='mouseout/home.png'">
<IMG SRC="mouseout/home.png" BORDER=0 NAME="i685103" ALT="Accueil du site" HSPACE=0 VSPACE=0></A>
<!-- FIN DU SCRIPT -->
</BODY>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
alover971
Messages postés
8
Date d'inscription
samedi 25 février 2006
Statut
Membre
Dernière intervention
30 novembre 2007

12 nov. 2007 à 07:44
Ouais ben c'est un rollover en javascript, chose qui n'est quasiment plus utiliser ..
utilise du css pour ça c'est clair !
Ensuite, tu respectes pas les normes XHTML, et enfin, ça sert à coi de déclarer 36 balises <script> ???
Enfin, si tu veux faire un rollover en JS, utilise des evenement, et non pas les attributs onmouseover et onmouseout :/
J'ai l'impression d'etre revenue à il y a quelques années =)
pas de title sur les liens non plus =)
et on en fait quoi des gens qui n'ont pas javascript ?
=> les liens, pareil, evenement au clic (pas un onclick quand meme :/)
et un lien en dur dessus.. tu peux utiliser du php pour mettre un referer si existant, et pour la page actuel.. et voilà =)
XtremDuke
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
4
5 nov. 2007 à 09:37
Quelques remarques sans gravités (si tu m'autorises) :

- on déclare dorénavant les scripts de la manière suivante :
<script type="text/javascript>...</script>

- tu aurais pus automatiser la mise en cache des images dans une seule et même boucle.

- des rollovers en CSS sont plus élégants

- evites d'utiliser des attributs dépréciés tels que "HSPACE=0 VSPACE=0"

Have fun

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.