Expansion d'image à l'ouverture

Résolu

Jeanpainperdu Messages postés 2 Date d'inscription vendredi 10 juillet 2009 Statut Membre Dernière intervention 4 juin 2014 - Modifié par BunoCS le 4/06/2014 à 15:27
Exileur Messages postés 1475 Date d'inscription mercredi 31 août 2011 Statut Membre Dernière intervention 16 décembre 2022 - 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>

A voir également:

Jpgid
Convolution image - Conseils pratiques -Java
Échec de l'ouverture de session de l'utilisateur - Forum SQL
Dessiner image ✓ - Forum C# / .NET
Wpf button image ✓ - Forum C# / .NET
Fpdf image - Forum PHP

4 réponses

Réponse 1 / 4

@karamel Messages postés 1840 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 23 novembre 2023 148
Modifié par kazma le 4/06/2014 à 16:36

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 !

jordane45 Messages postés 37850 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 novembre 2023 342
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...
:-)

Réponse 2 / 4

BunoCS Messages postés 15426 Date d'inscription lundi 11 juillet 2005 Statut Modérateur Dernière intervention 28 novembre 2023 102
4 juin 2014 à 15:28

Hello,

J'ai rajouté les balises Code pour gagner en lisibilité. Merci d'y penser pour la prochaine fois. Plus d'infos ici

Réponse 3 / 4

jordane45 Messages postés 37850 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 novembre 2023 342
4 juin 2014 à 16:38

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.
*

Réponse 4 / 4

Exileur Messages postés 1475 Date d'inscription mercredi 31 août 2011 Statut Membre Dernière intervention 16 décembre 2022
20 juin 2014 à 17:09

Y'a une feuille de style ? Ou propriété CSs sur ton div ?

Discussions similaires

image avec FPDF

vectoriser un logo sous photoshop

insérer une image dans une form

Echec de l'ouverture de session de l'utilisateur sa

[Photoshop] : Image noir et blanc en image blanc et noir ?

Votre réponse

Discussions similaires