Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.06.2013, 16:49
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

У вас ошибка в 18 строке. "e" не будет существовать для ie.
Ответить с цитированием
  #12 (permalink)  
Старый 16.06.2013, 16:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Галерея изображений, делегирование, tooltip
делегирование
<!DOCTYPE HTML>
<html>
<head>
  <title>Галерея</title>
  <style>
  body {
  margin: 0;
  padding: 0;
  font: 75%/120% Arial, Helvetica, sans-serif;
}

h2 {
  font: bold 190%/100% Arial, Helvetica, sans-serif;
  margin: 0 0 .2em;
}
h2 em {
  font: normal 80%/100% Arial, Helvetica, sans-serif;
  color: #999999;
}

#largeImg {
  border: solid 1px #ccc;
  width: 550px;
  height: 400px;
  padding: 5px;
}
#thumbs{
  text-align:center;
}
#thumbs a {
  position:relative;
  display:block;
  border: solid 1px #ccc;
  width: 100px;
  height: 100px;
  padding: 3px;
  margin: 2px;
  float: left;
}
#thumbs a:hover {
  border-color: #FF9900;
}
.tooltip{
  border-radius:3px;
  border-bottom-left-radius:0;
  padding:5px;
  color:white;
  z-index:3;
  position:absolute;
  top:-15px;
  right:-15px;
  background:rgba(0,0,0,.6);
}
.tooltip:after{
  content: "";
  position: absolute;
  left: -0.6px;
  bottom: -5px;
  z-index:3;
  -webkit-transform: rotate(0deg) skewX(-14deg);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0,0,0,.6);
}
p{
  position:relative;
}
  </style>
  <meta charset="utf-8">
</head>

<body>

<p>
  <img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image">
</p>

<span id="thumbs">
  <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
  <a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
  <a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
  <a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
  <a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
  <a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
</span>
<script>
var d = document.getElementById("thumbs"),
    e = document.getElementById("largeImg");
 d.onmouseover = function (a) {
     a = a || window.event;
     a = a.target || a.srcElement;
     if ("IMG" == a.tagName) {
         var b = document.createElement("div"),
             c = a.parentNode;
         b.innerHTML = c.title;
         b.className = "tooltip";
         c.appendChild(b);
         a.onmouseout = function () {
             c.removeChild(b)
             this.onmouseout = null
         }
     }
 };
 d.onclick = function (a) {
     a = a || window.event;
     a = a.target || a.srcElement;
     "IMG" == a.tagName && (e.src = a.parentNode.href);
     return false
 };
</script>
</body>
</html>

Последний раз редактировалось рони, 12.03.2018 в 00:46.
Ответить с цитированием
  #13 (permalink)  
Старый 16.06.2013, 16:58
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

zebra,
знаю, поэтому и проверяю сначала на event.scrElement так как другие браузеры не вызывают ошибку на него (хотя должны) и тогда можно отказать от лишнего условия проверки event поменяв их местами.
P.s когда писал тот коммент просто не увидел что у автора есть проверка на event
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #14 (permalink)  
Старый 16.06.2013, 17:00
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

function (e) {
    alert(event);
    
}

Откуда event тогда возьмется в других браузерах кроме ie?
Ответить с цитированием
  #15 (permalink)  
Старый 16.06.2013, 17:29
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

zebra,
VladShestakov999,
как оказалось фишка в том что у хрома есть свойтсво event у window)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #16 (permalink)  
Старый 16.06.2013, 17:40
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Ввел в консоль хрома window.event. Получил undefined
Хотя да, что-то я провтыкал, оно при событии появляется.
Ответить с цитированием
  #17 (permalink)  
Старый 16.06.2013, 17:44
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

zebra, а я забыл что у меня опера стоит на webkit и подумал что там тоже работает))
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #18 (permalink)  
Старый 16.06.2013, 18:11
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

в 10 версии лисы все нормально, значить уже в общем не актуально)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #19 (permalink)  
Старый 16.06.2013, 22:34
Аватар для VladShestakov999
Интересующийся
Отправить личное сообщение для VladShestakov999 Посмотреть профиль Найти все сообщения от VladShestakov999
 
Регистрация: 01.06.2013
Сообщений: 28

рони, Оригинальное решение))
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Книга: JavaScript. Сильные стороны Magneto Учебные материалы 16 21.04.2013 15:28
Интерпретатор Java на JS kobezzza Оффтопик 24 11.10.2012 18:32
Первый Moscow JavaScript Meetup korenyushkin Общие вопросы Javascript 0 26.07.2011 15:23
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34