Всплывающая картинка при наведении на позицию

Serg-RU · 28.05.2016, 12:42

Есть открывающийся список позиций.
После клика - выдвигается к низу список позиций - выбирается нужный нажатием на нужную строку в этом списке.
Как сделать так что бы при наведении на строку (с выпадающим списком) появлялась картинка?

Есть куча (и тележка) примеров - НО, они работают на чистой странице, без всяких там (как например у меня) выпадающих списков.

Что только не пробовал, и прописывал код: code="z-index: 1000" и code="z-index: 100000" - добавлял нули в слои что бы картинку поднять с глубины - не помогает это.
Что же сделать? Как реализовать это?

Прилагаю пример наведение на ссылку = картинка (
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Всплывающая картинка при наведении на ссылку или на картинку</title>

<style type="text/css">
/* Just some styles to set the page layout. */
* {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}
body {padding:20px; background: #393939 url(http://megascripts.ru/demo/pattern.jpg);}
h1 {font-size:18px;margin:20px 0;color: Yellow;}
h2 {font-size:14px;margin:20px 0;color: Yellow;}
h3 {font-size:14px;margin:20px 0;color: Yellow;}
p {font-size:12px;margin:20px 0;color: Yellow;}
a {font-size:12px;color: red;}
#container {width:960px;margin:0 auto;}
pre {font-family:"Courier New", Courier, monospace;font-size:12px;margin:20px 0;}
</style>
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
padding: 5px;
left: -1000px;
border: 1px solid white;
visibility: hidden;
color: Yellow;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
</head>
<body>
<div id="container">
<h1>Всплывающая картинка при наведении на ссылку или на картинку</h1>
<h2>Всплывающая картинка при наведении на ссылку</h2>

<a class="thumbnail" href="http://megascripts.ru/demo/vspl_kar_naved/index.html#">Ссылка<span>Здесь описание<img src="./Всплывающая картинка при наведении на ссылку или на картинку_files/43323.jpg" width="500"></span></a>

<h2>Всплывающая картинка при наведении на картинку</h2>

<a class="thumbnail" href="http://megascripts.ru/demo/vspl_kar_naved/index.html#"><img src="./Всплывающая картинка при наведении на ссылку или на картинку_files/43323.jpg" width="200px" border="0"><span><img src="./Всплывающая картинка при наведении на ссылку или на картинку_files/43323.jpg" width="500px">Ваш текст</span></a>

</div></body></html>)
- Этот пример не хочет работать с выпадающим списком.

Код моего выпадающего списка:
<div class="col-2" id="ddbullet"><label>Стрелки: </div></label>
<div class="ddbullet">
<select class="form-control input-sm" id="ddbullet" data-bme="Стрелки: " name="D2" style="width: 85px" title="Выбрать здесь или внизу страницы">

<option> к часам </option>
<option><a href="#4" class="ddbullet" rel="bulletimg5">
№ 04 - 66/100</a></option>
<option><a href="#1" class="ddbullet" rel="bulletimg1" code="z-index: 1000">№ 5 - 66/100</a></option>

<option class="ddbullet" rel="bulletimg5">№ 06 - 66/100 </option>
<option> № 7 - 65/89 </option>
<option> № 8 - 63/90 </option>
<option> № J2 - 70/90/93 </option></select>

- Не хочет работать по примеру страницы которую указал (дал её код) выше.

Serg-RU · 31.05.2016, 21:39

-Есть ответ или не кто не знает?

Hispanic · 01.06.2016, 10:18

ты дружище как то так странно объясняешь что нихира непонятно что тебе нужно
если тебе тупо нужно что бы при наведении появлялась картинка то это можно реализовать через CSS, просто пишешь на hover что блок будет block и все то есть

.hide_block {
display:none
}

.hover_block:hover .hide_block {
display:block
}

все! что у тебя там не работает, как ты его делал, с помощью чего, я лично нихира не понимаю

newJS · 02.06.2016, 07:40

селект это такая пакость, которая отвратительно реализована в винде, а каждый язык ещё своё Г. добавляет.
В JS селект практически не управляем, то что ты хочешь можно реализовать только сделав самодельный селект( не так то это и сложно).
После 10 минут копанья, таки нарыл древний код такого селекта.

Ещё есть, ещё более древний NWSselect, мощьная штука с использованием библиотек, только сайт ихний не отвечает, а то что у меня сохранилось, не пойму как запустить.

Всё ещё надо? а то лень с этим возиться, могу архивом всё это выложить, и имейте удовольствие сами.

Начертательная Геометрия · 04.06.2016, 22:13

В принципе, можно на каждый элемент повесить обработчик, который будет брать адрес картинки из этого элемента и вставлять в DOM. Но, практически, велика вероятность, что браузер (например IE) использует GUI операционной системы и в результате, этот колхоз работать не будет или будет, но с какими-нибудь глюками в отдельно взятых версиях. Так что лучше, даже и не думать об этом. Если очень надо, реализуйте список другими средствами, а не select-ом.

Берёте div и вкладываете в него div-ы являющиеся элементами списка. Родительский div развёртывается при наведении, и далее, при наведении на элементы списка открывается нужная картинка.

Serg-RU · 15.06.2016, 08:50

Цитата:

Сообщение от Начертательная Геометрия

В принципе, можно на каждый элемент повесить обработчик, который будет брать адрес картинки из этого элемента и вставлять в DOM. Но, практически, велика вероятность, что браузер (например IE) использует GUI операционной системы и в результате, этот колхоз работать не будет или будет, но с какими-нибудь глюками в отдельно взятых версиях. Так что лучше, даже и не думать об этом. Если очень надо, реализуйте список другими средствами, а не select-ом.

Берёте div и вкладываете в него div-ы являющиеся элементами списка. Родительский div развёртывается при наведении, и далее, при наведении на элементы списка открывается нужная картинка.

- Код открывающегося списка я дал в самом начале объяснения того что нужно..
Форма списка (с select-ом) собрана на вордстрапе и изменить её нет возможности, так как все работает. По этому и нужно отыскать решение как при наведении на позицию в открытом списке добиться появления картинки для каждой позиции (строки) в открывшемся списке.

Hispanic Позиций картинок около 20, расписать их в css - можно (смогу) но тогда как и что подключать дополнительно?

Hispanic · 15.06.2016, 10:03

не нужно на каждую картинку отдельный стиль достаточно одного
http://alex-ryhluk.com/portfolio/web-design/
ты думаешь я под каждую картинку прописывал стиль?))

