begin process at 2010 03 21 12:57:15
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > EFFET D'OUVERTURE PAR ZOOM D'IMAGE

EFFET D'OUVERTURE PAR ZOOM D'IMAGE


 Information sur la source

Note :
9 / 10 - par 4 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :effet, image, zoom, animation, agrandissement Niveau :Débutant Date de création :09/01/2006 Date de mise à jour :26/06/2007 18:38:59 Vu / téléchargé :25 002 / 2 543
Auteur : PetoleTeam

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (18)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <!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&eacute;part..." title="Retour case d&eacute;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 &agrave;&nbsp;jour du 21.06.2007 )</span>
  • </div>
  • <!-- Texte -->
  • <p><b class="T1">Compatibilit&eacute;</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 &ccedil;a part..." title ="On clique &ccedil;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 &ccedil;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 &ccedil;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&eacute;e d'une image.</b>
  • <hr style="width:50%">&nbsp;
  • <br>En mode Auto, <b>ModeAuto</b> = <b>true</b>,
  • <br>l'image retourne &agrave;&nbsp;sa place apr&egrave;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 &agrave;&nbsp;sa place...
  • <hr style="width:50%">&nbsp;
  • <br>Un coup d'oeil &agrave;&nbsp;la source et vous saurez tout...
  • <br>&nbsp;
  • </td>
  • </tr>
  • </table>
  • </div>
  • </body>
  • </html>
<!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&eacute;part..." title="Retour case d&eacute;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 &agrave;&nbsp;jour du 21.06.2007 )</span>
</div>
<!-- Texte -->
<p><b class="T1">Compatibilit&eacute;</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 &ccedil;a part..." title ="On clique &ccedil;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 &ccedil;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 &ccedil;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&eacute;e d'une image.</b>
       <hr style="width:50%">&nbsp;
       <br>En mode Auto, <b>ModeAuto</b> = <b>true</b>,
       <br>l'image retourne &agrave;&nbsp;sa place apr&egrave;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 &agrave;&nbsp;sa place...
       <hr style="width:50%">&nbsp;
       <br>Un coup d'oeil &agrave;&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))

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

26 juin 2007 18:38:59 :
Voir explication finale

 Sources du même auteur

Source avec Zip CLEAR D'UN INPUT FILE
Source avec Zip FONCTION ALERT ET LES ACCENTS
Source avec Zip LECTURE ET RÉCUPÉRATION DES LIGNES D'UN FICHIER TEXTE
Source avec Zip Source avec une capture RECHERCHE ET COLORISATION, MISE EN SURBRILLANCE
Source avec Zip DIV QUI SUIT LE SCROLLING DE LA PAGE
Toutes les sources de PetoleTeam

 Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Source avec Zip Source avec une capture AFFICHAGE D'IMAGE par kazma
Source avec Zip Source avec une capture ZOOM SUR IMAGE A LA SOURIS par kazma
Source avec Zip Source avec une capture LOUPE SUR IMAGE AU PASSAGE DE LA SOURIS ! par adelami

Commentaires et avis

Commentaire de johann1 le 11/01/2006 09:10:59

Salut PetoleTeam,

Ile esr vrai que n'ayant pas encore ton talent d'initié, je fais quelque peu partie encore des "forummeux", et n'en ai aucune honte d'ailleurs!
Je tenais à te féliciter pour cette source, elle fera plaisir,je pense, à pas mal de monde.

Bonne continuation

Commentaire de PetoleTeam le 11/01/2006 09:27:19


Il n'y a pas de honte à être un FAUX Rumeux ou VRAI Rumeux, il n'y a que plaisir à apprendre et à partager...

Encore merci pour le <B>talent d'initié</B>

Commentaire de buno le 12/01/2006 10:04:48

Interessant, bon travail...
Par contre, une petite remarque (bah oui, quand même): au lieu de créer une variable par Navigateur (DOM,IE, ...), j'utilise une seule variable (que je mets à DOM, IE,...) et quand je veux faire un traitement spécifique, j'utilise une condition switch. Mais bon, chacun fait comme il le sens...

Commentaire de buno le 12/01/2006 10:09:37

Pardon, j'ai oublié une vraie remarque: ton exemple est bien pour un nombre d'images réduit. Imagine, j'ai un album de 200 photos: d'une, la page sera alourdie; de deux, la présentation devient du coup ingérable...

