Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Всплывающие изображения.

#1 govegan

govegan
  • Пользователь
  • 15 сообщений
  • Репутация: 1
0

Отправлено 23 Март 2013 - 10:32

Здравствуйте уважаемые вебмастера!
Помогите, пожалуйста, советом.
Нужно сделать чтобы при наведении на блок всплывало окошко с фотографией. Сайт milfort.ru, при наведении на одно из трех зданий. Какой для этого нужен код?
Нашёл в два скрипта, но они не работают(

 

 

  • 0

#2 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 23 Март 2013 - 11:57

на том сайте использовали jQuery lightBox plugin
в инете куча инфы на эту тему, копай
  • 0

#3 govegan

govegan
    Topic Starter
  • Пользователь
  • 15 сообщений
  • Репутация: 1

Отправлено 25 Март 2013 - 09:03

Это мой сайт =)
На нём сделан hover в CSS.

Немного поясню ситуацию.
Нужно, чтобы при наведении на одно из трех зданий:

1)оно подсвечивалось (сделал)
2)Появлялось всплывающее изображение (без кликов, просто при наведении)
Я воспользовался примером отсюда: http://пенсионер.net....-kursorom.html Но почему то он не работает.


  • 0

#4 Golland

Golland
  • Пользователь
  • 163 сообщений
  • Репутация: 10

Отправлено 25 Март 2013 - 16:35

Какой скрипт использовали для подсветки зданий, если не секрет ? Или дайте пожалуйста ссылку, где его можно найти. Насчет всплывающих изображений - вижу уже решили этот вопрос. )
  • 1

#5 govegan

govegan
    Topic Starter
  • Пользователь
  • 15 сообщений
  • Репутация: 1

Отправлено 27 Март 2013 - 08:42

Подсветка это обычный hover эффект в CSS.
Проблема решена частично, т.к. теперь требуется при нажатии на блок переходить на другую страницу сайта. При этом необходимо, чтобы была подсветка и всплывающее изображение (+ссылка на другую страницу), то есть 3 в 1-м.

Как реализовать переход на другую страницу при клике на здание?


  • 1

#6 Golland

Golland
  • Пользователь
  • 163 сообщений
  • Репутация: 10

Отправлено 27 Март 2013 - 15:14

Подсветка это обычный hover эффект в CSS.

Спасибо за наводку, дальше разберусь сам. :) Сам не вебмастер, просто на уровне любителя интересуюсь такими эффектами да и вообще сайтостроением.
  • 0

#7 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 28 Март 2013 - 10:16

Как реализовать переход на другую страницу при клике на здание?

Скрипты в данном случае не нужны (если не требуются какие-либо плавные переходы).
Еще желательно научить ИЕ6, что такое png-прозрачность (либо просто используйте изображения без прозрачных областей), иначе в нем ваша подсветка будет выглядеть криво.
Реализуется все это дело, примерно, так (обратите внимание на правильность путей к изображениям blocknew.jpg, left.png, tsentr.png, использованных в стилях):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
#img{
  position: relative;
  width: 1663px;
  height: 891px;
  background: url('/images/blocknew.jpg') no-repeat;
}

a#house{
  position: absolute;
  top: 235px;
  left: 0px;
  width: 488px;
  height: 171px;
  text-decoration: none;
}
a#house:hover{
  background: url('/images/left.png') no-repeat;
}
a#house .flt{
  display: none;
  padding: 1em;
  font: normal 12px Verdana, Geneva, "DejaVu Sans", sans-serif;
  text-align: justify;
  width: 300px;
  color: #000;
  background: #fff;
}
a#house:hover .flt{
  display: block;
  box-shadow: 3px 3px 10px 1px #333;
  position: absolute;
  top: 0;
  left: 100%;
}
a#house .flt img{
  float: left;
  margin: 0 0.5em 0.5em 0;
  padding: 0.5em;
  border: 1px solid #000;
  background: #fff;
  width: 40px;
  height: 40px;
}

a#house2{
  position: absolute;
  top: 360px;
  left: 683px;
  width: 260px;
  height: 265px;
  text-decoration: none;
}
a#house2:hover{
  background: url('/images/tsentr.png') no-repeat;
}
a#house2 .flt{
  display: none;
  padding: 1em;
  font: normal 12px Verdana, Geneva, "DejaVu Sans", sans-serif;
  text-align: justify;
  width: 300px;
  color: #000;
  background: #fff;
}
a#house2:hover .flt{
  display: block;
  box-shadow: 3px 3px 10px 1px #333;
  position: absolute;
  top: 0;
  left: 100%;
}
a#house2 .flt img{
  float: left;
  margin: 0 0.5em 0.5em 0;
  padding: 0.5em;
  border: 1px solid #000;
  background: #fff;
  width: 40px;
  height: 40px;
}
</style>
</head>
<body>
<div id="img">
  <a href="http://google.ru/" id="house">
   <span class="flt"><img src="" alt="" />
	 Здравствуйте уважаемые вебмастера!
	 Помогите, пожалуйста, советом.
	 Нужно сделать чтобы при наведении на блок всплывало окошко с фотографией. Сайт milfort.ru, при наведении на одно из трех зданий. Какой для этого нужен код?
	 Нашёл в два скрипта, но они не работают(
   </span>
  </a>
  <a href="http://www.masterwebs.ru/topic/14915-vsplivajushie-izobrazhenija/" id="house2">
   <span class="flt"><img src="" alt="" />
	 Это мой сайт =)
	 На нём сделан hover в CSS.
	 Немного поясню ситуацию.
	 Нужно, чтобы при наведении на одно из трех зданий:
	 1)оно подсвечивалось (сделал)
	 2)Появлялось всплывающее изображение (без кликов, просто при наведении)
	 Я воспользовался примером отсюда: http://пенсионер.net/joomlasvoja/rab...-kursorom.html Но почему то он не работает.
	 Подсветка это обычный hover эффект в CSS.
	 Проблема решена частично, т.к. теперь требуется при нажатии на блок переходить на другую страницу сайта. При этом необходимо, чтобы была подсветка и всплывающее изображение (+ссылка на другую страницу), то есть 3 в 1-м.
	 Как реализовать переход на другую страницу при клике на здание?
   </span>
  </a>
</div>
</body>
</html>

  • 0


Оформление форума – IPBSkins.ru