Flash - swf som bakgrunn i <div>

[kongen]

Prøver å bruke en flashfil .swf som bakgrunn i <div> men det går tydeligvis ikke. Får ingen problemer med vanlig bildefil .jpg.

Finnes det en enkel måte å løse dette på, slik at jeg kan ha en .swf som bakgrunn, da jeg ønsker å ha andre <div> forran bakgrunnen?

 

[Balder]

Jeg har løst dette ved å legge flash'en i en div med "z-index:0;", for så å legge andre div'er over denne med høyere z-index. Det fungerer fint - har du testet det?

 

[kongen]

Jeg har løst dette ved å legge flash'en i en div med "z-index:0;", for så å legge andre div'er over denne med høyere z-index. Det fungerer fint - har du testet det?

Takk for svar, men jeg får det ikke til å fungere...

Slik er html filen:

<div id="top">
<div class="bg">
<div class="text">Text</div>
</div>
</div>

Slik er css filen:

#top {height:200px;  background:url(images/background.gif) repeat-x top center #fff; position: relative; z-index: 0; width:600px;}
#top .bg{height:200px; background:url(images/kongen.swf) no-repeat bottom left; position: absolute; z-index: 1; width:600px;}
#top .text{font-family: Arial, Helvetica, sans-serif}

Hva gjør jeg riktig, og hva gjør jeg galt?

 

[Balder]

SWF'en kan ikke settes inn som bg i css'en, men må legges inn som et objekt i en div som settes som bakgrunn. Eks:

<div id="wrap">
 <div id="flash">
  <OBJECT height="600" width="976" >
   <PARAM NAME="movie" VALUE="path/foo.swf">
   <PARAM NAME="wmode" VALUE="transparent">
   <embed src="path/foo.swf" wmode="transparent" width="976" height="600">
   </embed>
  </OBJECT>
 </div>
 <div id="content">
  Innhold som skal ha flash som bakgrunn...
 </div>
</div>

Som du ser plasserer jeg også en div#wrap rundt div#flash - en relativt posisjonert div som benyttes som container. Når jeg vil plassere andre elementer over flash'en (slik at den blir en bakgrunn) plasserer jeg disse absolutt i forhold til div#wrap, med z-index høyere enn 0. Jeg har lagt til div#content over for å vise hvordan dette kan gjøres.

CSS'en:

#wrap 
{
height:650px;
width:976px;
position:relative;
}

#flash 
{
height:650px;
width:976px;
position:absolute;
z-index:0;
top:0px;
left:0px;
}

#content
{
height:650px;
width:976px;
position:absolute;
z-index:1;
top:0px;
left:0px;
}

Håper dette hjelper deg videre

 

[kongen]

Yes, det fungerte Takk skal du ha!
Du er min nye helt

 

[Balder]

Bare hyggelig

 

[kongen]

Hvis jeg vil vise en bildefil .jpg i stedet for flashfil .swf til brukerne som ikke har flash installert i sin nettleser, hvordan implementerer jeg dette inn i denne koden?

 

[Tonny Kluften]

Du kan legge jpg som background i css.

background-image:url('http://www.blablalba.no/bakgrunn.jpg');
background-repeat: no-repeat;

Og så forandrer du wmode="transparent" til wmode="opaque".

 

[kongen]

Og så forandrer du wmode="transparent" til wmode="opaque".

Yes, det gjorde susen Tusen takk!

Hadde prøvd tidligere med .jpg som bakgrunn (som skulle vises til brukere uten flash) samtidig med .swf som forgrunn (som skulle vises til brukere med flash) men det ble litt rart. Ved å sette wmode til opaque løste dette seg fint.

Nå havnet du også på listen blant mine helter

 

[Tonny Kluften]

Takk for det, men for å være ærlig så er det Balder som tusler i kullisene også her. Han ga meg opaque-løsningen på PM i går. Rett skal være rett

 

[Balder]

Takk for henvisningen Tonny.

Jeg tilføyer at man kan legge til en onclick på elementet som har jpg'en som bakgrunn slik at man får klikkbar jpg som fallback.

eks:

<div id="flash" onclick="window.location = 'http://www.eksempel.no';">
 <!-- her er flash'en -->
</div>

Da er det også kjekt å legge til en css-snutt som gjør at markøren viser at bildet er klikkbart.

CSS:

cursor:pointer;