Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы Всплывающая картинка при наведении на позицию в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Есть открывающийся список позиций. После клика - выдвигается к низу список позиций - выбирается нужный нажатием на нужную строку в этом списке. Как ...


Закрытая тема
 
Опции темы
Старый 28.05.2016, 12:42   #1
Есть открывающийся список позиций.
После клика - выдвигается к низу список позиций - выбирается нужный нажатием на нужную строку в этом списке.
Как сделать так что бы при наведении на строку (с выпадающим списком) появлялась картинка?

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

Что только не пробовал, и прописывал код: 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>Стрелки:&nbsp;</div></label>
<div class="ddbullet">
<select class="form-control input-sm" id="ddbullet" data-bme="Стрелки:&thinsp;" 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>

- Не хочет работать по примеру страницы которую указал (дал её код) выше.
 
Старый 28.05.2016, 12:42
Ссылки
Старый 31.05.2016, 21:39   #2
-Есть ответ или не кто не знает?
 
Старый 01.06.2016, 10:18   #3
ты дружище как то так странно объясняешь что нихира непонятно что тебе нужно
если тебе тупо нужно что бы при наведении появлялась картинка то это можно реализовать через CSS, просто пишешь на hover что блок будет block и все то есть

.hide_block {
display:none
}

.hover_block:hover .hide_block {
display:block
}

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

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

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

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

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

Hispanic Позиций картинок около 20, расписать их в css - можно (смогу) но тогда как и что подключать дополнительно?
Изображения
Тип файла: jpg карт-показ.jpg (171.8 Кб, 6 просмотров)
 
Старый 15.06.2016, 10:03   #7
не нужно на каждую картинку отдельный стиль достаточно одного
http://alex-ryhluk.com/portfolio/web-design/
ты думаешь я под каждую картинку прописывал стиль?))

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

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

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

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

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

Ваш вариант прекрасен, НО, Вы внимательны к буквам в словах которые я написал и совершенно не смогли вникнуть в суть вопроса, что именно нужно...
А нужно, что бы кликнув на открывающийся список, который открывает (выдвижением в низ) сам список позиций - при наведении на каждую (из этого списка) позицию курсором - появлялась картинка для именно для этой позиции.
Все (картинки, скрипт, адреса где их брать) прописал (как мог) и все должно было работать, НО, не задача - работать не желает. Это и есть мой вопрос (код приложен текстом в начале).
 
Старый 19.06.2016, 14:43   #9
Сам то внимателен?
Цитата:
Сообщение от Serg-RU Посмотреть сообщение
Ваш вариант прекрасен, НО, Вы внимательны к буквам в словах которые я написал и совершенно не смогли вникнуть в суть вопроса, что именно нужно...
Тебе объяснили, селект реагирует только на клик, да и то не на каждый, так как на самом деле реагирует на изменение элемента, а не на собственно клик. Ну не понимает селект перемещение мыши над раскрытым списком, не задуманно.
 
Старый 19.06.2016, 15:25   #10
Тут надо знания js! не кто его не знает включая меня
 
Старый 19.06.2016, 15:25
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающая картинка... 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


Текущее время: 19:34. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум