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

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


Привязка внешних ссылок на фрагменты изображения, выделение фрагментов

#1 spooch

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

Отправлено 25 Январь 2013 - 14:20

Здравствуйте! Подскажите, пожалуйста, по такому вопросу.

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

 

 

  • 0

#2 Shaka13

Shaka13
  • Заблокированные
  • 136 сообщений
  • Репутация: 10

Отправлено 25 Январь 2013 - 14:26

так изображение целое или из кусочков
  • 0

#3 Shaka13

Shaka13
  • Заблокированные
  • 136 сообщений
  • Репутация: 10

Отправлено 25 Январь 2013 - 15:22

если изображение целое, то ты можешь воспользоваться тегом area, который позволяет произвольной области назначить ту или иную ссылку
http://htmlbook.ru/html/map
http://htmlbook.ru/html/area
для простоты работы используй любой визуальный редактор.
а если много изображений, то тут трудности не вижу.
  • 0

#4 spooch

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

Отправлено 25 Январь 2013 - 15:47

Shaka13, Если я тебя правильно понял, то энто у меня уже сделано. Я с помощью фотошопа нарезал изображение и "Сохранил для Веб", попутно добавив на фрагменты линки. Мне же нужно сделать другое - 1) как-то пометить фрагменты для того, чтобы по уникальной для каждого фрагмента сгенерируемой ссылке можно было зайти на страницу и этот фрагмент бы при этом как-то выделился из остальных.
  • 0

#5 Shaka13

Shaka13
  • Заблокированные
  • 136 сообщений
  • Репутация: 10

Отправлено 25 Январь 2013 - 16:21

spooch, а я тебя вообще не понимаю, научился бы внятно выражать свои мысли, цены тебе не было. иду по наитию, тут без js или ajax не обойтись, например http://jobyj.in/adipoli/#demo
  • 0

#6 spooch

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

Отправлено 25 Январь 2013 - 16:36

Shaka13, Попробую объяснить еще раз.

1) На главной странице сайта (www.mysite.net, например) висит изображение, которое фотошопом разбито на 4 фрагмента, вот код:
Спойлер


Каждый фрагмент ведет на свою страничку, адрес прописан в коде.

2) Мне нужно создать следующую цепочку:
Генерируется ссылка на www.mysite.net с тем самым фрагментированным изображением, но в ссылке должна быть привязка к одному из 4-х фрагментов. ---> При этом выделяется (любым способом) тот самый фрагмент, с которым был связан линк. ---> Я, увидев, какой фрагмент мне нужен, кликаю на него и перехожу на финальную страницу (что прописана в коде).

Думаю, что понятнее изложить свою мысль у меня не выйдет.. :)
  • 0

#7 Shaka13

Shaka13
  • Заблокированные
  • 136 сообщений
  • Репутация: 10

Отправлено 25 Январь 2013 - 20:29

просто пальцем ткни на образец
  • 0

#8 spooch

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

Отправлено 25 Январь 2013 - 20:44

Shaka13, теперь я тебя не понял.
Какой образец? Что ты по ссылке последней дал? Там примеры выделения, мне по сути все равно, КАК будет выделен фрагмент. Если бы у меня был пример моей задумки, я бы не спрашивал совета тут, а взял бы из примера базу для кода.
Что, если сделать закладку на фрагмент, а потом поставить на неё якорь? Так же можно добиться ссылки извне на нужный фрагмент, я правильно разобрался? Если да, то как после этого настроить "выделение" фрагмента при переходе на него с другого сайта?
  • 0

#9 yury

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

Отправлено 25 Январь 2013 - 21:37

