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

Jeanpainperdu 2 Messages postés vendredi 10 juillet 2009Date d'inscription 4 juin 2014 Dernière intervention - 4 juin 2014 à 15:11 - Dernière réponse : Exileur 1333 Messages postés mercredi 31 août 2011Date d'inscription 13 octobre 2018 Dernière intervention
- 20 juin 2014 à 17:09
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 

Votre réponse

5 réponses

Meilleure réponse
@karamel 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - Modifié par kazma le 4/06/2014 à 16:36
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 !

Merci @karamel 1

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 101 internautes ce mois-ci

jordane45 22944 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 octobre 2018 Dernière intervention - 4 juin 2014 à 16:44
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
BunoCS 14181 Messages postés lundi 11 juillet 2005Date d'inscriptionModérateurStatut 23 octobre 2018 Dernière intervention - 4 juin 2014 à 15:28
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
jordane45 22944 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 octobre 2018 Dernière intervention - 4 juin 2014 à 16:38
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
Exileur 1333 Messages postés mercredi 31 août 2011Date d'inscription 13 octobre 2018 Dernière intervention - 20 juin 2014 à 17:09
0
Merci
Y'a une feuille de style ? Ou propriété CSs sur ton div ?
Commenter la réponse de Exileur

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.