[Javascript CSS] Flashbox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Javascript CSS] Flashbox

clear

Salut,
j essaye de faire une flash box, meme chose que la lightbox mais avec du flash dedans

J ai donc un layer qui fait 100% qui apparait et disparait.

Mon doc doit absolument etre en XHTML. Je sais que si je le passe en HTML ca fonctionne, par contre en XHTML sous ie le layer ne fait plus 100% de la hauteur ...

Un coup de main plz :'(

La page :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script language=javascript type='text/javascript'>
function hideDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideShow.divs[i].visibility = 'hidden';
}
}
}
function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideShow.divs[i].visibility = 'visible'
;
}
}
}
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape" )&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="layer1"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><td><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="middle"><td><div align="center"><table width="500" border="0" cellspacing="0" cellpadding="0"><tr><td width="500" height="11"><a href="javascript:hideDiv('flash1')"></a><a href="javascript:hideDiv('layer1')"><img src="img/flash_close.jpg" alt="close" width="500" height="11" class="thumb" /></a></td></tr><tr><td width="500" height="438"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="lambo" width="500" height="438" align="middle"><param name="movie" value="swf/lambo.swf" /><param name="quality" value="high" /><embed src="swf/lambo.swf" quality="high" width="500" height="438" id="lambo" name="lambo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object></td></tr></table></div></td></tr></table></td></tr></table></div>
<a href="javascript:showDiv('layer1')">Show Div 256</a>
</body>
</html>

Le CSS attacher :

Code :

#layer1{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
background-color:#333;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
visibility:hidden;
}

Vous pouvez aller le tester a :

http://cbolavie.free.fr/flashbox/test.htm

Publicité

gatsu35

Blablaté par Harko

Vu les pietres connaissances que tu as en développement Web je te déconseille fortement de passer au xHTML surtout pour faire un bouzin totalement stupide et incompatible avec du xHTML standard.

De plus dans ton code Javascript il y a pleins de choses qui ne sont pas aux normes, et tu peux virer les lignes qui relatent de documents.layer et document.all
maintenant c'est document.getElementById("" ) pour attaquer un objet en JS.

Sinon tu pourrais nous montrer le doctype que tu utilisais avant ? tu as du passer du mode quirk au mode strict sans y faire attention.

Doit y avoir un problème de Modele de boite W3C dans les parages, mais désolé je n'ai pas le temps de corriger tout cela

gatsu35

Blablaté par Harko

Encore une chose, quand je vois 3 tableaux imbriqués je trouve que il y a un sérieux problème non ?

clear

desoler, je suis en effet completement debutant en developpement javascript ... il faut bien debuter un jour ....

Merci de m avoir juste conseiller d abandonner sans me donner la moindre solution !

Ca c du coup de main !

gatsu35

Blablaté par Harko

Tiens mon brave
ton appel au secours m'a fait suscité un élan de générosité de ma part

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script  type="text/javascript">
    function ShowHide(objectId, Action) {
        var myObject = document.getElementById(objectId);
        var result="";
        switch(Action) {
            case "auto": result=(myObject.style.display=="block" ) ? "none" : "block"; break;
            case "hide" : result="none"; break;
            case "show" : result="block"; break;
            default: result="none";
        }
        myObject.style.display=result;
    }
</script>  
<style type="text/css">
    body{
        background:black;
    }
    #Movie{
        width:500px;
        margin:0 auto;
    }
    #Movie a img{
        border:none;
    }
    #Movie a{
        display:block;
    }
</style>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a href="#" onclick="ShowHide('Movie','show')">Show The Movie</a>
<div id="Movie">
    <a href="#" onclick="ShowHide('Movie','hide')">
        <img src="img/flash_close.jpg" alt="close" width="500" height="11" class="thumb"/>
    </a>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="lambo" width="500" height="438" align="middle">
        <param name="movie" value="swf/lambo.swf" />
        <param name="quality" value="high" />
        <embed src="swf/lambo.swf" quality="high" width="500" height="438" id="lambo" name="lambo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>

clear

merci bcp

je vais essayer d etudier un peu ca.

clear

Merci Gatsu.

Cependant il reste 2 problemes.

Le premier, je voudrais que la boite soit invisible par defaut. Ca ca doit pas etre bien compliquer.

Le deuxieme, je voudrais qu il y ai l effet de gris transparent qui se met au premier plan comme sur mon exemple.

clear

