9 октября 2011 г.

Перехват кликов на flash элементах при помощи java script


Иногда случается так что у тебя имеется flash баннер с «темной историей», т. е. не известно, кто и когда (зачем/почему?) его создал, но необходимо из него  сделать работающий баннер — чтобы при клике на него происходил переход в нужный раздел сайта.
Вариант как это делать, не обрабатывая сам flash баннер поместить под прозрачный элемент. Этот элемент может быть div элементом или gif картинкой 1 на 1 px.
Поэтому при помощи верстки необходимо разместить html объект по верх баннера,
и при помощи javascript прикрепить необходимые обработчики событий к этому объекту.

Html код:
<div class="flash-container">
<!-- Атрибут wmode="transparent" тега embed обязателен, иначе ничего не получится -->
	<embed  class="banner" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.tetrapolis.ru/flash/a7.swf" salign="top" autoplay="true" loop="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent"></embed>
	<div class="flash-fon" id="click-field">
	</div>
</div>
CSS код:
/* styles for flash banners: */
/* Контейнер для flash и сам flash д.б. одного размера*/
embed.banner, .flash-container{
	width:1200px;
	height:165px;
}
.flash-container{
	/*border: 1px solid black;*/
	position:relative;
}
div.flash-fon{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:transparent;
	cursor:pointer;
}
/* :styles for flash banners */
Javascript код:
Javascript код:   
var setEvent=(function(){
if (window.addEventListener!=null){
	return function(obj,eventName,handler){
		obj.addEventListener(eventName,handler,false);
	}
}else{
	return function(obj,eventName,handler){
		obj.attachEvent("on"+eventName,handler);
	}
}
}());
setEvent(window,"load",function(){
	var clickField=document.getElementById("click-field");
	setEvent(clickField,"click",function(){
		location.href="http://tetrapolis.ru";
	});
});

Комментариев нет:

Отправить комментарий