Effet d'ouverture par zoom d'image

Soyez le premier à donner votre avis sur cette source.

Vue 32 557 fois - Téléchargée 3 062 fois

Télécharger le projet

Commenter

Description

Pour donner un effet dynamique à vos diaporamas...

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

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

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

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

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

Source / Exemple :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Conclusion :

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

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

Nota :
NETSCAPE n'est plus récalcitrant

:O))

Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires

Signaler

cedcyr

Messages postés: 20
Date d'inscription: dimanche 4 juin 2006
Statut: Membre
Dernière intervention: 15 février 2014

1 mai 2009 à 23:06

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

Signaler

PetoleTeam

Messages postés: 3426
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

16
23 mars 2009 à 19:09

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.

Signaler

cedcyr

Messages postés: 20
Date d'inscription: dimanche 4 juin 2006
Statut: Membre
Dernière intervention: 15 février 2014

22 mars 2009 à 14:35

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

';
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 + '' +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 +'' +szFin;
Obj.style.left = Pos[0] +"px";
Obj.style.top = Pos[1] +"px";
Obj.style.visibility = "hidden";
}
}
//-- Init DIV de fin
var szTmp = '';
if( !ModeAuto)
Html = '[# '+ szTmp +'<\/a>';
else
Html = '';

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>

]





[#
]








<td width=202 id="LIBELLE5" valign=middle>
ARC Remorques
Zone Industrielle
33360 Latresne
Tél. (05) 56 20 00 02
Fax (05) 56 20 12 83
E-mail : [#
]




ARC Remorques
13 av Gustave Eiffel
33600 Pessac
Tél. (05) 56 07 66 93
Fax (05) 56 36 16 81
E-mail : [crbst_4.html demande de devis] [crbst_2.html contacts] [crbst_0.html acceuil] [produit.html produits]latresne
pessac
deux sites a votre disposition
le pro de la remorque et de l'attelage le pro de la remorque et de l'attelage



<script type="text/javascript"></script>

<script type="text/javascript">

</script>

</HTML>

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

Signaler

PetoleTeam

Messages postés: 3426
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

16
22 mars 2009 à 09:55

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)

Signaler

cedcyr

Messages postés: 20
Date d'inscription: dimanche 4 juin 2006
Statut: Membre
Dernière intervention: 15 février 2014

21 mars 2009 à 22:22

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

Afficher les 18 commentaires

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Effet d'ouverture par zoom d'image

Description

Source / Exemple :

Conclusion :

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (PetoleTeam)

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

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (PetoleTeam)

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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !