11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai réussi à adapter un effet zoom sur une image à partir d'un codage JavaScript trouver sur le web. Mais je n'arrive pas à trouver le codage adéquat pour que le zoom automatique parte du centre de l'image et non du haut. Je ne sais pas coder dans ce langage.

Cet effet est sur la page home du site web : http://claude.pasquer.fr/

Et le code du zoom est :

  <script type="text/javascript">
  <!--
  //ZOOM ACCUEIL/

  var coeff=34;//Coefficient de reduction
  var larg=1110;//largeur maxi de l'image
  var haut=648;//hauteur maxi de l'image
  var coeffinit=coeff;
  function changer() {
  if (document.image.width < larg) {
  coeff = coeff-1;
  document.image.width = Math.round(larg/coeff);
  document.image.height = Math.round(haut/coeff);
  chang=window.setTimeout('changer();',120);//vitesse de l'effet
  }
  
  else {window.clearTimeout(chang);
     //location.href="http://claude.pasquer.fr/page/1"/
     }
  }
  </script>


juste avant </head> de la page HTML

et un autre bout de code JavaScript est dans le contenu de la page juste après le code de l'image :
<div class="intro">
<a href="/page/1"><img src="http://pasquer.fr/claude/public/intro.png" name="image" border="0" /></a></div>
<script type="text/javascript">
<!--
//ZOOM ACCUEIL/
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>


Avec-vous une solution pour obtenir l'effet voulu ?
Le codage adopté est-il le plus simple pour cela ?

Merci de votre aide.
Re-Bonjour,

Bon j'ai trouvé une solution en plaçant l'image dans un tableau où je centre l'image et ça marche.

Je ne vois pas comment faire autrement ou plus léger ?

<table style=" text-align: left; width: 100%; height: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle;">
<div class="intro">
<a href="/page/1"><img src="http://pasquer.fr/claude/public/intro.png" name="image" border="0" /></a></div>
<script type="text/javascript">
<!--
//ZOOM ACCUEIL/
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>
<br />
</td>
</tr>
</tbody>
</table>