Franc83

Menu Fade

22-07-2008

Opacity Script

Un script qui fade-in et fade-out sur des tags divers

Ce script vous permet d'ajouter des effets de fade-in ou fade-out à des images, du texte ou ce que vous voulez

Instructions:

Copier/coller ce script dans la section <HEAD> de votre page <HTML> :

<script language="javascript" src="opacity.js"></script>
Créez votre contenu HTML.
"Enfermez" Votre contenu dans un élément div.
Assignez à votre div une valeur d'id unique.
A l'intérieur de la page insérer des balises javascript, APRES l'élément auquel appliquer l'effet, et utiliser le "addFadeObject()" pour cet élément.
Complétez les réglages désirés et introduisez les dans le code.

Formats possibles du addFadeObject() :

addFadeObject( elementIDstring , start_opacity , end_opacity , opacity_incr , time_per_incr )

elementIDstring = chaîne de caractères de l'attribut ID
start_opacity =niveau de départ de l'opacité(0-100).
end_opacity = niveau final de l'opacité(0-100).
opacity_incr = incrémentation du changement d'opacité par paliers.
time_per_incr = temps en milisecondes l(1000 = 1 second) entre chaque incrémentation d'opacité.

Ce script fonctionne sur IE4+et Netscape 6+. Les autres navigateurs ne verront pas les éléments. Sur NS4, si cela ne fonctionne pas, utiliser la méthode des "ILAYER". Le script ne fonctionnera toujours pas, mais cela ressemblera quand meme à quelque chose.

Exemples :

Passez vitre souris sur les éléments ci dessous pour voir les effets de fade. Vous pouvez pousser à l'extrème en réglages pour faire complètement disparaitre les éléments.

Vous disposez aussi des codes html pour la mise en place des codes.
Tous ces exemples fonctionnent sur ns4, filezilla et ie6

Example 1
Fade-in avec des images

HTML pour cet exemple :

Example 2
Fade-out avec des images

HTML pour cet exemple :

Exemple 3
Fade-in utilisant du texte et du CSS"

Text 1

Text 2

Text 3

Text 4

Text 5

Text 6

Text 7

Text 8

HTML pour cet exemple :

Exemple 4
Fade-out utilisant un texte sous le bouton

Text 1

Text 2

Text 3

Text 4

HTML pour cet exemple :

Dans le même esprit
Boutons rollover Div boutons Loader Ajax Menu Barre CSS Menu cascade Menu Diodes 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

Commenter cet article

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