Expansion d'image à l'ouverture [Résolu]

Messages postés
2
Date d'inscription
vendredi 10 juillet 2009
Statut
Membre
Dernière intervention
4 juin 2014
-
Bonjour,
J'avais trouvé le très joli script ci dessous sur Espace JavaScript mais j'ai cru comprendre que ce site ne fonctionnait plus. A l'ouverture de la page une zone s'agrandit et je voudrais avoir le même effet avec une image. Mais je suis débutant et je ne sais pas comment modifier le code du <div id= pour l'adapter à l'expansion d'une image. Merci de m'aider ! Amicalement. J*

Voici l'ensemble de la page :

<html>
 <head>
 <title>Script : Agrandissement d'objet</title> 
 <script language="javascript">
 /*
 SCRIPT JAVASCRIPT
 ESPACE JAVASCRIPT.COM
 [http://www.espacejavascript.com]
 */

 function showAnim(Calque, TailleX, TailleY)
 {
  Longueur = parseInt(document.getElementById("Frame").style.width);
  Hauteur = parseInt(document.getElementById("Frame").style.height);
  if(Longueur < TailleX)
  {
   CoeffRedX = Math.round(TailleX - Longueur / 20);
   
   VitesseX = ((TailleX - Longueur) / 20);
   NewTailleX = Longueur + VitesseX;
   
   VitesseY = (NewTailleX / TailleX)*TailleY - Hauteur;
   NewTailleY = Hauteur + VitesseY;

  if(document.getElementById)
  {
   document.getElementById("" + Calque + "").style.width = NewTailleX + "px";
   document.getElementById("" + Calque + "").style.height = NewTailleY + "px";
  }
  else
   if(document.all)
   {
    document.all["" + Calque + ""].style.width = NewTailleX + "px";
    document.all["" + Calque + ""].style.height = NewTailleY + "px";
   }
   
   window.setTimeout("showAnim('" + Calque + "', " + TailleX + ", " + TailleY + ");", 10);
  }
 }  
</script>
 
 </head>
 <body>
 <br>
<br>
<div id="Frame" style="position: absolute; left: 200px; top: 100px; width: 0px; height: 0px; background: #FF0000; border: 3px double #000000">
</div>
<body onload="javascript:showAnim('Frame', 400, 300);">
</body>
 </html>
Afficher la suite 

4 réponses

Meilleure réponse
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
51
1
Merci
bonjour

remplace le div par une image

<img src="chemin_image.jpgid" id="Frame" style="position: absolute; left: 200px; top: 100px; width: 0px; height: 0px; background: #FF0000; border: 3px double #000000">

cours Forest cours !

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 202 internautes nous ont dit merci ce mois-ci

jordane45
Messages postés
26969
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2019
318 -
une propriété ID pour les IMG ?
Il me semblait que cet élément n'en avait pas... mais ...Ah oui... ça semble fonctionner en effet...
:-)
Commenter la réponse de @karamel
Messages postés
14681
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
5 décembre 2019
90
0
Merci
Hello,

J'ai rajouté les balises Code pour gagner en lisibilité. Merci d'y penser pour la prochaine fois. Plus d'infos ici
Commenter la réponse de BunoCS
Messages postés
26969
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2019
318
0
Merci
Bonjour,
Il suffit juste de mettre ton image dans la DIV qui s'agrandit... et mettre sa hauteur et sa largeur à 100%

<div id="Frame" style="position: absolute; left: 200px; top: 100px; width: 0px; height: 0px; background: #FFFFFF; border: 3px double #000000">
<img src="manqueSoleil.jpg" style="width:100%;height:100%"></img>
</div>


src="manqueSoleil.jpg"
à remplacer par ton image bien entendu.
*
Commenter la réponse de jordane45
Messages postés
1436
Date d'inscription
mercredi 31 août 2011
Statut
Membre
Dernière intervention
22 octobre 2019
0
Merci
Y'a une feuille de style ? Ou propriété CSs sur ton div ?
Commenter la réponse de Exileur