begin process at 2012 02 12 20:10:23
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

 > LA CÉLÈBRE FLECHE QUI APPARAIT À COTÉ DES LIENS

LA CÉLÈBRE FLECHE QUI APPARAIT À COTÉ DES LIENS


 Information sur la source

Note :
2,88 / 10 - par 8 personnes
2,88 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Niveau :Débutant Date de création :07/12/2003 Vu :9 299

Auteur : semetic

Ecrire un message privé
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

 Description

Ce code HTML / Vbscript parait long à cause du tableau et cellules employés pour bien aligner les liens et les fleches. Dans chaque cellule à gauche il y a une fleche avec arriere plan transparent ou le meme comme l'arriere plan du document ou ça celllule pour que le visiteur ne voit que la fleche, à droite  (dans chaque cellule droite il y a un lien) quand on passe la souris au dessus d'un lien,la fleche qui lui correspond apparait et elle se masque quand la souris est retirée.

Il faut noter que la meme fleche (image doit etre insérée dans les cellules gauches mais l'identiuficateur change ), regardez dans le code HTML.

Vous pouvez dessiner la petite fleche avec le paint ou recourir à une image prete dans le web, je signale que en dehor de changer les liens  et la fleche vous pouvez changer presque le but de ce script en inserant des images différentes , par exemple quand on pointe la souris sur le lien "contact" une image d'enveloppe apparait...,  on peut meme inverser les positions du lien avec son image correspondante ou encore les bordures du tableau si vous arrange qu'il soit visible.
Enfin liens et images ne se limitent pas à cinq, seulement chaque lien et image ajoutés doivent suivre l'exemple (dans le code HTML et dans le script VB)

Voilà un code très facile à comprendre et personnaliser avec rien de casse tete.


Source

  • <html>
  • <head>
  • <title>Sans titre</title>
  • </head>
  • <body bgcolor="black" text="white">
  • <table width="204" cellpadding="0" cellspacing="0" bordercolordark="blue" bordercolorlight="blue">
  • <tr>
  • <td width="46">
  • <p align="center"><img id="f1" style="visibility:hidden" src="fleche.gif" width="9" height="8" border="0"></p>
  • </td>
  • <td width="142"><div onMouseover="fleche1()" onMouseout="hidefleche1()"><a href="index.htm">Home page</a></div>
  • </td>
  • </tr>
  • <tr>
  • <td width="46">
  • <p align="center"><img id="f2" style="visibility:hidden" src="fleche.gif" width="9" height="8" border="0"></p>
  • </td>
  • <td width="142"><div onMouseover="fleche2()" onMouseout="hidefleche2()"><a href="support.htm">Support</a></div>
  • </td>
  • </tr>
  • <tr>
  • <td width="46">
  • <p align="center"><img id="f3" style="visibility:hidden" src="fleche.gif" width="9" height="8" border="0"></p>
  • </td>
  • <td width="142"><div onMouseover="fleche3()" onMouseout="hidefleche3()"><a href="contact.htm">Contact</a></div>
  • </td>
  • </tr>
  • <tr>
  • <td width="46">
  • <p align="center"><img id="f4" style="visibility:hidden" src="fleche.gif" width="9" height="8" border="0"></p>
  • </td>
  • <td width="142"><div onMouseover="fleche4()" onMouseout="hidefleche4()"><a href="links.htm">Liens</a></div>
  • </td>
  • </tr>
  • <tr>
  • <td width="46">
  • <p align="center"><img id="f5" style="visibility:hidden" src="fleche.gif" width="9" height="8" border="0"></p>
  • </td>
  • <td width="142"><div onMouseover="fleche5()" onMouseout="hidefleche5()"><a href="download.htm">T&eacute;l&eacute;chargement</a></div>
  • </td>
  • </tr>
  • </table>
  • <script language=vbscript>
  • Sub fleche1()
  • f1.style.visibility="visible"
  • End sub
  • Sub hidefleche1()
  • f1.style.visibility="hidden"
  • End sub
  • Sub fleche2()
  • f2.style.visibility="visible"
  • End sub
  • Sub hidefleche2()
  • f2.style.visibility="hidden"
  • End sub
  • Sub fleche3()
  • f3.style.visibility="visible"
  • End sub
  • Sub hidefleche3()
  • f3.style.visibility="hidden"
  • End sub
  • Sub fleche4()
  • f4.style.visibility="visible"
  • End sub
  • Sub hidefleche4()
  • f4.style.visibility="hidden"
  • End sub
  • Sub fleche5()
  • f5.style.visibility="visible"
  • End sub
  • Sub hidefleche5()
  • f5.style.visibility="hidden"
  • End sub
  • </script >
  • </body>
  • </html>
<html>
<head>
<title>Sans titre</title>
</head>
<body bgcolor="black" text="white">
<table width="204" cellpadding="0" cellspacing="0" bordercolordark="blue" bordercolorlight="blue">
    <tr>
        <td width="46">
            <p align="center"><img id="f1"  style="visibility:hidden"  src="fleche.gif" width="9" height="8" border="0"></p>
        </td>
        <td width="142"><div onMouseover="fleche1()" onMouseout="hidefleche1()"><a href="index.htm">Home page</a></div>
        </td>
    </tr>
    <tr>
        <td width="46">
            <p align="center"><img id="f2"  style="visibility:hidden"  src="fleche.gif" width="9" height="8" border="0"></p>
        </td>
        <td width="142"><div onMouseover="fleche2()" onMouseout="hidefleche2()"><a href="support.htm">Support</a></div>
        </td>
    </tr>
    <tr>
        <td width="46">
            <p align="center"><img id="f3"  style="visibility:hidden"  src="fleche.gif" width="9" height="8" border="0"></p>
        </td>
        <td width="142"><div onMouseover="fleche3()" onMouseout="hidefleche3()"><a href="contact.htm">Contact</a></div>
        </td>
    </tr>
    <tr>
        <td width="46">
            <p align="center"><img id="f4"  style="visibility:hidden"  src="fleche.gif" width="9" height="8" border="0"></p>
        </td>
        <td width="142"><div onMouseover="fleche4()" onMouseout="hidefleche4()"><a href="links.htm">Liens</a></div>
        </td>
    </tr>
    <tr>
        <td width="46">
            <p align="center"><img id="f5"  style="visibility:hidden"  src="fleche.gif" width="9" height="8" border="0"></p>
        </td>
        <td width="142"><div onMouseover="fleche5()" onMouseout="hidefleche5()"><a href="download.htm">T&eacute;l&eacute;chargement</a></div>
        </td>
    </tr>
</table>
<script language=vbscript>
Sub fleche1()
 f1.style.visibility="visible"
End sub

Sub hidefleche1()
 f1.style.visibility="hidden"
End sub

Sub fleche2()
 f2.style.visibility="visible"
End sub

Sub hidefleche2()
 f2.style.visibility="hidden"
End sub

Sub fleche3()
 f3.style.visibility="visible"
End sub

Sub hidefleche3()
 f3.style.visibility="hidden"
End sub

Sub fleche4()
 f4.style.visibility="visible"
End sub

Sub hidefleche4()
 f4.style.visibility="hidden"
End sub

Sub fleche5()
 f5.style.visibility="visible"
End sub

Sub hidefleche5()
 f5.style.visibility="hidden"
End sub
</script >
</body>
</html>

 Conclusion

Farid  e-mail: sidoummoudz@yahoo.fr    a++


 Sources du même auteur

COMPTEUR À REBOURS SECONDES, MINUTES ET HEURES DHTML(JAVASCR...
CHANGEMENT DU STYLE DES ZONES DE TEXTE PENDANT LA FOCALISATI...
UN SEUL ALERT POUR TOUTES LES ERREURS DE VALIDATION D'UN FOR...
UN SEUL ALERT POUR TOUTES LES ERREURS DE VALIDATION D'UN FOR...
ENCHAINEMENT DE MESSAGES EN BOUCLE FASCINANT

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos

Commentaires et avis

Commentaire de XSimpson le 28/12/2003 15:06:37

Ce script ne fonctionne carément pas, c'est dommage et la flèche c'est bidon ...

Tu as du te donné pas mal de difficulté à faire sa, mais tu pourrais l'adapter pour faire une sorte d'explorateur windows qui fonctione en JS entièrement.
Voilà

Commentaire de andlah le 06/09/2004 21:15:10

bah pour ma part le script marche #1, c'est pas extra mais bon ca fais s'que ca la a faire!

Commentaire de DeViL66 le 09/08/2005 22:12:46

ca serai pas mal d'avoir une fleche a telecharger sinon ca fonctionne, et c'est pas mal c'est deja ca ;)

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,811 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales