FLASH a absolutne pozycjonowanie

 

FLASH - pozycjonowanie absolutne CSS z-index

Prócz Firefoxa przeglądarki domyślnie przesuwają obiekt FLASH na szczyt stosu. Nie pomoże nawet absolutne pozycjonowanie (position: absolute) i właściwość z-index użyte na elemencie, którym chcesz przesłonić obiekt SWF. Obiekt FLASH będzie nadal widoczny.

Rozwiązanie

Po pierwsze do elementu, opisującego FLASH-a, dodaj parametr wmode. Po drugie, do elementu embed, dodaj atrybut wmode o wartości opaque. Zobacz na przykład poniżej:


<object width="300" height="200">
   <param name="movie" value="banner.swf">
   <param name="wmode" value="opaque">
   <embed src="banner.swf" wmode="opaque" width="300" height="200">
   </embed>
</object>

Voila! Teraz możesz już przesłaniać obiekt FLASH za pomocą CSS i absolutnego pozycjonowania. Rozwiązanie działa na wszystkich przeglądarkach.

Znasz inne, lepsze rozwiązanie? Użyłeś powyższego? Podziel się w komentarzu!

 
 

Nadchodzi SVG – czy to koniec FLASH-a?

 

Gwoli ścisłości, SVG już dawno nadszedł, na tyle dawno, że Flash był jeszcze w powijakach. Ale co to właściwie SVG? Scalable Vector Graphics, czyli format oparty na XML-u służący do opisu danych wektorowych. Ok, ale po co mi to?

Obecnie wszystkie najpopularniejsze przeglądarki za wyjątkiem tej, której imienia nie warto wspominać wspierają SVG. Oznacza to, że możemy korzystać z jego dobrodziejstw praktycznie nieskrępowanie. Nie potrzeba żadnych wtyczek (IE jest wyjątkiem)! Nie bez przyczyny porównałem SVG do Flasha, ponieważ daje podobne możliwości. Brak tu jednak obsługi strumieni, wideo i audio.

Wstawienie gotowego pliku w formacie .svg, wykonanego przy pomocy programu do tworzenia grafiki wektorowej (np. open-source’owy Inkscape) jest banalne. Dlaczego więc z tego nie korzystać? Zobacz poniższy przykład:


<pre id="line1"><head>
    <meta name="svg.render.forceflash" content="true"></meta>
    <script src="<a href="view-source:http://codinginparadise.org/projects/svgweb/src/svg.js">../../src/svg.js</a>" data-path="../../src/"></script>
</head>
<body>

<pre id="line37">    <!--[if IE]>
    <object src="../svg/img.svg" classid="image/svg+xml"
            style="display: block;">
    <![endif]-->
    <!--[if !IE]>-->
    <object data="../svg/img.svg" type="image/svg+xml"
            style="display: block;">
    <!--<![endif]-->
    </object>
</pre>
</body>

Kod wraz z komentarzami warunkowymi dla zapewnienia poprawnego działania w IE. To wszystko.

Oczywiście można pokusić się o generowanie grafik on-line, w końcu SVG to format oparty na XML-u. Zobacz źródła przykładu projektu svgweb Google’a.

Więcej na temat formatu SVG.

 
 

Flash na stronie – po prostu.

 

Nie korzystaj z gotowych generatorów kodu do umieszczania obiektu Flash na stronie. Zawierają one mnóstwo niepotrzebnego kodu. Po pozbyciu się śmieci, pozostaje nam:

<object width="300" height="200">
 <param name="movie" value="banner.swf">
 <embed src="banner.swf" width="300" height="200">
 </embed>
 </object>

Standard xhtml 1.0 strict nie dopuszcza użycia tagu <embed>, ale robimy to specjalnie dla IE, która sama stanowi własne standardy…

That’s all folks!