EFFET D'OUVERTURE PAR ZOOM D'IMAGE effet, image, zoom, animation, agrandissement, Source N°35479 Javascript / Ajax / DHTML

Information sur la source

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é: 22 090 / 2 366

Auteur : PetoleTeam

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Note :

9,00 / 10

1
2
3
4
5
6
7
8
9
10

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é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>
<div class="TITRE">
<span class="T0">Effet d'ouverture d'Image...</span>
<span style="color:#808080">  by PetoleTeam...  ( mise à jour du 21.06.2007 )</span>
</div>
<p><b class="T1">Compatibilité</b>
<br>  IE, OPERA, FIREFOX et NETSCAPE...</p>
<p><b class="T1">Options</b>
<br>  <input type="radio" name="I_SWAP_0" onclick="ModeAuto = this.checked" value="" title="Passe en Retour Automatique">Retour Automatique
<br>  <input type="radio" name="I_SWAP_0" onclick="ModeAuto = !this.checked" value="" title="Passe en Retour manuel" checked>Retour Manuel
</p>
<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>
<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%"> 
<br>En mode Auto, <b>ModeAuto</b> = <b>true</b>,
<br>l'image retourne à sa place après <b>DelayAuto</b> ms...
<hr style="width:50%"> 
<br>En mode Manuel, <b>ModeAuto</b> = <b>false</b>,
<br>Cliquez sur l'image pour la faire retourner à sa place...
<hr style="width:50%"> 
<br>Un coup d'oeil à la source et vous saurez tout...
<br> 
</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

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

go_img.htm 11 495 octets
go_img.jpg 64 537 octets
img_001.jpg 24 386 octets
img_002.jpg 15 227 octets
img_003.jpg 16 767 octets

Télécharger le zip

Historique

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

Sources du même auteur

CLEAR D'UN INPUT FILE

FONCTION ALERT ET LES ACCENTS

LECTURE ET RÉCUPÉRATION DES LIGNES D'UN FICHIER TEXTE

RECHERCHE ET COLORISATION, MISE EN SURBRILLANCE

DIV QUI SUIT LE SCROLLING DE LA PAGE

Toutes les sources de PetoleTeam

Sources de la même categorie

RAINBOW CURSOR par wackybacky

DIAPO MULTIPLES EN FONDU par kazma

DÉGRADÉ DE TEXTE par XelectroX

DRAG DROP DE VIDEOS par kazma

DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE E... par abdelaziz_info

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

ZOOM SUR IMAGE A LA SOURIS par kazma

LOUPE SUR IMAGE AU PASSAGE DE LA SOURIS ! par adelami

EFFET D'EXPLOSION SUR TEXTE ET/OU IMAGE par PetoleTeam

EFFET D'ONDULATION SUR TEXTE ET/OU IMAGE par PetoleTeam

EFFET DE DRAPEAU SUR TEXTE ET/OU IMAGE par PetoleTeam

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">
<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"> </a></div>
<div id="html-1pj3o01zx81e80m" style="position:absolute;left:300px;top:700px;width:100px;height:100px;z-index:10024;">



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


<div id="FINAL">
<table id="T_FINAL" summary="">
  <tr>
    <td class="M1">
      
    </td>
  </tr>
</table>
</div>

</div>
<div id="html-1xgfjc1zvh2l8lh" style="position:absolute;left:271px;top:551px;width:200px;height:140px;z-index:10004;">

<td width=202 id="LIBELLE5" valign=middle><DIV CLASS=StyleTexteDuSite>ARC Remorques<BR>Zone Industrielle<BR>33360  Latresne<BR>Té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>

</div>
<div id="html-20p0d41zx81ekps" style="position:absolute;left:840px;top:700px;width:100px;height:100px;z-index:10028;">



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

</div>
<div id="html-1xgfjc1zvh9rd9" style="position:absolute;left:808px;top:550px;width:208px;height:140px;z-index:10008;">

<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  Pessac<BR>Té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>

</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"> </a></div>
</div>
</div>  
<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"></script>
</div></div>

<script type="text/javascript">

</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 à intégrer dans une page html pour donner une impression (animée) de brouillard ou brumisation sur une phot effet en image [ par astuces_jeux ] salut les mecs,Je cherche comment on fait que qand on met le curseur sur une image c'est une autre image qui apparetcomment on fait ???merci de m'aide Zoom sur image au passage dur curseur et affichage dans une même fenêtre [ par amewole ] Voici mon problème :Je dois mettre en place un système d'affichage d'un ensemble de photos (vignettes) rangé dans un tableau html et qui s'affiche une Effet d'image survolée [ par JoJo738 ] agrandissement d'image au passage de la souris [ par jimmy28 ] Salut a tous,Voilà, j'ai trouvé il y a quelques temps, un bout de code qui me permettait d'agrandir une image au passage de la souris sur sa miniature Agrandissement d'image et slideshow javascript [ par klerdesign ] Bonjour,je ne sais pas vraiment si je suis dans le bon forum mais voici ma question :Comment réaliser un slideshow avec image et fonction "agrandissem Zoom sur une image en ajax [ par ircland ] Bonjour,mes niveau de ajax etant nul, et de javascript moyen, je cherche une source qui me permet de zoomer sur une image onmouseover, enfait je veux effet drapeau [ par mojchris ] J'ais récupérer le script effet drapeau de PetoleTeam par contre sur lapage d'exemple il faut cliquer sur un lien pour que l'image apparaisse alors qu zoom au passage de la sourie [ par shefentekheux ] Bonjour, j'aimerais savoir si c'est possible et comment faire un effet de zoom sur certaines parties d'une image lorsqu'on passe la souris sur ces zo Zoom d'image PROPRE au passage de la souris [ par SoundBoy771 ] Bonjour à tous !Après quelques recherches infructueuses sur google, je me tourne vers vous ^^.Je chercher un bout de code qui permet de faire un zoom