Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2015, 12:19
Аспирант
Отправить личное сообщение для ILL-JAH Посмотреть профиль Найти все сообщения от ILL-JAH
 
Регистрация: 24.03.2011
Сообщений: 93

Статический элемент выше абсолютных. Как Исправить?
Всем привет. Помогите с проблемой в IE < 11.
Нужно чтобы ссылка была поверх картинки. Ессно вёрстка должна быть резиновой. Для иллюстриции проблемы я сделал один тэг "а" с шириной 100%. На сайте делаю три с шириной 33%. То есть нечно подобное map/area.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>imgBox</title>
  <style type="text/css">
    * {margin: 0; padding: 0}
    body { max-width: 1024px }
  </style>
  <script type="text/javascript">
    window.onload = function ()
    {
      var test = {};
      test.div = document.createElement('div');
      test.div.style.position = 'relative';
      test.img = document.createElement('img');
      test.img.src = 'http://www.podillbot.3141.ru/levels/blacksite/blacksite1.jpg';
      test.img.style.display = 'block';
      test.img.style.width = '100%';
      test.div.appendChild(test.img);
      test.btn = document.createElement('a');
      test.btn.href = '#';
      test.btn.style.position = 'absolute';
      test.btn.style.display = 'block';
      test.btn.style.height = '100%';
      test.btn.style.width = '100%';
      test.btn.style.top = 0;
      test.div.appendChild(test.btn);
      document.body.appendChild(test.div);
      
      test.btn.myMethod = function (event)
      {
        if (event && event.preventDefault) event.preventDefault();
        else window.event.returnValue = false;
        if (event && event.stopPropagation) event.stopPropagation();
        else event.cancelBubble = true;
        alert('It`s work!');
      }
      if (document.addEventListener) test.btn.addEventListener('click', test.btn.myMethod, false);
      else if (document.attachEvent) test.btn.attachEvent('onclick', test.btn.myMethod);
    }
  </script>
</head>
<body>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 25.02.2015, 13:40
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,210

Сообщение от ILL-JAH
Помогите с проблемой в IE < 11.
Это старинная проблема... Это особенность "пустых" элементов.
Если добавить фон (или фоновую картинку) - все будет работать. Просто сделай его практически прозрачным.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>imgBox</title>
  <style type="text/css">
    * {margin: 0; padding: 0}
    body { max-width: 1024px }
  </style>
  <script type="text/javascript">
    window.onload = function ()
    {
      var test = {};
      test.div = document.createElement('div');
      test.div.style.position = 'relative';
      test.img = document.createElement('img');
      test.img.src = 'http://www.podillbot.3141.ru/levels/blacksite/blacksite1.jpg';
      test.img.style.display = 'block';
      test.img.style.width = '100%';
      test.div.appendChild(test.img);
      test.btn = document.createElement('a');
      test.btn.href = '#';
      test.btn.style.position = 'absolute';
      test.btn.style.display = 'block';
      test.btn.style.height = '100%';
      test.btn.style.width = '100%';
      test.btn.style.top = 0;
	  /* начало */
      test.btn.style.left = 0;
      test.btn.style.background = '#ffffff';
      test.btn.style.opacity = '0.1';
	  /* окончание */
      test.div.appendChild(test.btn);
      document.body.appendChild(test.div);
      
      test.btn.myMethod = function (event)
      {
        if (event && event.preventDefault) event.preventDefault();
        else window.event.returnValue = false;
        if (event && event.stopPropagation) event.stopPropagation();
        else event.cancelBubble = true;
        alert('It`s work!');
      }
      if (document.addEventListener) test.btn.addEventListener('click', test.btn.myMethod, false);
      else if (document.attachEvent) test.btn.attachEvent('onclick', test.btn.myMethod);
    }
  </script>
</head>
<body>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 25.02.2015, 14:20
Аспирант
Отправить личное сообщение для ILL-JAH Посмотреть профиль Найти все сообщения от ILL-JAH
 
Регистрация: 24.03.2011
Сообщений: 93

ksa,
спасибо за наводку. Я добавил в фон прозрачную картинку размером 1 пиксел. Opacity распространяется на вложенные элементы.
Ответить с цитированием
  #4 (permalink)  
Старый 25.02.2015, 14:23
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,210

Сообщение от ILL-JAH
Opacity распространяется на вложенные элементы.
Так это я для примера с ним сделал.
Ответить с цитированием
  #5 (permalink)  
Старый 25.02.2015, 19:23
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

ILL-JAH, про таблицы стилей надеюсь слышал? Стилям не место в скриптах.
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как переместить элемент массива "на вверх" Solovei95 Общие вопросы Javascript 3 28.01.2012 10:55
Как отобрать каждый элемент тега <li> KamalovRadik jQuery 4 19.10.2011 14:49
Как удалить элемент из дерева DOM dummer jQuery 13 16.01.2011 16:19
имея this как удалить элемент из тела html clgs Общие вопросы Javascript 1 13.05.2009 17:55
Как передать элемент в функцию после createElement Oleg NT Общие вопросы Javascript 3 23.06.2008 02:11