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’½il au code et m'indiquer quelles lignes doivent être modifier :)
Code HTML :
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>mes travaux</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<meta name="generator" content="LMSOFT Web Creator Pro, Version:5.2.0.1">
<link href="mes-travaux.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>
<script type="text/javascript">
function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
</script>
</head>
<script type="text/javascript" src="./lmpres80.js"></script><noscript><br></noscript>
<script type="text/javascript" src="./menusystemmodel001.js"></script><noscript><br></noscript>
<body style="margin-Left:0px;margin-Top:0px;margin-Bottom:0px;margin-Right:0px;" onresize=PosPage(2,2,1.000000,1.000000); bgcolor="#000000" >
<body>
<a id="img1" title="Titre première image" rel="lightbox[img]" href="images/image-1.jpg"></a>
<a id="Retouches d'image" title="Retouches d'image" rel="lightbox[img]" href="images/Retouches d'image.jpg"></a>
<a id="Magazine" title="Magazine" rel="lightbox[img]" href="images/Magazine.jpg"></a>
<a id="carte de visite1" title="carte de visite1" rel="lightbox[img]" href="images/carte de visite1.jpg"></a>
<a id="grand" title="Affiche" rel="lightbox[img]" href="images/grand.jpg"></a>
<a id="Flyer concert" title="Flyer concert" rel="lightbox[img]" href="images/Flyer concert.jpg"></a>
<a id="Flyer discotheque" title="Flyer discothèque" rel="lightbox[img]" href="images/Flyer discotheque.jpg"></a>
<a id="Menu restaurant" title="Menu restaurant" rel="lightbox[img]" href="images/Menu restaurant.jpg"></a>
<a id="Photomontage realise pour la Mairie de Sens" title="Photomontage réalisé pour la Mairie de Sens" rel="lightbox[img]" href="images/Photomontage realise pour la Mairie de Sens.jpg"></a>
<a id="Trucage Photoshop" title="Trucage Photoshop" rel="lightbox[img]" href="images/Trucage Photoshop.jpg"></a>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="338">
<param name="movie" value="gallery.swf" />
<param name="quality" value="high" />
<param name="allowscriptaccess" value="samedomain">
<param name="wmode" value="transparent">
<param name="swfversion" value="6.0.65.0" />
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="gallery.swf" width="450" height="338">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="allowscriptaccess" value="samedomain">
<param name="wmode" value="transparent">
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
<DIV class="cLinkHidden">
[<a href="http://www.lmsoft.com/fr" title="Construction Site Internet">creation site internet</a>]
[<a href="http://www.webcreator-fr.com" title="Construire Site Web">creation site web</a>]
[<a href="http://www.lmsoft.com/fr/webcreatorpro.html" title="Faire Son Propre Site">logiciel creation site</a>]
[<a href="./index.html" title="Accueil">Accueil</a>]<br>
[<a href="./presentation.html" title="Présentation">Présentation</a>]<br>
[<a href="./mes-services.html" title="mes services">mes services</a>]<br>
[<a href="./me-contacter.html" title="me contacter">me contacter</a>]<br>
[<a href="./mes-travaux.html" title="mes travaux">mes travaux</a>]<br>
</DIV>
<DIV id=lmwcbackpanel2 align='center'>
<DIV id=lmwcbackpanel style="position:relative;width:1024px;height:1300px;">
<DIV id=lmwcbackpanelinner style="visibility:visible;overflow:hidden;position:absolute;left:0px;top:0px;width:1024px;height:1300px;clip:rect(0px,1024px,1300px,0px);">
<DIV id=Page class="cPage">
<a name=ANCHOR_Page></a><IMG alt="" id=LMImagePage src="./lmimginv.gif" class="cLMImagePage">
</DIV>
<DIV id=Text5 align=left class="cText5">
<a name=ANCHOR_Text5></a>
<DIV id=LMTxtText5 align=left class="cLMTxtText5">
<p style="text-align:left"><font face="Verdana" color="#ffffff"><span style="font-size:9pt;line-height:14px;"><b>11 Rue des Vieilles Etuves 89100 sens</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#ffffff"><span style="font-size:9pt;line-height:14px;"><b>06.62.17.59.83</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#ffffff"><span style="font-size:9pt;line-height:14px;"><b>sens.graphique@yahoo.fr</b></span></font></p>
</DIV>
</DIV>
<DIV id=Text2 align=left class="cText2">
<a name=ANCHOR_Text2></a>
<DIV id=LMTxtText2 align=left class="cLMTxtText2">
<p style="text-align:left"><font face="Calibri" color="#808080"><span style="font-size:8pt;line-height:12px;">Copyright © SENS GRAPHIQUE tous droits réservés</span></font></p>
</DIV>
</DIV>
<DIV id=Text3 align=left class="cText3">
<a name=ANCHOR_Text3></a>
<DIV id=LMTxtText3 align=left class="cLMTxtText3">
<p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>site internet</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>plaquette</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>flyer</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>retouche d'image</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>affiche</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>logo</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>bannière flash</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>carte de visite</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>menu </b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>brochure</b></span></font></p><p style="text-align:left"><font face="Verdana" color="#d06f2e"><span style="font-size:14pt;line-height:21px;"><b>dépliant</b></span></font></p>
</DIV>
</DIV>
<DIV id=Flash2 class="cFlash2">
<a name=ANCHOR_Flash2></a>
<OBJECT ID="LMFlashFlash2"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
CODEBASE=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
LEFT=0
TOP=0
WIDTH=300
HEIGHT=250
standby="Loading FLASH Player components...">
<PARAM NAME="SRC" value="./gallery.swf">
<PARAM NAME="PLAY" value="true">
<PARAM NAME="LOOP" value="true">
<PARAM NAME="MENU" value="false">
<PARAM NAME="QUALITY" value="High">
<PARAM NAME="SCALE" value="ShowAll">
<PARAM NAME="WMODE" value="Transparent">
<Embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/"
src="./gallery.swf"
Name="LMFlashFlash2"
LEFT=0
TOP=0
WIDTH=300
HEIGHT=250
QUALITY=High
SCALE=ShowAll
WMODE=Transparent
PLAY=True
LOOP=True
MENU=False >
</embed>
</OBJECT>
</DIV>
<DIV id=Flash1 class="cFlash1">
<a name=ANCHOR_Flash1></a>
<OBJECT ID="LMFlashFlash1"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
CODEBASE=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
LEFT=0
TOP=0
WIDTH=300
HEIGHT=50
standby="Loading FLASH Player components...">
<PARAM NAME="SRC" value="./animations/jump.swf">
<PARAM NAME="PLAY" value="true">
<PARAM NAME="LOOP" value="true">
<PARAM NAME="MENU" value="false">
<PARAM NAME="QUALITY" value="High">
<PARAM NAME="SCALE" value="ShowAll">
<PARAM NAME="WMODE" value="Transparent">
<Embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/"
src="./animations/jump.swf"
Name="LMFlashFlash1"
LEFT=0
TOP=0
WIDTH=300
HEIGHT=50
QUALITY=High
SCALE=ShowAll
WMODE=Transparent
PLAY=True
LOOP=True
MENU=False >
</embed>
</OBJECT>
</DIV>
<DIV id=Img1 class="cImg1">
<a name=ANCHOR_Img1></a>
<IMG alt="" id=LMImageImg1 src="./images/logo_small1.jpg" class="cLMImageImg1"></DIV>
<DIV id=Img2 class="cImg2">
<a name=ANCHOR_Img2></a>
<IMG alt="" id=LMImageImg2 src="./images/logo_mur_me-contacter.jpg" class="cLMImageImg2"></DIV>
<script type="text/javascript" src="./mes-travaux.js"></script>
<noscript><br></noscript>
</DIV>
<SCRIPT FOR="LMFlashFlash1" EVENT="EndOfStream(start)">if(is.ie)IELMFlashEndStreamWMP6("Flash1",start);</SCRIPT>
<SCRIPT FOR="LMFlashFlash2" EVENT="EndOfStream(start)">if(is.ie)IELMFlashEndStreamWMP6("Flash2",start);</SCRIPT>
</DIV>
</DIV>
</body>
</html>
Code HTML :
#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;
}