Добавлено через 38 секунд

*собрана на вордстрапе ???? это что))

Serg-RU · 19.06.2016, 10:55

Цитата:

Сообщение от Hispanic

не нужно на каждую картинку отдельный стиль достаточно одного
http://alex-ryhluk.com/portfolio/web-design/
ты думаешь я под каждую картинку прописывал стиль?))

Добавлено через 38 секунд

*собрана на вордстрапе ???? это что))

Имел в виду фреймворк для разработки адаптивных и мобильных web-проектов - http://bootstrap-3.ru/index.php - это о нем. Про боотстрап написал потому что надеялся получить ответ от тех кто в нем работает и возможно знает пути решения для моей ситуации.

Ваш вариант прекрасен, НО, Вы внимательны к буквам в словах которые я написал и совершенно не смогли вникнуть в суть вопроса, что именно нужно...
А нужно, что бы кликнув на открывающийся список, который открывает (выдвижением в низ) сам список позиций - при наведении на каждую (из этого списка) позицию курсором - появлялась картинка для именно для этой позиции.
Все (картинки, скрипт, адреса где их брать) прописал (как мог) и все должно было работать, НО, не задача - работать не желает. Это и есть мой вопрос (код приложен текстом в начале).

newJS · 19.06.2016, 14:43

Сам то внимателен?

Цитата:

Сообщение от Serg-RU

Ваш вариант прекрасен, НО, Вы внимательны к буквам в словах которые я написал и совершенно не смогли вникнуть в суть вопроса, что именно нужно...

Тебе объяснили, селект реагирует только на клик, да и то не на каждый, так как на самом деле реагирует на изменение элемента, а не на собственно клик. Ну не понимает селект перемещение мыши над раскрытым списком, не задуманно.

mamon-88 · 19.06.2016, 15:25

Тут надо знания js! не кто его не знает включая меня

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Всплывающая картинка...	byzantiner	HTML, CSS, JavaScript	31	13.10.2010 18:08
Как сделать, чтобы браузеры запоминали позицию страницы при переходе?	Sysopdt	HTML, CSS, JavaScript	3	07.04.2010 22:45
Как сделать так, чтоб при наведении курсором на кнопку, картинка менялась	Electrotroll	HTML, CSS, JavaScript	5	19.03.2005 20:37
Меняющаяся картинка при наведении мыши	Temira	ASP, Perl, PHP и MySQL	1	26.02.2005 18:21
Всплывающая панелька	DEM	Технологии Flash	3	28.04.2003 16:11