Interessant donc, mais pour les petits albums (d'une dizaine de photos je pense).

Commentaire de PetoleTeam le 12/01/2006 10:13:59

Tout d'abord Merci...
Il faut, pour être honnête dire, que je bosse chez moi, quand ça m'arrive, avec un 486Sx et sous NS4 et IE4 donc depuis je n'ai pas chercher à optimiser quelque chose de réalisé dans la douleur, à l'époque. Le squelette de ce script date de 98...
La larme à l'oeil me viens à l'évocation de ces souvenirs alors <STOP>

Merci encore..

Commentaire de PetoleTeam le 12/01/2006 10:22:44

J'y est pensé, mais pas eu le temps de bosser dessus...

Dans ce cas il faut créer un fonction d'ajout d'image automatique pour ne pas avoir à écrire chaque ligne du type...
function Add_Image( nom_ ...){
  ...création des div sur la page...
}
et d'une function par exemple de scroll des images...

Enfin on peut délirer complétement...

Commentaire de requinus le 14/06/2007 10:45:09

bonjour a vous,
deja merci pour ce travail car c vraiment bien pratique. en revanche je ne maitrise pas du tout donc j'ai des questions "betes" a vous poser.

1- quand je clique sur une vignette pour ouvrir le zoom limage apparait grossi mais dans l'angle gauche en haut,alors que j'aimerai que ce soit au centre de la page :/
2- l'image zomée apparait derriere les petites vignettes alors que pour la clarté j aimerai quelle appraisse à l'avant des petites vignettes, car actuellement une partie de l'image zoomée est cachée par les petites photos.

voila merci beaucoup ;)

Commentaire de requinus le 14/06/2007 12:42:52

bon c ok je me suis debrouillé, juste que sous firefox jusqu'a ma bidouille il n y avait pas "d effet" sur le grossiment mais vu que ca date de plus d un an peut etre serait il bon de faire des modifs sur ce code.. je laisse la place aux experts :)

Commentaire de PetoleTeam le 26/06/2007 18:42:13

Bonjour,
Nouvelle version disponible en tenant compte des remarques, fort justifiées, de REQUINUS.
Le script à été optimisé, limite refondu, pour une meilleur vitesse et une compatibilité avec les DOCTYPE Strict.
En espérant qu'il vous convienne.

Commentaire de sagat06 le 17/09/2007 19:23:02

Vraiment excellent, très beau travail

Commentaire de djmmix le 25/09/2007 17:41:54

pas mal ta source :) beau travail

Commentaire de cedcyr le 21/03/2009 10:45:43

je débute et je trouve ce script géniale, mais une petite question! est t'il possible de faire en sorte que l'action du zoom soit déclancher par un simple survole de la miniature au lieu d'un clic ?  simon super cool  encore merci

Commentaire de cedcyr le 21/03/2009 16:34:25

après plusieurs essai j'ai reussi pour un survole on voie que je débute car il est vrais qu'il est suremment evident pour la plus part qu'il fallait remplacer onclick par onmouseover a ceci pres qu lorsque la souris arrive sur l'image pandent un instant l'éffet se repette plusieur fois ce qui est un peut désagréable comment corriger se défault merci d'avance

Commentaire de cedcyr le 21/03/2009 22:22:42

un autre peit bug a noter, aprés avoir ajouter d'autres migniature qui souvrent bien j'ai remarquer qu'une fois le script positionner dans ma page l'agrandissement se fait ensecond plan et donc est parciellement masqué par les mignatures qui rest au premier plan d'ou cela peut venir?

merci

Commentaire de PetoleTeam le 22/03/2009 09:55:39

Bonjour,
prenons dans l'ordre d'apparition à l'écran.

Il suffit effectivement de mettre l'action sur un événement onmouseover et non plus sur le onclick, MAIS ATTENTION...
le lancement du zoom se réalisant sur la vignette celle ci perd le focus et le récupère quand l'animation quitte le dessus de celle ci, ce qui entraîne la répétition.
Il s'agit d'un problème de zIndex.

C'est la même cause qui engendre ton problème suivant.

Pour les trames, les zIndex vont de 10 à 10+NbTrame, voir lignes 279 et 290 ci dessus.

Donc il faut faire démarrer l'effet en arrière plan et le faire finir devant.
Les DIV qui contiennent les vignettes doivent avoir un zIndex supérieur au premières trames pour que celles ci soient derrière et ne gène pas le onmouseover, mais inférieur à 10 +NbTrame pour que la dernière soit en avant plan.

J'espère avoir été clair !
;O)

Commentaire de cedcyr le 22/03/2009 14:35:24

