Bonjour,
Je cherche à faire des zooms sur des miniatures.
J'utilise le très bon script suivant :
------------------------------------------------------------------------------------------------------------------
Fonction JS pour l'affichage en grand des photos ET des commentaires au passage de la souris
source : http://myTooltip.free.fr v0.2 auteur : Frederic MADSEN
------------------------------------------------------------------------------------------------------------------
http://mytooltip.free.fr/mytooltip/demo.php
Démonstration
(le code source se trouve en Lien, sur la démo elle même).
Voici le code PHP appelant la fonction JS :
Code PHP :
<a href="javascript:void(0)"
title="monTitre" rel="mytooltip" rev="adressePhotoGrande" />
<img src="adressePhotoPetite" alt="commentairePhoto" />
</a>
, j'ai dû adapter le code JS à mes pages : Ayant plusieurs <DIV> dans ma page (<div id=entete> , <div id=corps> ...), contrairement à la démonstration où il n'y a qu'un seul <div>, j'ai donc changé :
Code Javascript :
var doc=document.documentElement
par
Code Javascript :
et ceci pour un bon cadrage de l'agrandissement de la photo et de ses commentaires :
Avec "documentElement" et plusieurs <div>, la taille totale de l'écran s'appliquait à la position du second <div> sur l'écran.
1ere question :
Le zoom se passe bien, l'affichage du titre de la photo également.
Cependant je ne parviens pas à afficher le "Alt" de la photo (les commentaires), alors que l'affichage de la démonstration proposée se passe très bien.
Voici le code proposé par Frederic MADSEN :
Code Java :
TOOLTIP.innerHTML='<img src="'+(a.rev?a.rev:a.href)+'"><br/><span>'+a.title+'</span>'+(a.firstChild.alt?'<br/><span>'+a.firstChild.alt+'</span>':'erreur alt')
Alors que la démonstration proposée par Frederic MADSEN se déroule fort bien sur Internet Explorer (version 7),
le code adapté sur mes pages ne s'applique pas sur IE.
Voici le code JS complet :
Code Javascript :
<?php
// ------------------------------------------------------------------------------------------------------------------------------------------
// FONCTION_INFOBULLE . JS Fonction JS pour l'affichage en grand des photos au passage de la souris
// ------------------------------------------------------------------------------------------------------------------------------------------
// source : http://myTooltip.free.fr v0.2 auteur : Frederic MADSEN
/*
On peut modifier les 3 premières lignes :
1 - DIR : Orientation des tooltip (1=North-East, 2=South-East, 3=South-West and 4=North-West).
2 - OFFSETX : décalage Horizontal par rapport à la position de la souris.
3 - OFFSETY : décalage Vertical par rapport à la position de la souris.
*/
?>
DIR=2
OFFSETX=10
OFFSETY=10
function moveTooltip(e){ /* paramètres de l’écran */
if(!e)e=event /* mouseX mouseY : Renvoie la position horizontale (ou verticale) actuelle (en pixels) de la souris sur l'écran actif */
/* var doc=document.documentElement */ /* documentElement : représente l'élément racine associé au document. la racine de l'arbre du document XML */
var doc=document.body /* BODY à la place de "documentElement" (car plusieurs <div> . . . </div>) */
var scrollLeft=doc.scrollLeft||document.body.scrollLeft /* scrollLeft : Définit le nombre de pixels dont le contenu est défilé vers la GAUCHE */
var scrollTop=doc.scrollTop||document.body.scrollTop /* scrollTop : Définit le nombre de pixels dont le contenu est défilé vers la HAUT */
var mouseX=e.clientX+scrollLeft /* clientX : Obtient la coordonnée x de la position du pointeur de la souris par rapport à la zone client de la fenêtre du navigateur */
var mouseY=e.clientY+scrollTop /* clientY : Obtient la coordonnée y de la position du pointeur de la souris par rapport à la zone client de la fenêtre du navigateur */
var winWidth=doc.clientWidth+scrollLeft /* clientWidth : représente la largeur intérieure d'un élément */
var winHeight=doc.clientHeight+scrollTop
var tooltipWidth=TOOLTIP.offsetWidth
var tooltipHeight=TOOLTIP.offsetHeight
var edgeTop=e.clientY-OFFSETY
var edgeRight=winWidth-mouseX-OFFSETX
var edgeBottom=winHeight-mouseY-OFFSETY
var edgeLeft=e.clientX-OFFSETX
if(DIR==1||DIR==2)
if(edgeRight<tooltipWidth)TOOLTIP.style.left=winWidth-tooltipWidth+'px'
else TOOLTIP.style.left=mouseX+OFFSETX+'px'
else
if(edgeLeft<tooltipWidth)TOOLTIP.style.left=scrollLeft+'px'
else TOOLTIP.style.left=mouseX-tooltipWidth-OFFSETX+'px'
if(DIR==1||DIR==4)
if(edgeTop<tooltipHeight)TOOLTIP.style.top=scrollTop+'px'
else TOOLTIP.style.top=mouseY-tooltipHeight-OFFSETY+'px'
else
if(edgeBottom<tooltipHeight)TOOLTIP.style.top=winHeight-tooltipHeight+'px'
else TOOLTIP.style.top=mouseY+OFFSETY+'px'}
function showTooltip(a){
clearTimeout(timer)
TOOLTIP.innerHTML='<img src="'+(a.rev?a.rev:a.href)+'"><br/><span>'+a.title+'</span>'+(a.firstChild.alt?'<br/><span>'+a.firstChild.alt+'</span>':'<br/>erreur alt')
TOOLTIP.style.display='block'}
// TOOLTIP.innerHTML='<img src="'+(a.rev?a.rev:a.href)+'"><br/><span>'+a.title+'</span>'+(a.firstChild.alt?'<br/><span>'+a.firstChild.alt+'</span>':'<br/>erreur alt')
function hideTooltip(){
TOOLTIP.style.display='none'}
var timer
TOOLTIP=document.createElement('div')
TOOLTIP.id='mytooltip'
TOOLTIP.onmouseover=function(){clearTimeout(timer)}
TOOLTIP.onmouseout=function(){timer=setTimeout(hideTooltip,10)}
document.body.appendChild(TOOLTIP)
TLINK=document.getElementsByTagName('a') // vérifie l'alignement d'une série de cellules d'un tableau.
for(i=0;i<TLINK.length;i++)
if(TLINK[i].rel=='mytooltip'){
TLINK[i].onmouseover=function(){showTooltip(this)}
TLINK[i].onmouseout=function(){timer=setTimeout(hideTooltip,10)}
new Image().src = (TLINK[i].rev?TLINK[i].rev:TLINK[i].href)}
document.onmousemove=function(e){if(TOOLTIP.style.display=='block')moveTooltip(e)} // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
Et voici l'appel de cette fonction JS dans le code :
Code HTML :
<script type="text/javascript" language="javascript" src="../includes/panier/fonction_mytooltip.js"> </script> <!-- DOIT être mis dans le code à la fin du <body> -->