|
| |
|
|
| |
для: thisismy
(22.08.2013 в 15:17)
| | | Вы бы еще об NN вспомнили. Редмонд уже IE7 похоронил, о IE8 практически не думает, а вы о IE6 беспокоитесь. Очнитесь, пора об этом забывать и перекладывать эту головную боль на тех, кому до сих пор нравится эта рухлядь. | |
| |
|
|
| |
|
|
| |
для: thisismy
(22.08.2013 в 14:18)
| | | Ничего вы не понимаете, не понимаете сути написанного, не доходит до вас, что вас никто не заставляет делать галерею, это просто пример, и в нем может быть не куча изображений, а одно. Хотя товаров на странице не один, так что куча товаров на странице от понятия "галерея" отличается чисто номинально.
Это действительно моя ошибка показать вам этот пример, ибо для вас это высшая математика. Но я вам ранее показывал простой пример, в нем черным по белому описывались события, и визуально видно как они работают. Повторяю еще раз, последний:
<img width="100" height="100" onmouseover="document.getElementById('bt').style.visibility='visible'" />
<button id="bt" style="visibility:hidden" onclick="alert('Щелкнули')">Увеличить</button>
|
Не исчезает ничего? Щелкать можно? Щелкайте на удовольствие.
Лазить по сайтам и смотреть какие там кнопочки у меня нет желания, ибо чтобы там ни было, работает все на одном и том же принципе, другого просто нет в рамках html/js/css, и мне это хорошо известно. | |
| |
|
|
| |
|
|
| |
для: confirm
(22.08.2013 в 12:03)
| | | ИЕ 6 не признает hover для произвольных элементов. Так что фокусы типа li:hover с ним не проходят. Потому-то я и пытался это сделать скриптом, а не стилями. А стилями-то запросто http://sex-toys.su/shop/igrushki_dlya_seksa/analnye_stimulyatory/vibratory/ | |
| |
|
|
| |
|
|
| |
для: confirm
(22.08.2013 в 12:03)
| | | Мне даже интересно, какое отношение ваш пример имеет к моему вопросу?
Мне что, галерея нужна? Мне нужно, чтобы кнопка не исчезала при попытке щелкнуть по ней. Вот тут http://www.wildberries.ru/catalog/870/men.aspx при наведении на фото товара появляется кнопки и не исчезает, когда по ней пытаются щелкнуть. Примерно то же хочу получить я. Именно не исчезающую при наведении кнопку. И никаких галерей. | |
| |
|
|
| |
|
|
| |
для: thisismy
(22.08.2013 в 11:21)
| | | Я уже замучился объяснять и показывать на примере почему может "исчезать", вернее, что может определяет такое поведение. Начинайте изучать самостоятельно, вникая в материал, пробуя и запоминая.
Прежде чем создавать ссылки, кнопки и т.п. для задачи "показать большое изображение, по щелку по Х-элементу", задайтесь вопрос, "а нужен ли он этот Х-элемент?" Пора усвоить, что событие onclick может быть не только у ссылки, но и у других элементов. Следовательно зачем нужен этот элемент, который должен появится при наведении на эскиз, с которого нужно уйти на этот элемент, щелкнуть по нему, чтобы получить большое изображение? Что по малому изображению для этого щелкнуть не достаточно? Некая надпись "Показать большое..." может появляться, но как информативная, не более, зачем по ней щелкать?
А вообще она совсем не нужна, так как информацию "увеличить" можно выводить прямо на изображение, и это будет вполне информативно, более привлекательно, и не занимать впустую места около эскизов. Этого добра (примеров) в сети хоть отбавляй, надо только полюбопытствовать "как делается?" А сделать можно просто:
<!DOCTYPE HTML>
<html>
<head>
<style>
ul {
list-style: none;
padding: 0;
}
li {
display: inline-block;
width: 130px;
height: 100px;
position: relative;
cursor: pointer;
}
li img {
position: absolute;
width: 130px;
height: 100px;
z-index: 1;
}
.zoom {
width: 43px;
height: 42px;
position: absolute;
left: 43px;
top: 29px;
display: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAqCAY AAAAqAaJlAAAAGXRFWHRTb2Z0d2FyZQBBZG 9iZSBJbWFnZVJlYWR5ccllPAAABhhJREFUe Nr
UWWlMVFcUnhmGYRkoCJVFEAhQqCwCKgISLE hgJKOGWH/4A9JIIkYK0kCDCSRIpGmCSwkSAxETRQNpgE JVSigGkC1RkaWUdaAxKGWZAWQJ+wz0u8lM8uZ1WObNGPEkN8xd3n3fO/cs37mwWSwW
B+0rNCs0Nmv3yQbaONogAXcAzZK1+2WCaNWC9XmIBVfdow8NDbWIiYnx9fb29rK2 tnbh8/nmPB7PaGlpaXpmZmZ0eHi4v6Wlpf3GjRvtY rF4RYtg2QRo8E5WXrly5evExMTvHB0d/XeyXiqVr
gJ0SVJS0m/t7e0zWkG7HVgHBwd+eXn5ZR8fHyGTF6ytrS0WFxfnXLhwoWZjY+PjgT19+rT148ePb5qYmNhoqpWurq4qf3//bJiLVOtgT506ZVVaWpqnr69vSp8bGxvram5 urq2srPwbRy0BAN
m+ffv0YM+2ERERfkeOHDkJW/6S/tzg4GCju7v7dWhbpjWwTk5ORm1tbfl0jUok EtHt27dzs7Kyurfa1NTUlJefn3/y7Nmzl3R1dQ2pc69evSqDhu8yAatDzJI+2NDQkGxnZ+dDHevo6PgDGsu
ora0d227T5eVlWVlZ2UB3d3eDQCDwxemYKO ZsbW3d9PT0erHPqMaaTUlJ8YDmcmnaKA8IC Mhl4iAHDx40aWxsvEs9pfn5+QkbG5to/F1TZy8OfSA+Pj6G2kes7Ict5m8GFOP1iraJY80mJCSk
rUMUY8bGxpY5OTnB6n64EtgzZ85Y79+/X+n4MzIyshcWFtY0iQSIKMNwxF+pY0Kh8JxGYKOioo5S+yMjI515eXkibQT09PT035Vyp4WFS3Bw8F7G YL28vJS0+uLFixpt5UrsJUHI66adpDNjs
JaWlkoP19fXD2iTiQwMDHRQ+y4uLvbqPM+ldgwNDc2p/Z6eng90Z9qSeKqYZ7PZIYrfo6OjE9Q5RIgv GGtWR0eHS8vrG9rULDUiEEHC0GUMFsF8jtq 3t7fnaxMsMpuSJufm5uYZm8HU1NRbmI
KZoh8UFGRXUVHxr6ojVXX0quap4uzs7EqLN mOMNQui0UvtI7QEaFGrPHAOpf1Ahv5hDPb5 8+ettFQpIOlSG2Bv3boVBBPVV/RXVlbmSLJgDBaMqhfZapLicLx79+5FaQoU9NHg/PnzsdSxly9
fPlWXKnJo3i979uxZIXXMz8/vHIiNH1OgHA6HXV1d/QP4rQUlKkivXbv2RKN0SyQ2NvZPFH7vqWPJ ycnXU1NTPVVXcewQRVMFtKmp6ZKnp2c4LYR JQcLNNOazq6ur66BuPWD8QgBgy1+qc+LE
CcGhQ4eWoKUhwle32xjr99bU1KQihUeo+AgueK5AJpP9hY8Ra0S+W1tbpxBmJHhRIEWDbFdXV9+4uLhwaGVhenp6BmX3Ii2pcC5evOiUnZ39bV paWrq5ubn9FuahExISIjAyMhLBsUc0LhgfP
XoUASaWIlfw/4SYy+Tk5DCOVcbj8QytrKxcURWolUIJT75///5PML9aRppVCBLCEDTQBSfz43K5+vR5Uq6YmZnZQYMOiKM2WKOn/s0Fm3X48OHjsOuZkpKSAcZg5dRuHKCrYBKk fjqAzTk7BY
IwKEZJ9BT1nDt7s+ORi5ubm/+xY8fWi4qKuhiDlVe1qw8ePGiDc1VCixN79u zhk1Ck6v3kUgOZsLmwsLAATppbUFDQihPoQ w0XglPa8kOR4XzCwsIMHj582KaqjNrx9RFd YJ8GxOOhNRMDAwM
u7HcZlHK6rq5OIpVK1+nrr1696pGZmXmTmsU2k87OzipY3i+ITDKtgGUicCLnO3fuZKMUN9purUgkagDgn6 GE1U2TwscUpO6h6OjouMXFxent1qKK+AYxOHnLDPaxpbS09H1kZOTl2dnZbekh
bPjoJwUrZ3fi8PDw75FY3m61DhSy4pODJfL 69esPgYGBiePj472q5vv6+mqFQmHRrgBLpL+/fx4J4cd3794p8eihoaFmX1/fLDqF/KRg5RXvkoeHRxq5v0WoWnzz5s0TRIFMVbdA JHQd3w2gd
0IjSAYjQdr4MwArJmDJRQYPjc/avf+0I5cjov8EGABiSIX4vtAIDAAAAABJRU5Erk Jggg==);
z-index: 10;
}
li:hover .zoom {
display: block;
}
</style>
<script>
function imageZoom(e) {
if(e.tagName!='UL') {
var im = e.tagName=='IMG' ? e.src : e.nextSibling.src;
alert('Выбрано изображение '+im);
}
}
</script>
</head>
<body>
<ul onclick="imageZoom(event.target || event.srcElement)">
<li><div class="zoom"></div><img src="img1.jpg" /></li>
<li><div class="zoom"></div><img src="img2.jpg" /></li>
<li><div class="zoom"></div><img src="img3.jpg" /></li>
<li><div class="zoom"></div><img src="img4.jpg" /></li>
</ul>
</body>
</html>
|
Буквально на этом примере можно построить галерею - показ больших фото.
Значение url в свойстве background разбито для того чтобы не было горизонтальной прокрутки, на самом деле это значение должно быть прописано одной строкой, и без пробелов. | |
| |
|
|
| |
|
|
| |
для: confirm
(21.08.2013 в 22:56)
| | | Сосредоточимся на этом месте цитаты: 'при наведении на "Быстрый просмотр" он исчезает :(
Помогите, пожалуйста исправить'.
Кнопка (назовм ее так) быстрого просмотра исчезает при попытке нажть на нее. Но зачем она такая нужна? Хотелось бы, чтоб на нее все таки можно было нажать.
Она исчезает, поскольку так задано в событии onmouseOut для управляющей ссылки. Как только мышь покидает ссылку, кнопка исчезает. Я переносил события на блок. Ссылка и кнопка находились внутри блока. Таким образом мышь не покидала блока, перемещаясь на кнопку... Но кнопка все равно пыталась изчезнуть (быстро появлялась и исчезала). Видимо событие для блока не всплывало сквозь кнопку и наступал момент onmouseOut, а как только кнопка исчезала, для блока наступал момент onmouseOver и она опять на мгновенье появлялась.
Поскольку не смог добиться нужного поведения, я упростил код для упрощения его анализа и выложил сюда. Как уговорить кнопку не исчезать? | |
| |
|
|
| |
|
|
| |
для: thisismy
(21.08.2013 в 22:32)
| | | >В файле. присоединенном к теме все работает. Но хотелось бы, чтобы ссылка "быстрый просмотр" появлялась только при наведении на маленький рисунок. Прилагаю другой файл, где сделана попытка этого. Именно во втором файле проблема: при наведении на "Быстрый просмотр" он исчезает :(
А это по вашему я сочинил - и о наведении, и загадочном исчезновении?
PS. Если в моем примере я "насильно" скрываю элемент, без чего сам он не исчезнет, то что надо сделать, чтобы показать элемент и оставить его в этом состоянии?
И последний раз предлагаю подумать - нужна ли ссылка, которую нужно еще показать, для того, чтобы щелкать по ней, чтобы получить нечто другое? | |
| |
|
|
| |
|
|
| |
для: confirm
(21.08.2013 в 13:42)
| | | Вся тема создана для того, чтобы добиться возможности щелчка по управляемому элементу. А вы мне приводите пример и пишите "А я вам разве говорил, что это предназначено для щелчка, да еще по управляемому элементу?".
Господи Иисусе end Харя Кришны иже с ним! Да вы внимательно прочтите написанное, а не придирайтесь к протоколу, указанному для примера! | |
| |
|
|
| |
|
|
| |
для: thisismy
(21.08.2013 в 12:29)
| | | А я вам разве говорил, что это предназначено для щелчка, да еще по управляемому элементу?
Это пример того, как управляющий элемент (span) управляет стилем управляемого элемента (div), при этом управляющий элемент никуда не исчезает. Нет проблем показывать "Text" и по щелчку, и при этом span никуда исчезать не будет.
Это к тому, что ваша ссылка даже с той глупостью, что вы написали в ней, никуда не исчезнет при наведении на нее мыши без вмешательства JS или CSS. Если же у вас наблюдается полтергейст, то ищите причину в браузере. | |
| |
|
|
| |
|
|
| |
для: confirm
(21.08.2013 в 06:11)
| | | Ну вот снова: я про Ивана, а вы про болвана...
Кто сказал, что я вижу "Text" при открытии страницы?
Я вижу его при наведении на "Показать". Однако, как только я пытаюсь щелкнуть по слову "Text", он исчезает. Вы сами-то сохраните свой код в файл и попытайтесь щелкнуть по "Text"
<span style="cursor: pointer" onmouseover="document.getElementById('wnd').style.display='block'"
onmouseout="document.getElementById('wnd').style.display='none'">Показать</span>
<div id="wnd" style="display:none">Text</div>
|
Благодаря тому, что у "Показать" onmouseout="document.getElementById('wnd').style.display='none'", "Text" изчезает, как только мышь покадает "Показать" и щелкнуть по "Text" невозможно. | |
| |
|
|
|