j'abuse encore un peut, voici le code de ma page et je ne sait pas ou est l'erreur, en effet le survole et l'ouverture fonctionne mais les vignettes reste au dessus de l'image finale comment faire pour corriger si c'est possible bien sur!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- saved from url=(0013)about:internet -->
<html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=7" >
<script type="text/javascript"  src='intuisphere.js'></script>
<LINK rel='stylesheet' type='text/css' href='intuisphere.css'>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="generator" content="Web Acappella 3.0.98 Premium personal (WIN) ">
<title>contact arc remorques</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>a {text-decoration:none} a:hover{color:red;}</style>
<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 : inherit;
  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 : 100px;
  display : block;
}
img {
  display : block;
}
.TITRE {
  background-color : #ffffcc;
  margin : 0px;
  padding : 10px;
  border : 1px solid #ffcc66;
}
#FINAL {
  position : absolute;
  left : 200;
  top : 200;
  width : auto;
  height : auto;
  margin : 160px;
  padding : 140px;
}
#T_FINAL {

  margin : 0px;
  padding :0px;
  width : 200;
  height : 200;
  background-color : Transparent ;
}
#D_MAIN {
  background-color : #f9f9f9;
  border : 1px solid #b0bdec;
  margin : 2px;
  padding : 5px;
}
.EXT_IMG {

  margin : 1px;
  padding : 5px;
  background-color : Transparent;
}
.INT_IMG {

  margin : 1px;
  padding : 1px;
  background-color : Transparent;
}
</style>
<script type="text/javascript">
var NbTrame = 20;         // Nombre de trame intermediaire
var Delay = 200/NbTrame;  // animation de 1/2s;
var DelayAuto = 5000;     // 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="cliquer pour fermer..." title="cliquer pour fermer...">';
  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), 5 +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_ , 5 +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 ondblclick='return is_ondblclick(event)' onkeydown='return is_onkeydown(event)' onkeypress='return is_onkeypress(event)' onload="IS_onload();" style="margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;background-color:#e6f7ff;">
<div id='html-centered' style='position:relative;width:100%;z-index:200;' align=center>
<div id='is-global-layer' style='position:relative;z-index:200;top:0px;width:1270px;;text-align:left;'><div style="position:absolute;top:1px;left:0px;width:1px;height:1px;"><a name="anchor-top">&nbsp;</a></div>
<div id="html-1pj3o01zx81e80m" style="position:absolute;left:300px;top:700px;width:100px;height:100px;z-index:10024;">
<!--BEGIN CUSTOM HTML CODE-->

<!-- Les Images a Zoomer -->
<div id="ID_01" style="position:absolute; left:1px; top:1px; z-index:0; visibility:visible;">
<a href="#" onmouseover ="return(Show_Image( 'ID_01','file://C:/Users/christophe/Documents/WebAcappella/arcremorques/web_sites/site_1/resources/cariboost_files/z1.gif', 'FINAL'));">
<img class="photo" src="file://C:/Users/christophe/Documents/WebAcappella/arcremorques/web_sites/site_1/resources/cariboost_files/z1.gif" ></a>
</div>

<!-- La zone de Zoom -->
<div id="FINAL">
<table id="T_FINAL" summary="">
  <tr>
    <td class="M1">
      <!--mettre mon texte ici-->
    </td>
  </tr>
</table>
</div>
<!--END CUSTOM HTML CODE-->
</div>
<div id="html-1xgfjc1zvh2l8lh" style="position:absolute;left:271px;top:551px;width:200px;height:140px;z-index:10004;">
<!--BEGIN CUSTOM HTML CODE-->
<td width=202 id="LIBELLE5" valign=middle><DIV CLASS=StyleTexteDuSite>ARC Remorques<BR>Zone Industrielle<BR>33360&nbsp; Latresne<BR>T&#233;l. (05) 56 20 00 02<BR>Fax (05) 56 20 12 83<BR>E-mail : <A HREF=mailto:arclatresne@wanadoo.fr>arclatresne@wanadoo.fr</A></DIV></td></tr></table>
<!--END CUSTOM HTML CODE-->
</div>
<div id="html-20p0d41zx81ekps" style="position:absolute;left:840px;top:700px;width:100px;height:100px;z-index:10028;">
<!--BEGIN CUSTOM HTML CODE-->

<!-- Les Images a Zoomer -->
<div id="ID_02" style="position:absolute; left:1px; top:1px; z-index:0; visibility:visible; ">
<a href="#" onmouseover="return(Show_Image( 'ID_02','file://C:/Users/christophe/Documents/WebAcappella/arcremorques/web_sites/site_1/resources/cariboost_files/z.gif', 'FINAL'));">
<img class="photo" src="file://C:/Users/christophe/Documents/WebAcappella/arcremorques/web_sites/site_1/resources/cariboost_files/z.gif"></a>
</div>


