PHOTO OU BOUTON S'ECLAIRANT AU PASSAGE DE LA SOURIS

1/ Pour éclairer une photo au passage de la souris, rien de plus simple...
Coller le code suivant dans votre page d'accueil ou sur la page ou vous voulez mettre l'effet, avant la balise </head>

<SCRIPT language=javascript><!--Rollover light au passage de la souris--> 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> <!--Lightbox--> <script type="text/javascript" src="https://storage.canalblog.com/51/23/96840/13618117.js"></script> <script type="text/javascript" src="https://storage.canalblog.com/72/20/96840/13618095.js"></script> <script type="text/javascript" src="https://storage.canalblog.com/22/68/96840/13618109.js"></script> <script language="JavaScript"><!--Effet zoom sur image--> <!-- //PLF-http://www.jejavascript.net/ var coeff=4;//Coefficient de reduction var larg=400;//largeur maxi de l'image var haut=388;//hauteur maxi de l'image var coeffinit=coeff; function changer() { if (document.image.width < larg) { coeff = coeff-0.2; document.image.width = Math.round(larg/coeff); document.image.height = Math.round(haut/coeff); chang=window.setTimeout('changer();',60);//vitesse de l'effet } else {window.clearTimeout(chang);} } function initial() { if (document.image.width > larg/coeffinit) { window.clearTimeout(chang); coeff = coeff+0.2; document.image.width = Math.round(larg/coeff); document.image.height = Math.round(haut/coeff); initi=window.setTimeout('initial();',60);//vitesse de l'effet } else {window.clearTimeout(initi);} } //--> </script>

et collez cette ligne de code dans la page d'accueil, à l'endroit ou vous voulez mettre la photo.

<img class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" src="https://storage.canalblog.com/91/96/255038/14312242.jpg" style="opacity: 0.25;" />

Remplacez l'adresse en rouge par l'adresse de votre image.

2/ Pour un bouton lien (qui dirige vos visiteurs sur un site) c'est le même principe, vous devez collez le code plus haut avant le </head>

Et coller dans la page d'accueil cette ligne de code en changeant l'adresse de l'image, et l'url.
Le nom de la photo apparait au passage de la souris, changez le aussi.

<a href="http://demolitetuto.canalblog.com/profile/192573/index.html" title="Demolite et son chéri..." target="_blank"><img class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" src="https://storage.canalblog.com/91/96/255038/14312242.jpg" style="opacity: 0.25;" /></a>

Comments

[Sophie59]

Bonjour !
J'ai un petit probleme; c'est a dire que je ne comprends pas ou il faut copier le code deja au depart, lorsque tu dis : "avant la balise head", je ne comprends pas trop.
Reponds moi stp, pcq ton site est tres tres interessant,mais je n'arive pas a m'en servir...
Merci

[Z]

Salut [coucou],

Déjà un grand merci pour toutes les infos [judo], ça rends la vie des blogueurs sympatiques ! En fait, me concernant, j'ai voulu utiliser cet effet de lumière au passage de la souris, et ce, pour les 2 premières vignettes que j'ai en colonne droite de mon blog: http://zetlejazz.canalblog.com/ à savoir pour la vignette "Z email" et "Abonnement RSS". Par contre, j'ai été gené car lorsque la souris n'est pas dessus, la vignette est sombre ! Est-il possible que ma vignette soit comme elle est actuellement mais que le passage de la souris geénère une lumière ?

Peux-être une variante de ce script ?

A bientôt...

Bonne soirée

Z

[Demolite]

Hé non...demain soir [cool]
Attention pas de bêtises en mon absence ![j attends]
Sinon ça va barder à mon retour [judo]
Je compte sur toi pour faire quelques déco sur ton blog...lance toi ! [100 pas]et fais une copie de tes pages avant d'y toucher.
Bises [bisou]
à bientôt...retour le 29 juillet [courir]

[Olivier]

s'êtes pas encore partis en vacances...au chaud...pas comme ici...
Bon je suis très studieux...J'essaie de lire(ce qui n'est pas trop difficile pour moi) et de comprendre (ce qui est très difficile pour moi...
T'imagines le boulot que tu auras en rentrant pour remettre tout en ordre sur mon blog...à ta place...Je resterai en vacances...
Bises