Bonjour,
<config>Windows 7 / Firefox 3.5.16</config>
J'ai récupéré ce code en html javascript qui est sensé reproduire un menu avec effet dock de zoom.Il fonctionne seulement des que je veux le passer en xhtml 1.0 , l'animation ne fonctionne plus.
Si quelqu'un pouvait m'aider svp car je sèche :
voici mon code :
Partie html :
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="css/styl.css" />
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<script type="text/javascript" src="js/menu2.js" >
</script>
</head>
<body onload="ouEstMaSouris(event)" class="body2">
<div class="style_du_div" id="dock" onmousemove="ouEstMaSouris(event)">
<a href="pages/terminologie.htm" title="Terminologie"><img src="images/term.png" style="width:50;height:50;" border="0" align="top" alt="ceece" /></a>
<a href="pages/structure.htm" title="Structure"><img src="images/struc.jpeg" style="width:50;height:50;" border="0" align="top" alt="ceece" /></a>
<a href="pages/form_et_evol.htm" title="Formation et évolution"><img src="images/form.gif" style="width:50;height:50;" border="0" align="top" alt="ceece" /></a>
<a href="pages/context_galac.htm" title="Contexte galactique"><img src="images/cont.jpeg" style="width:50;height:50;" border="0" align="top" alt="ceece" /></a>
<a href="pages/decouv_explo.htm" title="Découverte et exploration"><img src="images/decouv.png" style="width:50;height:50;" border="0" align="top" alt="ceece" /></a>
<a href="pages/planete.html" title="Planète"><img src="images/planete.gif" style="width:50;height:50;" border="0" align="top" alt="ceece" /></a>
<a href="pages/quizz.html" title="Quizz"><img src="images/quizz.png" style="width:50;height:50;" border="0" align="top" alt="ceece" /></a>
<a href="pages/livreor.html" title="Livre d'or"><img src="images/livre.png" style="width:50;height:50;" border="0" align="top" alt="ceece" /></a>
<a href="pages/rechercher.html" title="Rechercher"><img src="images/rech.jpg" style="width:50;height:50;" border="0" align="top" alt="ceece" /></a>
</div>
<br /><br /><br /><br /><br /><br />
<div id="hg">
<div id="hd">
<div id="bg">
<div id="bd">
<div id="contenu">
<h1 class="h">Le système solaire</h1>
<p>Mon texte ..............................</p>
</div>
</div>
</div>
</div>
</div>
<hr />
<p><a href="pages/terminologie.htm">Suivant</a></p>
</body>
</html>
partie Javascript :
MIN = 33 ; // largeur minimum en pixel
MAX = 115 ; // largeur maximum en pixel
REACTION = 1.2 ; // réaction des icons par rapport à la souris. plus grand --> plus d'icons qui réagissent
A = ((MIN-MAX)/(MAX * REACTION)) ; // coef directeur de la droite d'agrandissement
IE = document.all ? 1 : 0 ;
img_tags = new Array();
function ouEstMaSouris(e)
{
var dock = document.getElementById('dock') ; // div qui contient la barre de menu.
var x = 0;
if (IE) x = e.clientX ; // coordonnées x de la souris sur IE 5.5
else x = e.pageX ; // coordonnées x de la souris sur Mozilla ou Netscape 7
x -= dock.offsetLeft ; // on modifie la coordonnée pour quelle soit relatif au div et non à la fenetre.
img_tags = dock.getElementsByTagName('img') ; // les images contenus dans le div
for(i=0 ; i<img_tags.length ; i++) // pour chaque images
{
millieu = img_tags[i].offsetLeft + parseInt(img_tags[i].style.width)/2 ;
delta = millieu - x ;
if (delta < 0) delta *= -1 ;
coef = A * delta + MAX ;
if (coef < MIN) coef = MIN ;
else if (coef > MAX) coef = MAX ;
img_tags[i].style.width=coef;
img_tags[i].style.height=coef;
}
}