Xpoint
   [напомнить пароль]

Ссылка поверх/вокруг объекта embed

Метки: [без меток]
2008-05-13 11:34:49 [обр] Vladimir(0/2)[досье]

Добрый день.

Проблема в следующем. Есть встроенный flash-ролик через embed. С него нет никаких ссылок. Надо сделать ссылку с него. Пробовал обернуть сам объект embed, сделать невидимый div с ссылкой поверх - ничего не помогает. + есть ощущение, что у объекта z-index равен бесконечности. :((

Кто-нибудь решал такую проблему?

спустя 2 минуты [обр] Алексей В. Иванов(276/2861)[досье]
Можно и обычной ссылкой, но для того, чтобы у объекта не был бесконечный z-index нужно выставить параметр wmode="opaque" для embed (и, соотвественно, <param name="wmode" value="opaque"> для object
спустя 48 минут [обр] Ярослав Сюзёв (yara)(0/305)[досье]
М Перенесено из форума "Интернет::HTML-верстка::Верстка"
спустя 26 секунд [обр] Vladimir(0/2)[досье]
Большое спасибо, помогло.
Стыдно что не нашел сам. :))
тему можно закрывать, мое конечное решение выглядит примерно так:
<div>
   <div style="position:absolute;">
      <div style="position:relative; z-index:1"><embed type="application/x-shockwave-flash" src="f/m.swf" id="banner" name="banner" bgcolor="#FFF" quality="high" height="250" width="300" wmode="opaque"></embed></div>
      <div style="position:relative;height:270px;width:300px;top:-250px;z-index:3;border:2px solid green;" onClick="document.location='http://3434242.ru'"> <img src="img/1x1.gif" width="300" height="250" border="0" alt=""></div>
   </div>
</div>
спустя 10 месяцев [обр] Ruscon[досье]
сообщение промодерировано
Спасибо за тему, тоже столкнулся с этой проблемой.
Максимум, что покажу простой вариант через JS с использованием prototype (вариант не самый чистый, но лучше, чем с позиционированием кучи элементов)
Описание: при наведении на ссылку с классом redirect, подразумевается, что в ссылке заключён embed c id, поверх embed появляется div элемент, при щелчке на которых, вас редиректит на внутреннюю ссылку на сайте
<!-- подсключаем либку, скачать по адресу http://www.prototypejs.org/ -->
<script type="text/javascript" src="prototype.js"></script>
<!-- Делаем дивку которая будет позиционироваться поверх флэша. В бэкграунде обязательно прозначное изображение - прикол IE, без этого не работает -->
<div id="z-layer" lang="0" style="width:0px; height:0px; position:absolute; z-index:1232131231; cursor:pointer; display:none; background:url('/images/1px.gif');" onclick="document.location='/redirect/?type=banner&amp;id='+this.lang;"></div>
<div>
        <!-- 1-й баннер -->
   <a id="banner_a_1" class="redirect" onmouseover="banner_redirect(this)">
         <embed height="75" id="banner_18" width="220" style="vertical-align: top;" src="1.swf" type="application/x-shockwave-flash" wmode="opaque" />
   </a>
        <!-- 2-й баннер -->
   <a id="banner_a_1" class="redirect" onmouseover="banner_redirect(this)">
         <embed height="75" id="banner_2" width="220" style="vertical-align: top;" src="2.swf" type="application/x-shockwave-flash" wmode="opaque" />
   </a>   
</div>
<script charset="utf-8" type="text/javascript">
//Ф-ция проверки наличия в мультиклассе нужнного/ых класс/ов, можно сделать на много красивее - на вашей и моей совести =)
has_class_names = function(classes, has_classes) {
   var count = 0;
   var classes_arr = classes.split(" ");
   has_classes.each(function(has_class_name) {
      classes_arr.each(function(class_name) {
         // Если имеет данный класс, то плюсуем к общему количеству имеющихся классов из тех, что заданы для поиска в has_classes
         if(class_name == has_class_name) {
            count++;
         }
      });
   });

   // Если количество найденых классов из списка искомых совпадает с указанным количеством искомых классов, то возвращаем удачное завершение, иначе наоборот
   var check = count == has_classes.length ? 1 : 0;
   return check;
}
// Ф-ция позиционирования и подставления данных
banner_redirect = function(el) {
   try {
                // из протопайпа cumulativeOffset(element) -> [Number, Number] also accessible as { left: Number, top: Number }
                // по-русски - возвражает объект с координатами левой верхней точки(угла) элемента
      var pos = Position.cumulativeOffset(el);
      var banner_id = el.id.split('_')[2];
      var banner = $('banner_'+banner_id);
                // пример использования http://www.prototypejs.org/api/element/getDimensions
                // по-русски - возвражает объект со значениями ширины и высоты элемента
      var dem = banner.getDimensions();
                // Остальное, думаю, ясно.
      div = $('z-layer');
      div.style.left = pos[0] + 'px';
      div.style.top = pos[1] + 'px';
      div.style.width = dem.width + 'px';
      div.style.height = dem.height + 'px';
      div.style.display = 'block';
      div.lang = banner_id;
   }
   catch(e) {
      alert(Object.keys(e));
   }
}
</script>
спустя 3 минуты [обр] Ruscon[досье]
Забыл добавить...
Совместимость с IE_7, FF_3, Opera_9.5, Google Chrome, NN_9, Safari_3.2,
Powered by POEM™ Engine Copyright © 2002-2005