28.05.2016, 12:42	#1
Serg-RU	Есть открывающийся список позиций. После клика - выдвигается к низу список позиций - выбирается нужный нажатием на нужную строку в этом списке. Как сделать так что бы при наведении на строку (с выпадающим списком) появлялась картинка? Есть куча (и тележка) примеров - НО, они работают на чистой странице, без всяких там (как например у меня) выпадающих списков. Что только не пробовал, и прописывал код: code="z-index: 1000" и code="z-index: 100000" - добавлял нули в слои что бы картинку поднять с глубины - не помогает это. Что же сделать? Как реализовать это? Прилагаю пример наведение на ссылку = картинка ( <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0052)http://megascripts.ru/demo/vspl_kar_naved/index.html --> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Всплывающая картинка при наведении на ссылку или на картинку</title> <style type="text/css"> /* Just some styles to set the page layout. / {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;} body {padding:20px; background: #393939 url(http://megascripts.ru/demo/pattern.jpg);} h1 {font-size:18px;margin:20px 0;color: Yellow;} h2 {font-size:14px;margin:20px 0;color: Yellow;} h3 {font-size:14px;margin:20px 0;color: Yellow;} p {font-size:12px;margin:20px 0;color: Yellow;} a {font-size:12px;color: red;} #container {width:960px;margin:0 auto;} pre {font-family:"Courier New", Courier, monospace;font-size:12px;margin:20px 0;} </style> <style type="text/css"> .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /CSS for enlarged image/ position: absolute; background-color: #3d3d3d; padding: 5px; left: -1000px; border: 1px solid white; visibility: hidden; color: Yellow; text-decoration: none; border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; } .thumbnail span img{ /CSS for enlarged image/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /CSS for enlarged image on hover/ visibility: visible; top: 0; left: 60px; /position where enlarged image should offset horizontally / } </style> </head> <body> <div id="container"> <h1>Всплывающая картинка при наведении на ссылку или на картинку</h1> <h2>Всплывающая картинка при наведении на ссылку</h2> <a class="thumbnail" href="http://megascripts.ru/demo/vspl_kar_naved/index.html#">Ссылка<span>Здесь описание<img src="./Всплывающая картинка при наведении на ссылку или на картинку_files/43323.jpg" width="500"></span></a> <h2>Всплывающая картинка при наведении на картинку</h2> <a class="thumbnail" href="http://megascripts.ru/demo/vspl_kar_naved/index.html#"><img src="./Всплывающая картинка при наведении на ссылку или на картинку_files/43323.jpg" width="200px" border="0"><span><img src="./Всплывающая картинка при наведении на ссылку или на картинку_files/43323.jpg" width="500px">Ваш текст</span></a> </div></body></html>) - Этот пример не хочет работать с выпадающим списком. Код моего выпадающего списка: <div class="col-2" id="ddbullet"><label>Стрелки: </div></label> <div class="ddbullet"> <select class="form-control input-sm" id="ddbullet" data-bme="Стрелки: " name="D2" style="width: 85px" title="Выбрать здесь или внизу страницы"> <!-- Список стрелок 24 --> <option> к часам </option> <option><a href="#4" class="ddbullet" rel="bulletimg5"> № 04 - 66/100</a></option> <option><a href="#1" class="ddbullet" rel="bulletimg1" code="z-index: 1000">№ 5 - 66/100</a></option> <option class="ddbullet" rel="bulletimg5">№ 06 - 66/100 </option> <option> № 7 - 65/89 </option> <option> № 8 - 63/90 </option> <option> № J2 - 70/90/93 </option></select> - Не хочет работать по примеру страницы которую указал (дал её код) выше.

31.05.2016, 21:39	#2
Serg-RU	-Есть ответ или не кто не знает?

01.06.2016, 10:18	#3
Hispanic	ты дружище как то так странно объясняешь что нихира непонятно что тебе нужно если тебе тупо нужно что бы при наведении появлялась картинка то это можно реализовать через CSS, просто пишешь на hover что блок будет block и все то есть .hide_block { display:none } .hover_block:hover .hide_block { display:block } все! что у тебя там не работает, как ты его делал, с помощью чего, я лично нихира не понимаю

02.06.2016, 07:40	#4
newJS	селект это такая пакость, которая отвратительно реализована в винде, а каждый язык ещё своё Г. добавляет. В JS селект практически не управляем, то что ты хочешь можно реализовать только сделав самодельный селект( не так то это и сложно). После 10 минут копанья, таки нарыл древний код такого селекта. Ещё есть, ещё более древний NWSselect, мощьная штука с использованием библиотек, только сайт ихний не отвечает, а то что у меня сохранилось, не пойму как запустить. Всё ещё надо? а то лень с этим возиться, могу архивом всё это выложить, и имейте удовольствие сами.

04.06.2016, 22:13	#5
Начертательная Геометрия	В принципе, можно на каждый элемент повесить обработчик, который будет брать адрес картинки из этого элемента и вставлять в DOM. Но, практически, велика вероятность, что браузер (например IE) использует GUI операционной системы и в результате, этот колхоз работать не будет или будет, но с какими-нибудь глюками в отдельно взятых версиях. Так что лучше, даже и не думать об этом. Если очень надо, реализуйте список другими средствами, а не select-ом. Берёте div и вкладываете в него div-ы являющиеся элементами списка. Родительский div развёртывается при наведении, и далее, при наведении на элементы списка открывается нужная картинка.

15.06.2016, 10:03	#7
Hispanic	не нужно на каждую картинку отдельный стиль достаточно одного http://alex-ryhluk.com/portfolio/web-design/ ты думаешь я под каждую картинку прописывал стиль?)) Добавлено через 38 секунд *собрана на вордстрапе ???? это что)) Последний раз редактировалось Hispanic; 15.06.2016 в 10:03.. Причина: Добавлено сообщение

19.06.2016, 15:25	#10
mamon-88	Тут надо знания js! не кто его не знает включая меня