</div>
<!--END CUSTOM HTML CODE-->
</div>
<div id="html-1xgfjc1zvh9rd9" style="position:absolute;left:808px;top:550px;width:208px;height:140px;z-index:10008;">
<!--BEGIN CUSTOM HTML CODE-->
<table border=0 cellpadding=0 cellspacing=0><tr><td width=202 id="LIBELLE3" valign=middle><DIV CLASS=StyleTexteDuSite>ARC Remorques<BR>13 av Gustave Eiffel<BR>33600&nbsp; Pessac<BR>T&#233;l. (05) 56 07 66 93<BR>Fax (05) 56 36 16 81<BR>E-mail : <A HREF=mailto:arcpessac@wanadoo.fr>arcpessac@wanadoo.fr</A></DIV></td></tr></table>
<!--END CUSTOM HTML CODE-->
</div>
<div style='position:absolute;top:0px;z-index:0;display:none;'>
<a href="crbst_4.html">demande de devis</a> <a href="crbst_2.html">contacts</a> <a href="crbst_0.html">acceuil</a> <a href="produit.html">produits</a>latresne  <br>pessac  <br>deux sites a votre disposition  <br>le pro de la remorque et de l'attelage           le pro de la remorque et de l'attelage   <br>
</div>
<div style="position:absolute;top:1389px;left:0px;width:1px;height:1px;" ><a name="anchor-bottom">&nbsp;</a></div>
</div>
</div>  <!--end html-centered-->
<div id='global-flash-page-centered' style='position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:0;' align=center>
<div id='global-flash-page' style="position:relative;z-index:0;width:100%;height:100%;top:0px;">
<script type="text/javascript"><!--
function initialize_flash_content(){
var l2 = getElementByKey('global-flash-page');
if (flashPlayerIsAvailable()==false)
{
document.write("\u003ca href=\"http://www.adobe.com/go/getflashplayer\" target=\"_blank\" style=\"cursor:hand;width:400px;\" class=\"flash-message\"\u003e\u003cbr\u003eCliquez&nbsp;ici&nbsp;pour&nbsp;installer&nbsp;le&nbsp;plugin&nbsp;multim&#233;dia&nbsp;Flash&nbsp;n&#233;cessaire&nbsp;pour&nbsp;ce&nbsp;site\u003c/a\u003e")
}
else
if (BrowserDetect_browser()=='Explorer')
{

document.write("\u003cobject classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" data=\"crbst_cariboost.swf?t=199\" width=\"100%\" height=\"100%\" id=\"flashanimpage\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"\u003e \u003cparam name=\"movie\" value=\"crbst_cariboost.swf?t=199\" \u003e \u003cparam name=\"allowScriptAccess\" value=\"sameDomain\" \u003e \u003cparam name=\"swliveconnect\" value=\"true\" \u003e \u003cparam name=\"quality\" value=\"high\" \u003e \u003cparam name=\"wmode\" value=\"opaque\" \u003e \u003cparam name=\"bgcolor\" value=\"#e6f7ff\" \u003e \u003cparam name=\"flashVars\" value=\"crbst_file=crbst_2_datas.xml%3Ft%3D1rzvbsjzat2nkdp&amp;crbst_fonts=crbst_fonts.swf%3Ft%3D1njyfg1zvu1xiqi&amp;crbst_global_settings=crbst_site_global_settings.xml%3Ft%3D1qz8h876s3tpq&amp;crbst_lang=&amp;crbst_lang_for_filename=&amp;crbst_message_lang=fr&amp;crbst_messages=crbst_common_messages.xml%3Ft%3D1y7fc4jzaq1ziz2&amp;crbst_search=crbst_search_index.xml%3Ft%3D1ysvtgjzat2nkdo&amp;crbst_video=crbst_resources.swf%3Ft%3D4&amp;wmode=opaque&amp;\" \u003e \u003ca href='http://www.adobe.com/go/getflashplayer' target='_blank'\u003e\u003cbr\u003e\u003cdiv style='cursor:hand;width:400px;' class='flash-message'\u003eCliquez&nbsp;ici&nbsp;pour&nbsp;installer&nbsp;le&nbsp;plugin&nbsp;multim&#233;dia&nbsp;Flash&nbsp;n&#233;cessaire&nbsp;pour&nbsp;ce&nbsp;site\u003c/div\u003e\u003c/a\u003e \u003c/object\u003e");
}
else
{
var so = new SWFObject("crbst_cariboost.swf?t=199", "flashanimpage", "100%", "100%", "8", "#e6f7ff");
so.addVariable("crbst_file", "crbst_2_datas.xml?t=1rzvbsjzat2nkdp");
so.addVariable("crbst_fonts", "crbst_fonts.swf?t=1njyfg1zvu1xiqi");
so.addVariable("crbst_global_settings", "crbst_site_global_settings.xml?t=1qz8h876s3tpq");
so.addVariable("crbst_lang", "");
so.addVariable("crbst_lang_for_filename", "");
so.addVariable("crbst_message_lang", "fr");
so.addVariable("crbst_messages", "crbst_common_messages.xml?t=1y7fc4jzaq1ziz2");
so.addVariable("crbst_search", "crbst_search_index.xml?t=1ysvtgjzat2nkdo");
so.addVariable("crbst_video", "crbst_resources.swf?t=4");
so.addVariable("wmode", "opaque");
so.addParam("wmode", "opaque");
so.write("global-flash-page")
}
}
function IS_put_main_flash_animation(){
initialize_flash_content();
}
IS_put_main_flash_animation();
//--></script>
</div></div>

