La célèbre fleche qui apparait à coté des liens

Commenter

Contenu du snippet

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 / Exemple : 


<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élé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++

A voir également

S'inscrire maintenant

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.

Du même auteur (semetic)