Помощник
|
Привязка внешних ссылок на фрагменты изображения, выделение фрагментов |
spooch
|
Сообщение
#1
|
||
|
|
||
|
|||
Shaka13 |
25.1.2013, 15:26;
Ответить: Shaka13
Сообщение
#2
|
|
так изображение целое или из кусочков
|
|
|
Shaka13 |
25.1.2013, 16:22;
Ответить: Shaka13
Сообщение
#3
|
|
если изображение целое, то ты можешь воспользоваться тегом area, который позволяет произвольной области назначить ту или иную ссылку
http://htmlbook.ru/html/map http://htmlbook.ru/html/area для простоты работы используй любой визуальный редактор. а если много изображений, то тут трудности не вижу. |
|
|
spooch
|
Сообщение
#4
|
|
[member=Shaka13], Если я тебя правильно понял, то энто у меня уже сделано. Я с помощью фотошопа нарезал изображение и "Сохранил для Веб", попутно добавив на фрагменты линки. Мне же нужно сделать другое - 1) как-то пометить фрагменты для того, чтобы по уникальной для каждого фрагмента сгенерируемой ссылке можно было зайти на страницу и этот фрагмент бы при этом как-то выделился из остальных.
|
|
|
Shaka13 |
25.1.2013, 17:21;
Ответить: Shaka13
Сообщение
#5
|
|
[member=spooch], а я тебя вообще не понимаю, научился бы внятно выражать свои мысли, цены тебе не было. иду по наитию, тут без js или ajax не обойтись, например http://jobyj.in/adipoli/#demo
|
|
|
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 |
25.1.2013, 21:29;
Ответить: Shaka13
Сообщение
#7
|
|
просто пальцем ткни на образец
|
|
|
spooch
|
Сообщение
#8
|
|
[member=Shaka13], теперь я тебя не понял.
Какой образец? Что ты по ссылке последней дал? Там примеры выделения, мне по сути все равно, КАК будет выделен фрагмент. Если бы у меня был пример моей задумки, я бы не спрашивал совета тут, а взял бы из примера базу для кода. Что, если сделать закладку на фрагмент, а потом поставить на неё якорь? Так же можно добиться ссылки извне на нужный фрагмент, я правильно разобрался? Если да, то как после этого настроить "выделение" фрагмента при переходе на него с другого сайта? |
|
|
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
|
Сообщение
#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 попадаю на страницу и прямиком в нужный фрагмент упираюсь. Но поскольку вместе они представляют собой цельную картинку, встает вопрос выделения целевого фрагмента, иначе непонятно - где он.. Как его можно выделить при заходе на страницу, бордер этот? |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Сайт не индексируется в 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 |
Текстовая версия | Сейчас: 29.3.2024, 0:04 |