<script type="text/javascript">
<!--
document.webaca_page_is_centered=true;
document.webaca_width_page=1270;
document.webaca_height_page=1409;
document.webaca_banner_height=0;
document.webaca_is_preview=true;
function IS_onload(){
is_onresize();
}
window.onresize=is_onresize;
window.onscroll=is_onscroll;
-->
</script>
</BODY>
</HTML>

merci d'avance et il faut dire qu'au contact des membres de ce site je progresse de jours en jours
cedcyr

Commentaire de PetoleTeam le 23/03/2009 19:09:39

Bonjour,
Lis bien ce que je t'ai mis plus haut, il s'agit de bien équilibrer le z-index de tes différents DIV, fait également attention il y a des encapsulations de DIV dans ton fichier.

Commentaire de cedcyr le 01/05/2009 23:06:49

bonsoir une petite question, comment faire pour forcer la taille de l'image finale, car comme je part d'une miniature et que l'image finale en est une autre, l'image de fin est immence et depasse de ma page j'ai donc essaiyer de corrige tfinal et final mais rien n'y fait merci

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Recherche Animation d'image-effet brouillard [ par fogco ] Je recherche un script &#224; int&#233;grer dans une page html pour donner une impression (anim&#233;e) de brouillard ou brumisation&nbsp;sur une phot Ouvrir une image à partir d'une zone cliquable avec un effet de zoom? [ par bahh66 ] Bonjour, je pose cette question ici mais je ne suis pas sur d'être au bon endroit... Je dois réaliser un cd-rom pour une présentation de musée. J'ai Faire un zoom d'image a l'endroit du curseur [ par YanDerS ] Je cherche depuis un bout de temps a faire un zoom sur une image a l'endroit du curseur avec la roulette de la sourie mon code actuellement me permet Javascript: Zoom avec mini image [ par belllangelo ] Bonjour, Je souhaiterai pouvoir reproduire l'effet de zoom avec mini image proposé à cette adresse: http://www.dakkadakka.com/core/gallery-viewimage. Zoom genre loupe sur image [ par Annadrill ] Bonjour, voilà, j'essaie de réaliser quelque chose de ce genre http://www.magictoolbox.com/magicmagnify/ mais je ne sais pas par ou commencer, m'y co Zoom image [ par etu54 ] Bonjour, De par mes études je suis dans la programmation web depuis 1 an environ. Cependant le javascript m'est encore assez inconnu mis a part les z index [ par didcup ] Bonjour,j'ai une animation flash dans une div et des images dans un autre.au passage du curseur j'ai un image agrandie (que j'ai mis dans une info-bul ajouter du code javascript a une page asp.net [ par koukou6311 ] Salut tous le monde voilà,  je suis tombé sur ce code en javascript pour l'animation des images et j'ai essayé de l'implementer dans mon site sur visu Defilement d'image horizontal [ par toons43 ] Bonjour à tous, Je recherche désespérement un script comme celui-ci http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htmqui permet de faire Zoom "décalé" sur image [ par aloisio11 ] Bonjour à tous, Voici un lien :http://www.habitat.fr/fcp/product/browse/Structure-de-chaise-longue-(toiles-vendues-sépa


Nos sponsors


Sondage...

Comparez les prix


Archos 5 (250 Go)
Entre 440€ et 440€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,686 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)