Пару раз уже приходится потеть над не совсем стандартной задачей: есть флеш-баннер (файл в формате .swf), который нужно сделать ссылкой... Вообще по феншую подобные вещи делаются в самом флеше еще во время разработки баннера, и ссылкой выступает непосредственно баннер без никакого оборачивания его в тег <a>. Но, видимо, часто флешеры забывают спросить заказчика, куда должен вести баннер, и сиё дело перекладывается на плечи верстальщика. И вот здесь возникает проблема.

Вариант 1 (нерабочий). С ходу приходит идея тупо обернуть баннер ссылкой. Но если просто обернуть код самого флеш-баннера в тег ссылки <a href="ссылаемый адрес">код флеш-баннера</a>, то, как это ни странно, ничего у вас не выйдет: при наведении на баннер курсора ссылка в строке состояния будет не видна, и клик по баннеру ничего не даст.

Вариант 2 (нерабочий). Изощренный верстальщик пойдет дальше и попробует сделать ссылку блочной и спозиционировать её абсолютно прямо поверх баннера, задав её z-index побольше. Но, как ни странно, и это ничего не даст. Самое время очертить проблему: flash-объекты по-умолчанию обладают бесконечным z-index'ом, перекрывая любой, даже абсолютно позиционированный над ними объект.

Вариант 3 (частично рабочий). Чтобы избавить flash от бесконечного z-index'a, разработчики flash'a дали нам удобный параметр: <param name="wmode" value="opaque"> или же просто wmode="opaque", если встраиваете flash через <embed>.

Здесь у нас получается следующий вариант:

<div style="position: relative;">
	<a style="position: absolute; width: 100%; height: 250px; left: 0; top: 0;" href="http://blogto4ka.ru" target="_blank"></a>
	<object type="application/x-shockwave-flash" data="banner1.swf" width="300" height="250">
		<param name="wmode" value="opaque"> //тот самый ключевой параметр, который убирает у flash бесконечный z-index
		<param name="movie" value="banner1.swf" />
		<param name="quality" value="high" />
	</object>
</div>

Но и это еще не все! Ведь данный вариант, если в ссылке нет никакого текста, странным образом отказывается работать в IE 6-9 (если в ссылке все же будет текст, то этот текст поверх flash-баннера будет вполне кликабельным в IE), и как обычно для осла нам потребуется специальный костыль...

Вариант 4 (100% рабочий)

Чтобы вариант 3 работал и в IE, необходим уникальный костыль — задать для ссылки прозрачный бэкграунд при помощи однопиксельной прозрачной картинки (в данном случае s.gif):

<div style="position: relative;">
	<a style="position: absolute; width: 100%; height: 250px; left: 0; top: 0; background: url(images/s.gif) left top no-repeat;" href="http://blogto4ka.ru" target="_blank"></a>
	<object type="application/x-shockwave-flash" data="banner1.swf" width="300" height="250">
		<param name="wmode" value="opaque">
		<param name="movie" value="banner1.swf" />
		<param name="quality" value="high" />
	</object>
</div>

Данный вариант работает во всех популярных браузерах. Я лично проверил на IE7-9, актуальных на сегодня версиях FF, Safari, Opera.

http://blogto4ka.ru

Также рекомендую прочесть

• Выгодные и не очень партнерки для женского трафика
• Поговорим о прогонах: обзор сервиса cheaptop.ru
• Медведев — первый обладатель Iphone 4G в России и первый русский президент-твитерянин
• Оптимизация внешнего вида сайта в результатах поиска Яндекса
• Еще одна оригинальная ПП на детскую тематику