Effet d'ouverture par zoom d'image

Télécharger le projet
Commenter

Description

Pour donner un effet dynamique à vos diaporamas...

L'image part en s'agrandissant jusqu'à obtenir sa taille réelle en milieu de cadre...

Tout est paramétrable, position de fin, nombre de trame d'affichage ...etc... (dans le script)

Le but est de vous présenter les fonctions et non dans faire un fichier.js partable, pour cela je vous laisses faire..

Le script est perfectionnable, c'est évident, et devrait permettre de répondre à pas mal de question que se posent certains Forummeux, pas beau le terme quand même...

A vos claviers et bonne visu...
:O))

Source / Exemple : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Effet d'ouverture d'Image [PetoleTeam]</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
  color : #000000;
  font-size : 13px;
  font-family : Verdana;
  background-color : #fcfcf0;
  margin : 10px;
}
.T0 {
  color : #bb0000;
  font-size : 20px;
  font-family : Verdana;
  font-weight : bold;
}
.T1 {
  color : #0000c0;
  font-size : 15px;
  font-family : Verdana;
}

.M1 {
  color : #0000f0;
  font-size : 13px;
  font-family : Verdana;
  padding : 10px;
  text-align : center;
}
.photo {
  border-width : 1px;
  border-style : solid;
  border-color : #b0bdec;
  width : 75px;
  display : block;
}
img {
  display : block;
}
.TITRE {
  background-color : #ffffcc;
  margin : 0px;
  padding : 10px;
  border : 1px solid #ffcc66;
}
#FINAL {
  position : absolute;
  left : 300px;
  top : 150px;
  width : auto;
  height : auto;
  margin : 0px;
  padding : 0px;
  border : 2px solid #0000ff;
}
#T_FINAL {
  border : 1px solid #ffffff;
  margin : 0px;
  padding : 0px;
  width : 400px;
  height : 400px;
  background-color : #a0c8f0;
}
#D_MAIN {
  background-color : #f9f9f9;
  border : 1px solid #b0bdec;
  margin : 2px;
  padding : 5px;
}
.EXT_IMG {
  border : 1px solid;
  border-color : #ffffff #808080 #808080 #ffffff;
  margin : 1px;
  padding : 5px;
  background-color : #c0c0c0;
}
.INT_IMG {
  border : 1px solid;
  border-color : #808080 #ffffff #ffffff #808080;
  margin : 1px;
  padding : 1px;
  background-color : #c0c0c0;
}
</style>
<script type="text/javascript">
var NbTrame = 20;         // Nombre de trame intermediaire
var Delay = 500/NbTrame;  // animation de 1/2s;
var DelayAuto = 1000;     // delai pour retour automatique en ms
var ModeAuto  = false;    // flag de retour automatique
var ID_Timer = 0;
//-- Definition de l'encadrement de l'image finale
var szDeb = '<div class="EXT_IMG"><div class="INT_IMG">';
var szFin = '<\/div><\/div>';

