déplacer un objet flash dans un css

Question

Bonjour à tous,

Je suis graphiste mais pas développeur web.
En gros je suis nul en code.
Toutefois, je suis en train de faire mon site internet.
Je voulais installer sur une de mes pages une lightbox.
Comme je pratique un peu Flash, j'ai trouvé sur le site un objet flash qui appelle une lightbox lorsque l'on clique dessus.
Et ça marche impec. J'ai juste modifier le fichier FLA et ai modifié et rajouté des lignes de code dans le head et le body
de la page concernée par la lightbox.
Mais j'ai surtout fait un copié/collé de la partie du code qui m'était utile pour faire fonctionner tout ça.
Toutefois, je rencontre un soucis. Par défaut l'objet flash est placé en haut à gauche de ma page ce qui ne me convient pas bien sûr.
La page de mon site fait 1300 px sur 1024 px de large.
En utilisant l'outil de développement de Chrome je trouve une autre valeur de 1904 px sur 343.
Comme un gros bourrin, j'utilise la mise en page utilisée pas celui qui a mis en ligne les fichiers de la lightbox/flash.

J'ai fouillé dans le code de la page html et dans le css pour changer ces dernières valeurs (1904 px sur 343) mais ne les trouve nulle part.

Je souhaiterais faire 2 choses :

- modifier cette taille pour quelle soit désormais de 1300 x 1024 px de large
- et surtout, pouvoir "déplacer" l'objet flash sur ma page pour le mettre à un autre endroit (par ex : w:300 h: 250) au lieu  d'en haut à droite par défaut.

Et comme je n'arrive pas à situer l'objet flash dans le css... je tourne en rond :(

Je joins le code css (je n'y ai pas touché) et ma propre page htlm sur laquelle figure mon code et le sien.

Désolé si j'ai été un peu long, mais j'essaye d'être le plus précis possible :-° et je sais que mes problèmes de débutant vont sûrement agacer certain :D

En tout cas merci d'avance à ceux qui voudront bien jeter un coup d&#8217;œil au code et m'indiquer quelles lignes doivent être modifier :)




mes travaux











function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}











[images/image-1.jpg ]
[images/Retouches d'image.jpg ]
[images/Magazine.jpg ]
[images/carte de visite1.jpg ]
[images/grand.jpg ]
[images/Flyer concert.jpg ]
[images/Flyer discotheque.jpg ]
[images/Menu restaurant.jpg ]
[images/Photomontage realise pour la Mairie de Sens.jpg ]
[images/Trucage Photoshop.jpg ]

  
  
  

  
  
  
  
  
  
    
    
  

    
    
    
    

      Le contenu de cette page n&eacute;cessite une version plus r&eacute;cente d&#8217;Adobe Flash Player.

      http://www.adobe.com/go/getflashplayer


    

    
  
  






[creation site internet]
[creation site web]
[logiciel creation site]
[[./index.html Accueil]]

[[./presentation.html Présentation]]

[[./mes-services.html mes services]]

[[./me-contacter.html me contacter]]

[[./mes-travaux.html mes travaux]]




















 11 Rue des Vieilles Etuves 89100 sens 

06.62.17.59.83

sens.graphique@yahoo.fr











Copyright © SENS GRAPHIQUE  tous droits réservés











site internet

plaquette

flyer

retouche d'image

affiche

logo

bannière flash

carte de visite

menu 

brochure

dépliant





































if(is.ie)IELMFlashEndStreamWMP6("Flash1",start);
if(is.ie)IELMFlashEndStreamWMP6("Flash2",start);









#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%	
}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}

pegase31 · Answer

Bonjour,

Lightbox existe en javascript avec les avantages de ne pas dépendre d'un activeX quelconque.
Peut-être devrais-tu te pencher vers cette solution.

Peg'

phizys · Answer

Merci pour ta réponse.
Mais j'ai déjà essayé par ce moyen et n'arrive à rien.
Les tutos d"explications sont incomplets tout comme la vidéo en ligne chez Grafikart.
Bien qu'il nous est indiqué que tout cela est simple et  rapide à mettre en place, il est évident qu'il ne s'adresse pas du tout pour des débutants.
J'ai cherché des explications plus complètes pendant trois jours...que dalle 
Et voilà que sur ce site je trouve un moyen détourné de le faire via un flash ! Tu comprendras mon enthousiasme !

C'est con, mais nulle part on me dit de ce que je dois faire de mes images. Les placer sur une page ? Non ? Alors juste les laisser dans le dossier images de mon site ? Mais pourtant il me faut bien une image sur ma page pour appeler la lightbox, non ?   

Si tu sais où je peux trouver des explications de A à Z pour installer une lightbox en javascript je suis preneur

pegase31 · Answer

Utiliser une methode plus complexe que celle qui est simple et que tu n'arrives pas à comprendre est assez ... bizarre ...

Tu as toutes les explications pour utiliser une lightbox ICI
C'est simple, facile à mettre en place et ça prend 3 lignes.

Peg'

phizys · Answer

Merci Peg' d'essayer de me filer un coup de mains !
J'ai suivi tes conseils et ça marche...mais à moitié.

J'ai toujours ce problème d'emplacement de l'image sur ma page qui appelle la lightbox.
Par défaut, elle se place en haut à droite...elle est même d'ailleurs coupée.
Par ailleurs, la taille par défaut de la page lightbox est bien supérieure à la mienne.

J'ai donc 2 difficultés :
- la dimension de la page lightbox qui est bien supérieure en taille par rapport à la mienne
- je ne trouve pas la ligne qu'il faut modifier dans le css de la lightbox pour pouvoir placer
  l'image d'appel ou bon me semble

Mine de rien, on avance !
Accepterais-tu de m'indiquer quelles lignes sont à modifier pour résoudre ces 2 difficultés ?
Merci d'avance pour ton aide

Voici le css de la lightbox que je n'ai pas modifié :

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

pegase31 · Answer

Là ça dépasse mes compétences dans ce domaine ...

Peg'

Déplacer un objet flash dans un css

5 réponses

Votre réponse

Discussions similaires