J ai essayer de modifier un peu le CSS pour obtenir ce que je cherche ....

Code :

<style type="text/css">
#Movie{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5000;
background-color:#000;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
text-align: center;
margin:0 auto;
}
#Movie a img{
border:none;
}
#Movie a{
display:block;
}
</style>

Avec ca sous firefox le griser apparait sur toute la page. Cependant le flash est pas centrer en hauteur. (Je sais pas comment faire ca ... )

Sous IE le griser n apparait que sur la hauteur du fichier flash et n occupe donc pas toute la hauteur de la page.

gatsu35

Blablaté par Harko

tiens mendiant, je suis généreux aujourd'hui
Mais apprend un peu à faire de toi même c'est pourtant simple

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function ShowHide(objectId, Action) {
var myObject = document.getElementById(objectId);
var result="";
switch(Action) {
case "auto": result=(myObject.style.display=="block" ) ? "none" : "block"; break;
case "hide" : result="none"; break;
case "show" : result="block"; break;
default: result="none";
}
myObject.style.display=result;
}
</script> <style type="text/css">
body{ background:white; }
#Movie{
background-color: #333;
display:none;
}
#Movie div{
width:500px;
margin:0 auto;
}
#Movie a img{ border:none;}
#Movie a{display:block; }
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a href="#" onclick="ShowHide('Movie','show')">Show The Movie</a>
<div id="Movie">
<div>
<a href="#" onclick="ShowHide('Movie','hide')">
<img src="img/flash_close.jpg" alt="close" width="500" height="11" class="thumb"/>
</a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="lambo" width="500" height="438" align="middle">
<param name="movie" value="swf/lambo.swf" />
<param name="quality" value="high" />
<embed src="swf/lambo.swf" quality="high" width="500" height="438" id="lambo" name="lambo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
</body>
</html>

gatsu35

Blablaté par Harko

Tiens j'ai modifié ton bordel, en prenant en compte que ton truc se centre dans ta page

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function ShowHide(objectId, Action) {
var myObject = document.getElementById(objectId);
var result="";
switch(Action) {
case "auto": result=(myObject.style.display=="block" ) ? "none" : "block"; break;
case "hide" : result="none"; break;
case "show" : result="block"; break;
default: result="none";
}
myObject.style.display=result;
}
</script> <style type="text/css">
body, html {
height:100%;
}
body{ background:white; }
#Movie{
position:absolute;
top:0;
left:0;
bottom:0;
right:O;
height:100%;
width:100%;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
background-color: #000;
display:none;
}
#Movie div{
width:500px;
position:absolute; /*positionnement absolu*/
top:50%; /*On met l'objet à la moitié de la page en hauteur*/
left:50%; /*Idem mais en largeur*/
margin-top:-220px; /*On retire la marge top en mettant la moitié de la hauteur du bloc placé (ton film en gros)*/
margin-left:-251px; /*Idem mais en largeur*/
}
#Movie a img{ border:none;}
#Movie a{display:block; }
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a href="#" onclick="ShowHide('Movie','show')">Show The Movie</a>
<div id="Movie">
<div>
<a href="#" onclick="ShowHide('Movie','hide')">
<img src="img/flash_close.jpg" alt="close" width="500" height="11" class="thumb"/>
</a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="lambo" width="500" height="438" align="middle">
<param name="movie" value="swf/lambo.swf" />
<param name="quality" value="high" />
<embed src="swf/lambo.swf" quality="high" width="500" height="438" id="lambo" name="lambo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
</body>
</html>

Message édité par gatsu35 le 15-03-2006 à 09:15:31

Publicité

clear

Yes ca marche !

Merci bcp Gatsu35, je te dois une biere sur ce coup la !

Bon j ai recoder une grosse partie de mon site aussi, et a priori c bcp plus propre.

Encore merci milles fois en tout cas

FORUM HardWare.fr

Programmation

HTML/CSS

[Javascript CSS] Flashbox

Sujets relatifs
Javascript dans javascript	[CSS] appliquer une taille à un hover
bbcode insertion image (javascript et PHP)	[Javascript] valeur d'un select sous IE
Javascript : Formulaire et aperçu.	Problème CSS pour un menu
ajustement auto zone texte CSS	100% de hauteur (CSS)
pb struts+javascript+xhtml	[HTML/CSS/Jevascript] Validation d'un site agréée Hache&Fer
Plus de sujets relatifs à : [Javascript CSS] Flashbox

Page générée en 0.124 secondes