///////////////////////////////////
// PARTIE MANIPULATION SUR OBJET //
///////////////////////////////////
//---------------------------
function ObjGetPosition(obj_){
  var PosX = null;
  var PosY = null;
  var Obj  = document.getElementById( obj_);
  //-- Si l'objet existe
  if( Obj){
    //-- Recup. Position Objet
    PosX = Obj.offsetLeft;
    PosY = Obj.offsetTop;
    //-- Si propriete existe
    if( Obj.offsetParent){
      //-- Tant qu'un parent existe
      while( Obj = Obj.offsetParent){
        if( Obj.offsetParent){ // on ne prend pas le BODY
          //-- Ajout position Parent
          PosX += Obj.offsetLeft;
          PosY += Obj.offsetTop;
        }
      }
    }
  }
  //-- Retour des positions
  return([PosX, PosY]);
}
//-----------------------------
function ObjGetDimension( obj_){
  var Larg = 0;
  var Haut = 0;
  var Obj = document.getElementById( obj_);
  if( Obj){
    Larg = Obj.offsetWidth;
    Haut = Obj.offsetHeight;
  }
  return([Larg, Haut]);
}
//---------------------
function ObjHide( obj_){
  var Obj = document.getElementById( obj_);
  if( Obj){
    Obj.style.visibility= "hidden";
    Obj.style.zIndex = 0;
  }
  return(true);
}
//-------------------------
function ObjShow( obj_, z_){
  var Obj = document.getElementById( obj_);
  if( Obj){
    Obj.style.visibility = "visible";
    if( arguments[1] != null)
      Obj.style.zIndex = z_;
    else
      Obj.style.zIndex = 1;
  }
  return(true);
}
/////////////////////////////////
// PARTIE POUR EFFET SUR IMAGE //
/////////////////////////////////
//-------------------------
function GetDimImage( div_){
  var Larg = 0;
  var Haut = 0;
  var Obj = document.getElementById( div_);
  if( Obj){
    var Img  = Obj.getElementsByTagName('img');
    if( Img[0]){
      Larg = Img[0].clientWidth;
      Haut = Img[0].clientHeight;
      if( Larg < 1) // pour NetScape
        Larg = Img[0].width;
      if( Haut < 1) // pour NetScape
        Haut = Img[0].height;
    }
  }
  return( [Larg, Haut]);
}
//--------------------------------------
function Show_Image( div_, img_, where_){
  var L_Deb;     // Largeur de debut de l'IMG
  var H_Deb;     // Hauteur de debut de l'IMG
  var L_Fin;     // Largeur de fin de l'IMG
  var H_Fin;     // Hauteur de fin de l'IMG
  var PosDebX;   // Position X depart
  var PosDebY;   // Position Y depart
  var PosFinX;   // Position X arrivee
  var PosFinY;   // Position Y arrivee

  //-- Creation Image dans DIV cache --
  var Obj = document.getElementById( 'D_TEMP');
  if( !Obj) return(false);
  Obj.innerHTML = szDeb + '<img src="' +img_ +'">' +szFin;

  //-- Recup Position Image Finale --
  Obj = document.getElementById( where_);
  if( !Obj) return(false);

  var Dim = ObjGetDimension( where_);
  var Pos = ObjGetPosition( where_);
  PosFinX = Pos[0] +( Dim[0] >>1);
  PosFinY = Pos[1] +( Dim[1] >>1);

  //-- Recup Position Image Depart --
  Pos  = ObjGetPosition( div_);
  PosDebX = Pos[0];
  PosDebY = Pos[1];

  //-- Recup Taille Image Depart --
  Dim = GetDimImage( div_);
  L_Deb = Dim[0];
  H_Deb = Dim[1];

  //-- Recup. taille Image Finale --
  Dim = GetDimImage( 'D_TEMP');
  L_Fin = Dim[0];
  H_Fin = Dim[1];

  //-- Recup. taille affichage final
  Dim  = ObjGetDimension( 'D_TEMP');

  //-- Recalage position de fin
  PosFinX -= ( Dim[0] >>1);
  PosFinY -= ( Dim[1] >>1);

  //-- Calcul parametres deplacement --
  var Rap_X = ( L_Fin - L_Deb) / NbTrame;
  var Rap_Y = ( H_Fin - H_Deb) / NbTrame;
  var Inc_X = ( PosFinX - PosDebX) / NbTrame;
  var Inc_Y = ( PosFinY - PosDebY) / NbTrame;

  //-- Stop si en cours
  clearTimeout(ID_Timer);

  //-- Init des DIV de transitions
  for( i =0; i<NbTrame-1; i++){
    Obj = document.getElementById( 'D_' +i );
    if( Obj){
      //-- Calcul positions et dimensions
      Pos[0] = PosDebX  +parseInt( (i+1) *Inc_X);
      Pos[1] = PosDebY  +parseInt( (i+1) *Inc_Y);
      Dim[0] = L_Deb    +parseInt( (i+1) *Rap_X);
      Dim[1] = H_Deb    +parseInt( (i+1) *Rap_Y);

      //-- Initialisation des DIVs
      Obj.innerHTML  = szDeb  +'<img src="' +img_ + '" width=' +Dim[0] +' height='+ Dim[1] +'>' +szFin;
      Obj.style.left = Pos[0] +"px";
      Obj.style.top  = Pos[1] +"px";
      Obj.style.visibility = "hidden";
    }
  }
  //-- Init DIV de fin
  var szTmp = '<img src="' +img_ +'" border=0  alt="Retour case départ..." title="Retour case départ...">';
  if( !ModeAuto)
    Html = '<a href="#" Onclick="Show_ZoomMoins(' +NbTrame +');return(false);">'+ szTmp +'<\/a>';
  else
    Html = '<img src="' +img_ +'">';

  var Obj = document.getElementById( 'D_' +i );
  if( Obj){
    Obj.innerHTML  = szDeb +Html +szFin;
    Obj.style.left = PosFinX +"px";
    Obj.style.top  = PosFinY +"px";
    Obj.style.visibility = "hidden";
  }
  //-- Lance l'animation
  Show_ZoomPlus( 0);

  //-- return false pour evenement onclick
  return( false);
}
//----------------------------
function Show_ZoomMoins( num_){
  //-- Stop si en cours
  clearTimeout(ID_Timer);
  //-- Masque le precedent
  ObjHide( 'D_' +num_);
  //-- Affiche le nouveau
  ObjShow( 'D_' +(num_ -1), 10 +num_);
  if( num_ > 0){
    num_--;
    ID_Timer = setTimeout("Show_ZoomMoins("  +num_ +")", Delay);
  }
}
//---------------------------
function Show_ZoomPlus( num_){
  //-- Stop si en cours
  clearTimeout(ID_Timer);
  //-- Affiche le nouveau
  ObjShow( 'D_' +num_ , 10 +num_);
  //-- Masque le precedent
  ObjHide( 'D_' +(num_ -1));
  if( num_ < NbTrame-1){
    num_++;
    ID_Timer = setTimeout("Show_ZoomPlus("  +num_ +")", Delay);
  }
  else{
    if( ModeAuto)
      ID_Timer= setTimeout( "Show_ZoomMoins(" +NbTrame +")", DelayAuto);
  }
}
///////////////////////////
// PARTIE INITIALISATION //
///////////////////////////
//-------------------------------------------------
// Creation d'un div lorsque le document est charge
//-------------------------------------------------
function AddDIV( div_, txt_){
  var Html ="";
  var NewDiv;
  if( document.createElement){
    NewDiv = document.createElement('div');
    with( NewDiv){
      id               = div_;
      innerHTML        = txt_ ? txt_ :'';
      style.position   = "absolute";
      style.left       = "0px";
      style.top        = "0px";
      style.width      = "auto";
      style.height     = "auto";
      style.visibility = "hidden";
      style.zIndex     = 0;
    }
    document.body.appendChild(NewDiv);
  }
}
//-----------------
function InitPage(){
  //-- Ajout d'un DIV reception image finale
  AddDIV( 'D_TEMP');
  //-- Ajout des DIV translation image
  for( i =0; i< NbTrame; i++)
   AddDIV( 'D_'+ i);
}
//---------------------------------------------
function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}
//======================================
//-- Ajout initialisation sur le onload
Add_Event( window, 'load', InitPage);
</script>
</head>
<body>
<!-- Titre -->
<div class="TITRE">
<span class="T0">Effet d'ouverture d'Image...</span>
<span style="color:#808080">&nbsp;&nbsp;by PetoleTeam...&nbsp;&nbsp;( mise à&nbsp;jour du 21.06.2007 )</span>
</div>
<!-- Texte -->
<p><b class="T1">Compatibilité</b>
<br>&nbsp;&nbsp;IE, OPERA, FIREFOX et NETSCAPE...</p>
<p><b class="T1">Options</b>
<br>&nbsp;&nbsp;<input type="radio" name="I_SWAP_0" onclick="ModeAuto = this.checked"  value="" title="Passe en Retour Automatique">Retour Automatique
<br>&nbsp;&nbsp;<input type="radio" name="I_SWAP_0" onclick="ModeAuto = !this.checked" value="" title="Passe en Retour manuel" checked>Retour Manuel
</p>
<!-- Les Images a Zoomer -->
<div id="ID_01" style="position:absolute; left:100px; top:200px; z-index:0; visibility:visible;">
<a href="#" onclick="return(Show_Image( 'ID_01','img_001.jpg', 'FINAL'));">
<img class="photo" src="img_001.jpg" alt="On clique ça part..." title ="On clique ça part..."></a>
</div>
<div id="ID_02" style="position:absolute; left:50px; top:300px; z-index:0; visibility:visible;">
<a href="#" onclick="return(Show_Image( 'ID_02','img_002.jpg', 'FINAL'));">
<img class="photo" src="img_002.jpg" alt="On clique ça part..."></a>
</div>
<div id="ID_03" style="position:absolute; left:100px; top:400px;">
<a href="#" onclick="return(Show_Image( 'ID_03','img_003.jpg', 'FINAL'));">
<img class="photo" src="img_003.jpg" alt="On clique ça part..."></a>
</div>
<!-- La zone de Zoom -->
<div id="FINAL">
<table id="T_FINAL" summary="">
  <tr>
    <td class="M1">
       <b>JUST FOR FUN<br>Effet d'entrée d'une image.</b>
       <hr style="width:50%">&nbsp;
       <br>En mode Auto, <b>ModeAuto</b> = <b>true</b>,
       <br>l'image retourne à&nbsp;sa place après <b>DelayAuto</b> ms...
       <hr style="width:50%">&nbsp;
       <br>En mode Manuel, <b>ModeAuto</b> = <b>false</b>,
       <br>Cliquez sur l'image pour la faire retourner à&nbsp;sa place...
       <hr style="width:50%">&nbsp;
       <br>Un coup d'oeil à&nbsp;la source et vous saurez tout...
       <br>&nbsp;
    </td>
  </tr>
</table>
</div>
</body>
</html>

Conclusion :


Compatible IE, OPERA, FIREFOX et NETSCAPE même ci ce dernier et parfois récalcitrant sur les reload()...

Motif révision 1
Suite à commentaire de REQUINUS, merci à lui...
Mise à jour et optimisation, ça c'était pas difficile, pour tenir compte des remarques et rendre le script compatible avec les DOCTYPE Strict

Nota :
NETSCAPE n'est plus récalcitrant

:O))
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (PetoleTeam)