Effet d'opacité
Intérêt du script
De quelle manière
Dans le Head
Dans le Body
Les références
Partage du savoir
by Pepe ©
 
Accueil  Arborescence  Page précédente

Intérêt du script  Up Page
Son utilité
Ce script permet de "lever" le voile d'opacité au survol de l'image.

De quelle manière  Up Page
Comment s'y prendre
Avant le survol de l'image, celle-ci va vous paraître recouverte d'un voile, comme si vous regardiez au travers d'un rideau, d'une vitre sale, ou qu'un dépot de poussière se serait posé dessus.

Dans le Head  Up Page
Copiez-collez !
<head>
<script>

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}

clearTimeout(nereidFadeTimers[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

</script>
</head>

Dans le Body  Up Page
Copiez-collez !
<body>
 
<a href="http://citedeslibertes.free.fr/">
 
<img src="Hydrogene.jpg"
onMouseOut=nereidFade(this,40,60,5)
onMouseOver=nereidFade(this,100,40,10)
style="FILTER: alpha(opacity=40)"
border=0>
 
</a>
 
</body>
 
Modifiez si désirez !
href=""
Si vous souhaitez que l'image amène l'internaute vers une autre page html (page web), indiquez la destination (ou nom) de cette page: "nom.html" ou "nom.htm". Auquel cas, supprimez toute la ligne de commande href="http://citedeslibertes.free.fr/"
Je rappelle que le lien vers cette autre page html (nom.html ou nom.htm) aura lieu lorsque l'internaute cliquera sur l'image (double-clics).
 
src=""
Vous allez inscrire ici l'image sur laquelle va s'effectuer l'effet d'opacité. Pensez à charger l'image dans le même dossier. L'image peut être en format jpeg (.jpg ou .jpe), format gif (.gif), en format bitmap (.bmp), et cetera ...
 
nereidFade(A,B,C,D)
A: Objet à modifier (peut-etre 'this')
B: Pourcentage d'opacité à donner
C: Accélération de changement d'opacité
D: Vitesse de changement d'opacité
 
alpha
L'échelle d'opacité varie de zéro à cent. Plus vous augmentez la valeur de l'opacité, moins elle devient importante.
La valeur que vous indiquez ici correspond à l'état d'opacité de l'image, au moment où vous arrivez sur cette page. La même caractéristique se produira quand vous réactualiserez la page web (touche F5, raccourci !)
A ne pas confondre avec l'état de l'image, à l'instant où vous quitterez son survol (onMouseOut). Cette valeur correspondra à la valeur d'opacité par défaut.
 
border
Pour ne pas qu'une bordure se rajoute autour de votre image, choisir une bordure égale à zéro, ce qui signifie que vous voulez une bordure d'une épaisseur de zéro unité de longueur. Par défaut, si vous ne le stipulez point, l'interface (serveur internet) vous en rajouter une.

Les références  Up Page
Réseau Pepe
Source
 
Pourquoi ce site
Je crois que, si les êtres humains que nous sommes ne parviennent pas toujours à évoluer comme ils le souhaiteraient _à s'épanouir professionnellement, sentimentalement et sexuellement (ce que j'appelle les trois pôles d'intérêts) c'est parce qu'il y a des barrages qui entravent leur désir d'accéder à un rêve inachevé. Je pars du principe que tout est possible, à condition de s'entourer de gens qui nous poussent à croire en nous.
 
Contribuer au Réseau Pepe
Ce site est avant tout une encyclopédie ouverte à l'imagination et au savoir, où chacun(e) d'entre vous peut participer.
Si vous avez envie de partager une passion, ou si vous sentez le besoin de vous exprimer sur un point précis, je vous invite à m'adresser un e-mail (adresse électronique accessible sur ma page d'accueil).

Partage du savoir  Up Page
Partagez pour mieux apprécier !
Si vous cliquez sur l'image, vous verrez une de mes anciennes pages d'accueil de mon site internet. Cette page d'accueil fut réalisée avec l'effet d'opacité que je vous invite à d'utiliser.