| |
 827 байт |
|
| | Имею такой код (упрощенный вариант для удобства анализа):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тест</title>
<style type="text/css">
img {border:none}
</style>
<script type="text/javascript">
if (screen.availWidth){
a=(screen.availWidth -185)/2;
b=(screen.availHeight -460)/2-50;
}else{
a=0;
b=0;
}
function doLoad(imghref) {
window.open(imghref,'','menubar=no,scrollbars=no,resizable=no,width=185,height=460,top='+b+',left='+a);
}
</script>
</head>
<body>
<a href="..."><img src="..." alt="Google" width="50px"></a>
<a href="javascript:doLoad('...'); void 0">Быстрый просмотр</a>
</body>
</html>
|
В нем есть маленькая картинка, ссылка на просмотр большой картинки в новом окне (щелчек по самой картинке) и ссылка для просмотра в новом окне "быстрый просмотр".
Для удобства прилагаю готовый файл. Адреса в примере заменены троеточием, так как форум отказывался принимать код с адресами | |
| |
|
|
| |
1.3 Кб |
|
| |
для: thisismy
(20.08.2013 в 16:26)
| | | В файле. присоединенном к теме все работает. Но хотелось бы, чтобы ссылка "быстрый просмотр" появлялась только при наведении на маленький рисунок. Прилагаю другой файл, где сделана попытка этого. Именно во втором файле проблема: при наведении на "Быстрый просмотр" он исчезает :(
Помогите, пожалуйста исправить. Ибо сам я в яваскрипте не очень силен | |
| |
|
|
| |
|
|
| |
для: thisismy
(20.08.2013 в 16:29)
| | | Это где вы такое нашли - javascript:doLoad('...'); void 0 ?
http://javascript.ru/void
Зачем вам вообще псевдо-протокол javascript и почему обязательно открывать в новом окне?
Есть масса готовых плагинов, как на "чистом" JS, так и под различные библиотеки, тем более под jQuery. Почему не использовать их? | |
| |
|
|
| |
|
|
| |
для: confirm
(20.08.2013 в 17:22)
| | | разве суть в том, каков протокол? Можно сделать <a href="#" onClick="doLoad...
Открывать в новом окне затем, что такая задумка. Но опять же, суть не в том. что и где открывать.
Суть в том, что ссылка "Быстрый просмотр" исчезает при попытке наведения на нее. А что она будет открывать и по какому протоколу - разве это имеет значение? Нужно сделать, чтоб ссылка появлялась при наведении на изображение и не исчезала при наведении на ссылку. | |
| |
|
|
| |
|
|
| |
для: thisismy
(20.08.2013 в 17:56)
| | | >Можно сделать <a href="#" onClick="doLoad.
А нужно ли?
Вы даже не понимаете, что такое псевдо-протокол javascript, а рассуждаете....
Я вам просто предлагаю выбросить это безобразие, и взять готовое, приятное "на ощупь". | |
| |
|
|
| |
|
|
| |
для: confirm
(20.08.2013 в 18:02)
| | | Что именно готовое? | |
| |
|
|
| |
|
|
| |
для: thisismy
(20.08.2013 в 18:03)
| | | Я же написал - есть готовые скрипты позволяющие выводить изображения и прочее в слое поверх текущего окна (это лучше, так как например, я открываю новые окна в новой вкладке, а не в новом окне, то есть без большой надобности бегать в новое окно я не хочу). Есть и плагины к библиотекам. Если вы не понимаете, то конкретно что-то советовать трудно, но подключите jOqery, и любой из плагинов всплывающих окон к нему (хотя на самом деле, это никакое ни окно на самом деле). Все это можно найти в сети, с пояснением что и как.
И запомните - a href="#" и a href="javascript:function" ради действия, это плохо. Не копируйте эту где-то у кого-то увиденную ересь. Тег А, это ссылка на новый документ, а прочие элементы на странице, можно назвать элементами управления (элементы интерфейса), и подобным элементом может служить любой элемент подходящий, а не только тег А. Ссылка имея свой стиль (даже по умолчанию) узнаваема, и пользователь привык получать по ней именно новое содержание. А элементы управления должны иметь свой стиль, отличный от ссылок. | |
| |
|
|
| |
|
|
| |
для: confirm
(20.08.2013 в 18:27)
| | | поверх текущего окна я уже вывел. Зачем мне еще какие-то скрипты для этого?
Мне нужно, чтобы ссылка не исчезала при наведении на нее. Что тут не ясного?
Вот, к примеру, выпадающее меню: http://ruseller.com/lessons/les941/demo/demo.htm
Ссылки меню не исчезают при наведении. А у меня исчезает. Мне только это нужно: чтоб ссылка не исчезала. Откратие рисунка в новом окне вставлено для простоты. На деле там будет совершенно другое. Но много другого кода усложнят задачу. Вы и в столь малом коде заблудились, говоря про окна, когда дело не в окне, а в наведении мыши на ссылку. Если бы я привел для примера весь код, вообще было б не разобраться.
Достаточно того, чтобы ссылка не исчезала. Остальное меня не интересует. | |
| |
|
|
| |
|
|
| |
для: thisismy
(20.08.2013 в 20:03)
| | | Да заради бога, делайте что хотите.
Ну коли вы не понимаете в JS, чего тогда беретесь за него и пишите какой-то кошмар на нем, да еще оппонентом выступаете по нему? Что значит "ссылка исчезает"? Нет в вышеприведенном даже намека на обработку события onmouseover, чтобы можно было говорить о причине "исчезновения". Смотрите значит чего вы там накалякали ранее. Сам по себе элемент не исчезнет, а только либо за счет стилей вами неаккуратно прописанных, либо скриптов.
<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>
|
Ничего в этом примере не исчезает само по себе? Разбирайтесь и у себя, что у вас там. | |
| |
|
|
| |
|
|
| |
для: confirm
(20.08.2013 в 20:20)
| | | в вашем собственном примере "Text" исчезает при попытке навестись на него | |
| |
|
|
| |
|
|
| |
для: thisismy
(20.08.2013 в 20:25)
| | | Text не исчезает, а появляется при наведении на "Показать", а исчезает при отведении с него мыши. И это не потому, что необъяснимо или сверх естественно, а потому, что такое поведение прописано в событиях onmouseover и onmouseout.
Подобное но по щелчку, можно и для вашего окна:
<span style="cursor: pointer" onclick="doLoad(imghref)">Показать</span>
И читайте. | |
| |
|
|
| |
|
|
| |
для: confirm
(20.08.2013 в 20:33)
| | | Господи, когда же эти гении научатся читать?!
Во первых, в самом описании проблемы сказано 'при наведении на "Быстрый просмотр" он исчезает'. И именно это нужно исправить (исчезновение ссылки "быстрый просмотр" при попытке наведения на него).
Во вторых, одном из моих ответов сказано 'в вашем собственном примере "Text" исчезает при попытке навестись на него'.
В третьих, confirm написал: 'появляется при наведении на "Показать", а исчезает при отведении с него мыши'.
Выходит, все согласны, что текст исчезает при отведении мыши с ссылки, при наведении над которой он появился?
Так при чем тут псевдо-протокол?
Нужно ведь добиться, чтобы текст не исчезал, и по нему можно было щелкнуть. А какой там протокол - значения не имеет, так как щелкнуть все равно не получается. | |
| |
|
|
| |
|
|
| |
для: thisismy
(21.08.2013 в 00:21)
| | | Вот что гений, еще раз повторяю - при наведении на ссылку сама по себе она не исчезает, ибо не имеет свойства "полтергейст", и такое ее поведение может быть только, если:
а) вы определили это стилем a:hover
б) написали JS-косяк для такого поведения
Что касается слова "Text", то изначально оно НЕ ВИДНО вообще, так как стилями определено как скрытое. И если вы видите этот текст при запуске страницы, значит разбирайтесь с настройками своего браузера, ищите косяки в нем, системе. | |
| |
|
|
| |
|
|
| |
для: 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" невозможно. | |
| |
|
|
| |
|
|
| |
для: thisismy
(21.08.2013 в 12:29)
| | | А я вам разве говорил, что это предназначено для щелчка, да еще по управляемому элементу?
Это пример того, как управляющий элемент (span) управляет стилем управляемого элемента (div), при этом управляющий элемент никуда не исчезает. Нет проблем показывать "Text" и по щелчку, и при этом span никуда исчезать не будет.
Это к тому, что ваша ссылка даже с той глупостью, что вы написали в ней, никуда не исчезнет при наведении на нее мыши без вмешательства JS или CSS. Если же у вас наблюдается полтергейст, то ищите причину в браузере. | |
| |
|
|
| |
|
|
| |
для: confirm
(21.08.2013 в 13:42)
| | | Вся тема создана для того, чтобы добиться возможности щелчка по управляемому элементу. А вы мне приводите пример и пишите "А я вам разве говорил, что это предназначено для щелчка, да еще по управляемому элементу?".
Господи Иисусе end Харя Кришны иже с ним! Да вы внимательно прочтите написанное, а не придирайтесь к протоколу, указанному для примера! | |
| |
|
|
| |
|
|
| |
для: thisismy
(21.08.2013 в 22:32)
| | | >В файле. присоединенном к теме все работает. Но хотелось бы, чтобы ссылка "быстрый просмотр" появлялась только при наведении на маленький рисунок. Прилагаю другой файл, где сделана попытка этого. Именно во втором файле проблема: при наведении на "Быстрый просмотр" он исчезает :(
А это по вашему я сочинил - и о наведении, и загадочном исчезновении?
PS. Если в моем примере я "насильно" скрываю элемент, без чего сам он не исчезнет, то что надо сделать, чтобы показать элемент и оставить его в этом состоянии?
И последний раз предлагаю подумать - нужна ли ссылка, которую нужно еще показать, для того, чтобы щелкать по ней, чтобы получить нечто другое? | |
| |
|
|
| |
|
|
| |
для: confirm
(21.08.2013 в 22:56)
| | | Сосредоточимся на этом месте цитаты: 'при наведении на "Быстрый просмотр" он исчезает :(
Помогите, пожалуйста исправить'.
Кнопка (назовм ее так) быстрого просмотра исчезает при попытке нажть на нее. Но зачем она такая нужна? Хотелось бы, чтоб на нее все таки можно было нажать.
Она исчезает, поскольку так задано в событии onmouseOut для управляющей ссылки. Как только мышь покидает ссылку, кнопка исчезает. Я переносил события на блок. Ссылка и кнопка находились внутри блока. Таким образом мышь не покидала блока, перемещаясь на кнопку... Но кнопка все равно пыталась изчезнуть (быстро появлялась и исчезала). Видимо событие для блока не всплывало сквозь кнопку и наступал момент onmouseOut, а как только кнопка исчезала, для блока наступал момент onmouseOver и она опять на мгновенье появлялась.
Поскольку не смог добиться нужного поведения, я упростил код для упрощения его анализа и выложил сюда. Как уговорить кнопку не исчезать? | |
| |
|
|
| |
|
|
| |
для: 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
(22.08.2013 в 12:03)
| | | Мне даже интересно, какое отношение ваш пример имеет к моему вопросу?
Мне что, галерея нужна? Мне нужно, чтобы кнопка не исчезала при попытке щелкнуть по ней. Вот тут http://www.wildberries.ru/catalog/870/men.aspx при наведении на фото товара появляется кнопки и не исчезает, когда по ней пытаются щелкнуть. Примерно то же хочу получить я. Именно не исчезающую при наведении кнопку. И никаких галерей. | |
| |
|
|
| |
|
|
| |
для: 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/ | |
| |
|
|
| |
|
|
| |
для: thisismy
(22.08.2013 в 15:17)
| | | Вы бы еще об NN вспомнили. Редмонд уже IE7 похоронил, о IE8 практически не думает, а вы о IE6 беспокоитесь. Очнитесь, пора об этом забывать и перекладывать эту головную боль на тех, кому до сих пор нравится эта рухлядь. | |
| |
|
|
|
