31.08.2011

Валидная вставка Flash и как вставить что-либо поверх flash блока

Валидность HTML — святое. В ней и лежит залог правильного отображения сайта во всех браузерах. Будем считать, что валидный html это абсолютно правильный html.

Под валидностью, в данном посте, мы будем понимать такое написание HTML- и CSS-кода, которое не противоречит действующим стандартам W3C и полностью проходит тест валидатором.

Хотя тема стара как мир, но все же периодически на разных программерских форумах возникают вопросы по валидной вставке флэш объектов на странички сайтов.

И так приступим, для отображения flash объектов в документах типа XHTML 1.0 Transitional (большинство CMS на нем написано).



Валидная вставка Flash

Вариант 1. Для прямой вставки рецепт от w3c (если нет плеера у клиента, то облом, ничего не крутится):

<object type="application/x-shockwave-flash" data="flash.swf" width="400" height="300">
<param name="movie" value="flash.swf" /> 
</object>

Вариант 2. При таком коде вставленный флеш валиден, и если у посетителя отключен просмотр флеша, то вместо него будет отображаться фоновое изображение dummy.jpg (в примере изображения берутся из папки images, а флеш из папки swf). Режим wmode установленный в opaque дает возможность не закрывать флэшем всплывающие окна, то есть убирается баг верхнего слоя.

<object type="application/x-shockwave-flash" data="swf/flash.swf" width="400" height="300">
 <param name="movie" value="swf/flash.swf" />
 <param name="quality" value="high" />
 <param name="wmode" value="opaque" />
 <img src="images/dummy.jpg" alt="Без флеша" height="300" width="400" /> 
 </object>



Размещаем что-либо поверх flash блока

Html код

<div class="flash-box"> 
 <a class="flash-link" href="#">Ваша ссылка</a>
 <object type="application/x-shockwave-flash" data="swf/flash.swf" width="180" height="220">
 <param name="wmode" value="opaque" /> 
 <param name="movie" value="swf/flash.swf" />
 <param name="quality" value="high" />
 </object>
</div>

Блок flash-box - нужен для того что бы размещенная ссылка была именно там где нужно нам, а не там где хочет она.

flash-link - ссылка которая будет поверх флешки, вместо ссылки может быть что угодно.

<param name="wmode" value="opaque"> - Флеш ведет себя так как нам надо. Если он лежит в body, то слои будут его закрывать, если в слое - то он закрывает нижние (по z-index) слои и закрывается верхними. Фон имеет фоновый цвет. Без этой штуки работать ничего не будет.


Css свойства

.flash-box{
 position: relative;
}
.flash-link{
 position: absolute; top:0px; left:0px;
}

Думаю объяснять не надо, что Вы можете дописывать свои свойства, такие как: ширина, высота и т.д.



Пример посложнее

Иногда требует нечто более сложное. Например, нужно сделать чтобы баннер с активной ссылкой (то есть уже вшитой в код самого флеша), вел на другой адрес

Html код

<div class="flash-box">
 <a class="flash-link" href="#"></a>
 <object type="application/x-shockwave-flash" data="swf/flash.swf" width="180" height="220">
 <param name="wmode" value="opaque">
 <param name="movie" value="swf/flash.swf" />
 <param name="quality" value="high" />
 </object>
</div>

Css код

.flash-box{
 position: relative;
} 
.flash-link{
 position: absolute; top:0px; left:0px;
 width:180px;
 height:220px;
 background: url('images/0.gif') no-repeat; /*Особенный костыль для всех IE. Если фона нет, то воспринимается ссылка вшитая во флеш, а не наша. Думаю понятно, что 0.gif это прозрачный однопиксельный гиф.*/
}

По материалам: сайт
Просмотров:
32753
Раздел:
HTML
Теги:
css, html, валидность, флеш, Flash
Комментариев: 221 2 3 »
0  
22 jkindojrows   (31.01.2013 14:51) [Материал]
"error": "Service Unavailable"

0  
21 catysopbdex   (18.11.2012 00:26) [Материал]
"error": "Service Unavailable"

0  
20 web traffic   (13.11.2012 21:20) [Материал]
Get up to 100000 forum backlinks with our backlinks service & massive targeted traffic

Your fozzy.ucoz.com website will get thousands of visitors/day using superb backlink blast today. See proof how web traffic increased from 400 to 4000 visitors/day and how your website can get same results - http://get-more-web-traffic.net

We are able post your marketing message up to 100’000 forums around the web, so your site get insane amount of backlinks
and as a result your web page will be ranked #1 positions in search engines and your website will get great amount of free, targeted web traffic from search engines in shortest time.

Most affordable and most powerful service for web traffic and backlinks in the world!

Are you ready to for massive traffic flood to your site? If yes then Order now: http://get-more-web-traffic.net

0  
19 catytopoaex   (20.10.2012 04:20) [Материал]
"error": "Service Unavailable"

0  
18 catyoopbhex   (10.10.2012 01:44) [Материал]
"error": "Service Unavailable"

0  
17 Lofsoobby   (26.09.2012 14:25) [Материал]
If you want to make $20-$50/hour and up to $3500/month of your time working at
home part-time then this is the most important message you’re ever going to read...

It may sound hard to believe, but it's true. There are thousands of companies out there who are willing to pay for your opinions regarding their products. This is an important part of product research, and they rely on people just like you for your honest opinion!

Imagine getting paid for doing things like:

- Trying out new menu items from popular restaurants
- Take short surveys about new cars that are coming out soon
- Give your opinion about new clothing and shoe designs
But here's a problem, it's very hard to find out best survey site and you probably can waste too much time,
but I just stumbled up website http://money-surveys.net where this guy Jack revealed his secret source where he registered and taking surveys in his free time and earning $265 within 12h and $1440 just within 2 weeks

Click Here To read this amazing story :
http://money-surveys.net

0  
16 Nepexcevy   (23.09.2012 10:14) [Материал]
Hello!
Vestibulum ante ipsum primis quis mollis dui bibendum et ultrices posuere cubilia. Fusce est lacus malesuada a vestibulum.

0  
15 catyxopcyex   (18.09.2012 10:31) [Материал]
<html>
<head>
<title>Welcome to nginx!</title>
</head>
<body bgcolor="white" text="black">
<center><h1>Welcome to nginx!</h1></center>
</body>
</html>

0  
14 wkindzarows   (18.09.2012 06:41) [Материал]
<html>
<head>
<title>Welcome to nginx!</title>
</head>
<body bgcolor="white" text="black">
<center><h1>Welcome to nginx!</h1></center>
</body>
</html>

0  
13 catysopndex   (17.09.2012 12:01) [Материал]
<html>
<head>
<title>Welcome to nginx!</title>
</head>
<body bgcolor="white" text="black">
<center><h1>Welcome to nginx!</h1></center>
</body>
</html>

1-10 11-20 21-22
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]