Melting suicidal serenity.

jeudi, octobre 27, 2005

Extrait du forum "Talk for fun"
écrit par styx
¤ Habitué ¤
Inscrit le: 24 Juin 2003
Messages: 211
Localisation: Grimbergen

Page HTML d'exemple  <TITLE>Tout JavaScript.com - Transparence alpha progressive</TITLE>  <SCRIPT language=javascript> // Script réalisé par http://www.toutjavascript.com var TabAlpha=new Array(); TabAlpha.length=5; // 5 images alpha A MODIFIER SI PLUS D'IMAGES for (var alphaI=0;alphaI<TabAlpha.length;alphaI++) { TabAlpha[alphaI]=-1; } function ModifAlpha(no,alpha){ if (document.images["img"+no]) { if (document.images["img"+no].filters) { TabAlpha[no]=alpha; if (tjstimer==0) {setTimeout("tjstimerAlpha()",30)} } } } var tjstimer=0; function tjstimerAlpha() { var opacity=0; for (var alphaI=0;alphaI<TabAlpha.length;alphaI++) { if (TabAlpha[alphaI]!=-1) { opacity =TabAlpha[alphaI] - document.images["img"+alphaI].filters.alpha.opacity; if (opacity!=0) { tjstimer=1; document.images["img"+alphaI].filters.alpha.opacity+=Math.abs(opacity)/opacity * 5; } else { TabAlpha[alphaI]=-1 } } } if (tjstimer==1) {setTimeout("tjstimerAlpha()",30);} else {tjstimer=0} } </SCRIPT><meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>
<style type="text/css">@import url(https://www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css);
div.b-mobile {display:none;}
</style>

</head><BODY bgcolor=white><script type="text/javascript">
 function setAttributeOnload(object, attribute, val) {
 if(window.addEventListener) {
 window.addEventListener('load',
 function(){ object[attribute] = val; }, false);
 } else {
 window.attachEvent('onload', function(){ object[attribute] = val; });
 }
 }
 </script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
 gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
 if (gapi.iframes && gapi.iframes.getContext) {
 gapi.iframes.getContext().openChild({
 url: 'https://www.blogger.com/navbar/17646488?origin\x3dhttp://htmquoi.blogspot.com',
 where: document.getElementById("navbar-iframe-container"),
 id: "navbar-iframe"
 });
 }
 });
 </script><CENTER><BIG>Transparence alpha progressive</BIG></CENTER> La transparence des images varie progressivement quand la souris passe sur une image. Quand la souris quitte l'image, la transparence revient progressivement à sa valeur d'origine. Attention cet effet n'est possible qu'avec Internet Explorer 5 et +. Pour les autres navigateurs, ce script est sans effet mais ne génère pas d'erreur de script :) <CENTER>  <a href="javascript:alert('Les liens ne sont pas actifs dans cet exemple...')" onmouseover="ModifAlpha(1,100)" onmouseout="ModifAlpha(1,40)"> <img name="img1" src="http://photobucket.com/albums/b314/pyogazel/emoticons/th_winter_grin.gif" border="0" style="filter:alpha(opacity=40)" width="25" /></a> <a href="javascript:alert('Les liens ne sont pas actifs dans cet exemple...')" onmouseover="ModifAlpha(2,100)" onmouseout="ModifAlpha(2,40)"> <img name="img2" src="http://photobucket.com/albums/b314/pyogazel/emoticons/th_snowman2.gif" border="0" style="filter:alpha(opacity=40)" width="25" /></a> <a href="javascript:alert('Les liens ne sont pas actifs dans cet exemple...')" onmouseover="ModifAlpha(3,100)" onmouseout="ModifAlpha(3,40)"> <img name="img3" src="http://photobucket.com/albums/b314/pyogazel/emoticons/th_banghead.gif" border="0" style="filter:alpha(opacity=40)" width="25" /></a> <a href="javascript:alert('Les liens ne sont pas actifs dans cet exemple...')" onmouseover="ModifAlpha(4,100)" onmouseout="ModifAlpha(4,40)"> <img name="img4" src="http://photobucket.com/albums/b314/pyogazel/emoticons/th_coeur.gif" border="0" style="filter:alpha(opacity=40)" width="25" /></a> </center> Comment ça marche? La transparence des images varie progressivement quand la souris passe sur une image. Quand la souris quitte l'image, la transparence revient progressivement à sa valeur d'origine. Attention cet effet n'est possible qu'avec Internet Explorer 5 et +. Pour les autres navigateurs, ce script est sans effet mais ne génère pas d'erreur de script :) <a href="http://www.toutjavascript.com/" target="_blank">Tout JavaScript.com</a>

Il faut :
- nommer l'image img name = "img3" ou 'img3'
- lui attibuer un alpha style = "filter:alpha(opacity=40)"
- attribuer la modification d'alpha à l'évènement "survol" dans les attibuts du lien (dans la balise balise A h r e f = ) onmouseover = "ModifAlpha(3,100)" onmouseout = "ModifAlpha(3,40)" 3 étant le nom de l'image, 100 et 40 l'opacité.

désolée pour la bannière blogger dans la page d'exemple, il suffit de supprimer la division dans le code :)

Encore des friandises...
jeudi, octobre 27, 2005

...