X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Привязка внешних ссылок на фрагменты изображения, выделение фрагментов
spooch
spooch
Topic Starter сообщение 25.1.2013, 15:20; Ответить: spooch
Сообщение #1


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

Имеется веб-сайт, на котором есть фрагментированное изображение. Нужно сделать так, чтобы на каждый фрагмент была привязана своя ссылка, и когда по ней проходят - переход осуществляется на страницу с фрагментированным изображением, а нужный фрагмент (по чьей ссылке перешли) выделяется/подсвечивается.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Shaka13
Shaka13
сообщение 25.1.2013, 15:26; Ответить: Shaka13
Сообщение #2


так изображение целое или из кусочков
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Shaka13
Shaka13
сообщение 25.1.2013, 16:22; Ответить: Shaka13
Сообщение #3


если изображение целое, то ты можешь воспользоваться тегом area, который позволяет произвольной области назначить ту или иную ссылку
http://htmlbook.ru/html/map
http://htmlbook.ru/html/area
для простоты работы используй любой визуальный редактор.
а если много изображений, то тут трудности не вижу.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
spooch
spooch
Topic Starter сообщение 25.1.2013, 16:47; Ответить: spooch
Сообщение #4


[member=Shaka13], Если я тебя правильно понял, то энто у меня уже сделано. Я с помощью фотошопа нарезал изображение и "Сохранил для Веб", попутно добавив на фрагменты линки. Мне же нужно сделать другое - 1) как-то пометить фрагменты для того, чтобы по уникальной для каждого фрагмента сгенерируемой ссылке можно было зайти на страницу и этот фрагмент бы при этом как-то выделился из остальных.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Shaka13
Shaka13
сообщение 25.1.2013, 17:21; Ответить: Shaka13
Сообщение #5


[member=spooch], а я тебя вообще не понимаю, научился бы внятно выражать свои мысли, цены тебе не было. иду по наитию, тут без js или ajax не обойтись, например http://jobyj.in/adipoli/#demo
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
spooch
spooch
Topic Starter сообщение 25.1.2013, 17:36; Ответить: spooch
Сообщение #6


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

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

<table id="________01" width="1200" height="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="www.mysite.net/1"
onmouseover="window.status='Test_1'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.mysite.net/images/Frag_1.gif" width="610" height="510" border="0" alt=""></a></td>
<td>
<a href="www.mysite.net/2"
onmouseover="window.status='Test_2'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.mysite.net/images/Frag_2.gif" width="590" height="510" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<a href="www.mysite.net/3"
onmouseover="window.status='Test_3'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.mysite.net/images/Frag_3.gif" width="610" height="490" border="0" alt=""></a></td>
<td>
<a href="www.mysite.net/4"
onmouseover="window.status='Test_4'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.mysite.net/images/Frag_4.gif" width="590" height="490" border="0" alt=""></a></td>
</tr>
</table>



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

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

Думаю, что понятнее изложить свою мысль у меня не выйдет.. :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Shaka13
Shaka13
сообщение 25.1.2013, 21:29; Ответить: Shaka13
Сообщение #7


просто пальцем ткни на образец
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
spooch
spooch
Topic Starter сообщение 25.1.2013, 21:44; Ответить: spooch
Сообщение #8


[member=Shaka13], теперь я тебя не понял.
Какой образец? Что ты по ссылке последней дал? Там примеры выделения, мне по сути все равно, КАК будет выделен фрагмент. Если бы у меня был пример моей задумки, я бы не спрашивал совета тут, а взял бы из примера базу для кода.
Что, если сделать закладку на фрагмент, а потом поставить на неё якорь? Так же можно добиться ссылки извне на нужный фрагмент, я правильно разобрался? Если да, то как после этого настроить "выделение" фрагмента при переходе на него с другого сайта?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 25.1.2013, 22:37; Ответить: yury_mw
Сообщение #9


Что-то вроде такого?
Имеем изображение домика, разделенное на фрагменты (набросал на 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.

Еще лень было думать про проверку на безопасность, которая обязательно нужна в любом реальном сайте.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
spooch
spooch
Topic Starter сообщение 28.1.2013, 20:28; Ответить: spooch
Сообщение #10


Последовал советам людей и сделал на спрайте. Получилось так:
Код 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.net/gallery1.html#a25 попадаю на страницу и прямиком в нужный фрагмент упираюсь. Но поскольку вместе они представляют собой цельную картинку, встает вопрос выделения целевого фрагмента, иначе непонятно - где он.. Как его можно выделить при заходе на страницу, бордер этот?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Сайт не индексируется в Google без добавления ссылок в адурилку
4 Nekit 989 20.3.2024, 21:44
автор: MorKer
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
32 2Index 5828 18.3.2024, 16:33
автор: 2Index
Горячая тема (нет новых ответов) Оптимизация сайтов, продвижение, наращивание ссылок
Большой опыт работы, отзывы
304 tario777 203066 13.3.2024, 14:01
автор: tario777
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыРучное размещение вечных ссылок и статей на хороших площадках
Опыт 10 лет!
419 leonidukg 273828 12.3.2024, 15:17
автор: leonidukg
Открытая тема (нет новых ответов) Backlinks.su - генератор обратных ссылок
Он позволяет разместить 1500+ внешних ссылок на ваш сайт бесплатно!
0 MihaylovRA 1195 3.3.2024, 18:08
автор: MihaylovRA


 



RSS Текстовая версия Сейчас: 29.3.2024, 0:04
Дизайн