EFFET D'OUVERTURE PAR ZOOM D'IMAGE
cs_johann1
Messages postés
170
Date d'inscription
jeudi 21 octobre 2004
Statut
Membre
Dernière intervention
9 janvier 2008
-
11 janv. 2006 à 09:10
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
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
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/35479-effet-d-ouverture-par-zoom-d-image
https://codes-sources.commentcamarche.net/source/35479-effet-d-ouverture-par-zoom-d-image
1 mai 2009 à 23:06
23 mars 2009 à 19:09
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.
22 mars 2009 à 14:35
<!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
22 mars 2009 à 09:55
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)
21 mars 2009 à 22:22
merci
21 mars 2009 à 16:34
21 mars 2009 à 10:45
25 sept. 2007 à 17:41
17 sept. 2007 à 19:23
26 juin 2007 à 18:42
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.
14 juin 2007 à 12:42
14 juin 2007 à 10:45
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 ;)
12 janv. 2006 à 10:22
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...
12 janv. 2006 à 10:13
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..
12 janv. 2006 à 10:09
Interessant donc, mais pour les petits albums (d'une dizaine de photos je pense).
12 janv. 2006 à 10:04
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...
11 janv. 2006 à 09:27
Encore merci pour le talent d'initié
11 janv. 2006 à 09:10
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