CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 06 02:29:30

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

EFFET D'OUVERTURE PAR ZOOM D'IMAGE

Information sur la source

Note :

9,00 / 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é :29 394 / 2 797

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

Les Membres Club peuvent 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

SHOWMAPAREA par phidelum

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

ANIMATION DU TEXTE par brennal

EFFET RAYONS DU SOLEIL par tefa24600

TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

ROTATION D'UNE IMAGE, ANIMATION par william voirol

CENTRAGE D'IMAGE AVEC PETIT EFFET par kazma

MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76

[ZI] ZOOM (LOUPE) SUR IMAGE par Bul3

AFFICHAGE D'IMAGE par kazma

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

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

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 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 Image SVG coupée lors d'un zoom [ par Pitus38 ] Bonjour à tous, J'ai un petit soucis avec mon image SVG, je gère la fonction mousewheel pour agrandir et réduire en zoomant et dézoomant avec la mole 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

Nos sponsors

Derniers Blogs

CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY

MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice

Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks

[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET

IIS7 - COMPRESSION GZIP par cyril

Forum

METTRE L'ARRIERE PLAN DE SITE WEB CHANGEABLE par hassen87

RE : AFFICHER UN IFRAME SELON UN SELECT par pascalito92140

RE : VéRIFICATION FORMULAIRE par jmeunier

RE : AFFICHER UN TABLEAU CACHé SUR UNE IMAGE par Julien39

COPIER / COLLER JAVASCRIPT PHP par fregeal

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche referenceur astucieux
Budget : 1 500€
Recherche expert advisor sous mql4 hedging
Budget : 200€
Creation boutique en ligne iphone- android - Republication.
Budget : 4 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011