Что-то вроде такого?
Имеем изображение домика, разделенное на фрагменты (набросал на CSS когда-то при ответе на другой вопрос и сейчас просто заиспользовал). При клике на каждый фрагмент открывается страница с подсвеченным фрагментом (по которому кликнули).
По причине отсутствия картинок оные заменены на разноцветную мотонную фоновую заливку, которую естественно следует убрать, если картинки у вас есть:
* файл house.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>house</title>
<style type="text/css">
#house{
  position: relative;
  width: 250px;
  height: 250px;
  background: #000 url(house.png);
}
#house a{
  display: block;
  font: normal 12px Arial, "Nimbus Sans L", Helvetica, sans-serif;
  color: #009;
  text-decoration: none;
}
a#roof{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 250px;
  height: 75px;
  background: #dcc;
}
a#roof:hover{
  background: #fcc url(roof_hl.png);
}
a#walls{
  position: absolute;
  top: 80px;
  left: 0px;
  width: 250px;
  height: 170px;
  background: #dcd;
}
a#walls:hover{
  background: #fcf url(walls_hl.png);
}
a#something_on_roof{
  position: absolute;
  top: 25px;
  right: 25px;
  width: 100px;
  height: 65px;
  background: #ede;
}
a#something_on_roof:hover{
  background: #fcc url(something_on_roof_hl.png);
}
a#window1{
  position: absolute;
  top: 100px;
  left: 10px;
  width: 70px;
  height: 100px;
  background: #ddc;
}
a#window1:hover{
  background: #ccf url(window1_hl.png);
}
a#window2{
  position: absolute;
  top: 100px;
  right: 10px;
  width: 70px;
  height: 100px;
  background: #ddc;
}
a#window2:hover{
  background: #ccf url(window2_hl.png);
}
a#door{
  position: absolute;
  top: 100px;
  left: 90px;
  width: 70px;
  height: 130px;
  background: #ede;
}
a#door:hover{
  background: #cfc url(door_hl.png);
}
a#stairs{
  position: absolute;
  top: 230px;
  left: 75px;
  width: 100px;
  height: 20px;
  background: #ddd;
}
a#stairs:hover{
  background: #666 url(door_hl.png);
}
<?php
if (!empty($_GET['hl']))
 {
 $to_highlight = $_GET['hl'];
  echo 'a#'.$to_highlight.'{
    background: #f00 url('.$to_highlight.'_hl.png);
}
';
 }
?>
</style>
</head>
<body>
<div id="house">
  <a href="house.php?hl=roof" id="roof" title="крыша">крыша</a>
  <a href="house.php?hl=walls" id="walls" title="стены">стены</a>
  <a href="house.php?hl=something_on_roof" id="something_on_roof" title="что-нить между крышей и окнами">что-нить между крышей и окнами</a>
  <a href="house.php?hl=window1" id="window1" title="окно">окно</a>
  <a href="house.php?hl=window2" id="window2" title="другое окно">другое окно</a>
  <a href="house.php?hl=door" id="door" title="дверь">дверь</a>
  <a href="house.php?hl=stairs" id="stairs" title="лесенка">лесенка</a>
</div>
</body>
</html>
Для полной визуализации еще нужны
* картинка домика (неподсвеченного) house.png
* картинки подсвеченных фрагментов:
- крыши roof_hl.png,
- стен walls_hl.png,
- чего-нить между крышей и окнами something_on_roof_hl.png,
- окна window1_hl.png,
- другого окна window2_hl.png,
- двери door_hl.png,
- лесенки stairs_hl.png.

Еще лень было думать про проверку на безопасность, которая обязательно нужна в любом реальном сайте.
  • 2

#10 spooch

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

Отправлено 28 Январь 2013 - 19:28

Последовал советам людей и сделал на спрайте. Получилось так:
Код CSS

.awki {
height:200px;
width:200px;
background:url(../images/a.jpg)
}
/* awki */
.awki.a1 {background-position:0px 0px;}
.awki.a2 {background-position:200px 0px;}
.awki.a3 {background-position:400px 0px;}
.awki.a4 {background-position:600px 0px;}
.awki.a5 {background-position:800px 0px;}
.awki.a6 {background-position:0px 200px;}
.awki.a7 {background-position:200px 200px;}
.awki.a8 {background-position:400px 200px;}
.awki.a9 {background-position:600px 200px;}
.awki.a10 {background-position:800px 200px;}
.awki.a11 {background-position:0px 400px;}
.awki.a12 {background-position:200px 400px;}
.awki.a13 {background-position:400px 400px;}
.awki.a14 {background-position:600px 400px;}
.awki.a15 {background-position:800px 400px;}
.awki.a16 {background-position:0px 600px;}
.awki.a17 {background-position:200px 600px;}
.awki.a18 {background-position:400px 600px;}
.awki.a19 {background-position:600px 600px;}
.awki.a20 {background-position:800px 600px;}
.awki.a21 {background-position:0px 800px;}
.awki.a22 {background-position:200px 800px;}
.awki.a23 {background-position:400px 800px;}
.awki.a24 {background-position:600px 800px;}
.awki.a25 {background-position:800px 800px;}



А это часть кода HTML

<td>
<a href="www.mysite.net/gallery/a25.html"> /* здесь линк, куда ссылается фрагмент */
<div id="a25"><img src="images/blank.gif" class="awki a7" alt=""></a></td></div></a></td>


То бишь я по линку типа http://www.mysite.ne...llery1.html#a25 попадаю на страницу и прямиком в нужный фрагмент упираюсь. Но поскольку вместе они представляют собой цельную картинку, встает вопрос выделения целевого фрагмента, иначе непонятно - где он.. Как его можно выделить при заходе на страницу, бордер этот?
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


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