01-06-2007

ROLLOVER OU BOUTON LIEN S'ECLAIRANT AU PASSAGE DE LA SOURIS

A la demande de Sunrise...

Tout d'abord, il faut s'organiser...alors commencez par trouver les images qui vont représenter les liens, et ensuite, redimensionnez les 60x60.

Maintenant, ouvrez votre "page d'accueil" et "collez" ce code ci-dessous avant la balise </head>

<SCRIPT language=javascript> function popup(page,nom,option) { window.open(page,nom,option); } </SCRIPT> <style type="text/css"> .gradualshine{ filter:alpha(opacity=50); -moz-opacity:0.2; } </style> <script type="text/javascript"> /*********************************************** * Gradual Highlight image script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var baseopacity=25 function slowhigh(which2){ imgobj=which2 browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : "" instantset(baseopacity) highlighting=setInterval("gradualfade(imgobj)",50) } function slowlow(which2){ cleartimer() instantset(baseopacity) } function instantset(degree){ if (browserdetect=="mozilla") imgobj.style.MozOpacity=degree/100 else if (browserdetect=="ie") imgobj.filters.alpha.opacity=degree } function cleartimer(){ if (window.highlighting) clearInterval(highlighting) } function gradualfade(cur2){ if (browserdetect=="mozilla" && cur2.style.MozOpacity<1) cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99) else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=10 else if (window.highlighting) clearInterval(highlighting) } </script>

Ensuite, "copiez" le code suivant, et "collez" le dans un bloc note pour pouvoir travailler dessus, c'est à dire mettre vos liens et images à la place des miens, sans risquer de faire une bêtise(s) dans votre page d'accueil, je pense à certaines qui tapent sur leur clavier avec les gants de boxe...

Une fois que vous avez votre code nickel, "collez" le dans la "page d'accueil" à l'endroit ou vous voulez mettre vos liens top moumoute !

<p > <a href="http://sylposelance.canalblog.com/" title="Sylpo" target="_blank"><img class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" src="http://storage.canalblog.com/92/54/255038/13773438.gif" style="opacity: 0.25;" /></a> <a href="http://ecrireetmanger.canalblog.com/" title="Je cuisine, tu blogues" target="_blank"><img class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" src="http://storage.canalblog.com/21/83/255038/13773300.jpg" style="opacity: 0.25;" /></a> <a href="http://choubinette.canalblog.com/" title="Miss Choibinette" target="_blank"><img class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" src="http://storage.canalblog.com/08/11/255038/13773342.gif" style="opacity: 0.25;" /></a> <a href="http://sushietcompagnie.canalblog.com/" title="Le grand méchant Cook" target="_blank"><img class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" src="http://storage.canalblog.com/05/95/251752/31060441.jpg" style="opacity: 0.25;" /></a> </p>

Pas de panique...c'est tout bête...suivez mes instructions, n'allez pas trop vite et tout ira bien...
Voici la partie de code pour un bouton lien, ensuite c'est de la répétition.
Changez uniquement les parties en couleur comme indiqué ci-dessous.

<ul>
<p >
<a href="Url du site" title="Nom du site" target="_blank"><img class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" src="Adresse de votre image 60x60" style="opacity: 0.25;" /></a>
</p>
</ul>

PS: Vous pouvez aussi mettre ce code dans un message, en passant du mode "texte" au mode "htlm"