Soyez le premier à donner votre avis sur cette source.
Vue 32 557 fois - Téléchargée 3 062 fois
<!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"> by PetoleTeam... ( mise à jour du 21.06.2007 )</span> </div> <!-- Texte --> <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> <!-- 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%"> <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>
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- saved from url=(0013)about:internet -->
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<script type="text/javascript" src='intuisphere.js'></script>
<LINK rel='stylesheet' type='text/css' href='intuisphere.css'>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="generator" content="Web Acappella 3.0.98 Premium personal (WIN) ">
<title>contact arc remorques</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>a {text-decoration:none} a:hover{color:red;}</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
color : #000000;
font-size : 13px;
font-family : Verdana;
background-color : inherit;
margin : 10px;
}
.T0 {
color : #bb0000;
font-size : 20px;
font-family : Verdana;
font-weight : bold;
}
.T1 {
color : #0000c0;
font-size : 15px;
font-family : Verdana;
}
.M1 {
color : #0000f0;
font-size : 13px;
font-family : Verdana;
padding : 10px;
text-align : center;
}
.photo {
border-width : 1px;
border-style : solid;
border-color : #b0bdec;
width : 100px;
display : block;
}
img {
display : block;
}
.TITRE {
background-color : #ffffcc;
margin : 0px;
padding : 10px;
border : 1px solid #ffcc66;
}
#FINAL {
position : absolute;
left : 200;
top : 200;
width : auto;
height : auto;
margin : 160px;
padding : 140px;
}
#T_FINAL {
margin : 0px;
padding :0px;
width : 200;
height : 200;
background-color : Transparent ;
}
#D_MAIN {
background-color : #f9f9f9;
border : 1px solid #b0bdec;
margin : 2px;
padding : 5px;
}
.EXT_IMG {
margin : 1px;
padding : 5px;
background-color : Transparent;
}
.INT_IMG {
margin : 1px;
padding : 1px;
background-color : Transparent;
}
</style>
<script type="text/javascript">
var NbTrame = 20; // Nombre de trame intermediaire
var Delay = 200/NbTrame; // animation de 1/2s;
var DelayAuto = 5000; // delai pour retour automatique en ms
var ModeAuto = false; // flag de retour automatique
var ID_Timer = 0;
//-- Definition de l'encadrement de l'image finale
var szDeb = '
';
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>
]
<!--BEGIN CUSTOM HTML CODE-->
<!-- Les Images a Zoomer -->
[#
]
<!-- La zone de Zoom -->
<!--mettre mon texte ici-->
<!--END CUSTOM HTML CODE-->
<!--BEGIN CUSTOM HTML CODE-->
<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 : [#
]
<!--END CUSTOM HTML CODE-->
<!--BEGIN CUSTOM HTML CODE-->
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
<!--end html-centered-->
<script type="text/javascript"><!--
function initialize_flash_content(){
var l2 = getElementByKey('global-flash-page');
if (flashPlayerIsAvailable()==false)
{
document.write("\u003ca href="http://www.adobe.com/go/getflashplayer" target="_blank" style="cursor:hand;width:400px;" class="flash-message"\u003e\u003cbr\u003eCliquez ici pour installer le plugin multimédia Flash nécessaire pour ce site\u003c/a\u003e")
}
else
if (BrowserDetect_browser()=='Explorer')
{
document.write("\u003cobject classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" data="crbst_cariboost.swf?t=199" width="100%" height="100%" id="flashanimpage" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"\u003e \u003cparam name="movie" value="crbst_cariboost.swf?t=199" \u003e \u003cparam name="allowScriptAccess" value="sameDomain" \u003e \u003cparam name="swliveconnect" value="true" \u003e \u003cparam name="quality" value="high" \u003e \u003cparam name="wmode" value="opaque" \u003e \u003cparam name="bgcolor" value="#e6f7ff" \u003e \u003cparam name="flashVars" value="crbst_file=crbst_2_datas.xml%3Ft%3D1rzvbsjzat2nkdp&crbst_fonts=crbst_fonts.swf%3Ft%3D1njyfg1zvu1xiqi&crbst_global_settings=crbst_site_global_settings.xml%3Ft%3D1qz8h876s3tpq&crbst_lang=&crbst_lang_for_filename=&crbst_message_lang=fr&crbst_messages=crbst_common_messages.xml%3Ft%3D1y7fc4jzaq1ziz2&crbst_search=crbst_search_index.xml%3Ft%3D1ysvtgjzat2nkdo&crbst_video=crbst_resources.swf%3Ft%3D4&wmode=opaque&" \u003e \u003ca href='http://www.adobe.com/go/getflashplayer' target='_blank'\u003e\u003cbr\u003e\u003cdiv style='cursor:hand;width:400px;' class='flash-message'\u003eCliquez ici pour installer le plugin multimédia Flash nécessaire pour ce site\u003c/div\u003e\u003c/a\u003e \u003c/object\u003e");
}
else
{
var so = new SWFObject("crbst_cariboost.swf?t=199", "flashanimpage", "100%", "100%", "8", "#e6f7ff");
so.addVariable("crbst_file", "crbst_2_datas.xml?t=1rzvbsjzat2nkdp");
so.addVariable("crbst_fonts", "crbst_fonts.swf?t=1njyfg1zvu1xiqi");
so.addVariable("crbst_global_settings", "crbst_site_global_settings.xml?t=1qz8h876s3tpq");
so.addVariable("crbst_lang", "");
so.addVariable("crbst_lang_for_filename", "");
so.addVariable("crbst_message_lang", "fr");
so.addVariable("crbst_messages", "crbst_common_messages.xml?t=1y7fc4jzaq1ziz2");
so.addVariable("crbst_search", "crbst_search_index.xml?t=1ysvtgjzat2nkdo");
so.addVariable("crbst_video", "crbst_resources.swf?t=4");
so.addVariable("wmode", "opaque");
so.addParam("wmode", "opaque");
so.write("global-flash-page")
}
}
function IS_put_main_flash_animation(){
initialize_flash_content();
}
IS_put_main_flash_animation();
//--></script>
<script type="text/javascript">
<!--
document.webaca_page_is_centered=true;
document.webaca_width_page=1270;
document.webaca_height_page=1409;
document.webaca_banner_height=0;
document.webaca_is_preview=true;
function IS_onload(){
is_onresize();
}
window.onresize=is_onresize;
window.onscroll=is_onscroll;
-->
</script>
</HTML>
merci d'avance et il faut dire qu'au contact des membres de ce site je progresse de jours en jours
cedcyr
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)
merci
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.