Выделение изображения (полностью или рамки) при переходе на страницу
Здравствуйте!
Я новичок в сайтостроении, потому прошу у гуру JavaScript'а помощи. С форума по Html меня перенаправили на JS. Задача у меня такая - есть страничка с изображениями, каждое помечено закладкой. При переходе по линку типа www.mysite.net/home.html#zap1 я попадаю прямиком на нужное изображение. Подскажите, как сделать так, чтобы при данном переходе, целевая картинка выделялась (красная рамка вокруг картинки, например)? :-? |
scpooch,
Не нашел по ссылке нужный элемент(изо или ссылку) с name = zap1 или id = zap1 |
Это было в качестве примера.
Вот код примера: <td> <a href="http://www.mysite.net/zap1.html"> <div id="zap1"><img src="images/zap1.gif" width="200" height="200" border="0" alt=""></div></a> </td> |
Тестовым скриптом перейдем по ссылке ...#zap1, затем через пару секунд по ссылке ...#zap2
Скрипт не нужен - выкидываем - только сss
<!DOCTYPE HTML>
<html>
<head>
<style>
a[href*="mysite.net"] div[id]:target > img{
border:red solid 2px;
}
</style>
</head>
<body>
<a href="http://www.mysite.net/zap1.html" onclick="return false">
<div id="zap1"><img src="http://s3.uploads.ru/t/hPYlr.png" width="200" height="200" border="0" alt=""></div></a>
<a href="http://www.mysite.net/zap1.html" onclick="return false">
<div id="zap2"><img src="http://s3.uploads.ru/t/hPYlr.png" width="200" height="200" border="0" alt=""></div></a>
</body>
</html>
<!--Cкрипт для теста - на сайте не нужен! -->
<script type="text/javascript">
setTimeout(" location.hash ='zap1' ",2000);
setTimeout(" location.hash ='zap2' ",4000)
</script>
mysite.net - адрес домена используемых ссылок обрамления |
Deff,
Попробовал с вашим кодом - ничего не изменилось. Выделение не работает. :( |
scpooch,
:) Какой браузер ? Должно работать во всех этих http://s2.uploads.ru/NaOpr.png Код пробуйте прямо в топике (Жмите посмотреть Поправил - вставил картинки |
Deff,
пробовал на свежих Firefox и Opera. |
Цитата:
Firefox => http://s2.uploads.ru/DWLEi.png |
Спросите в Аське - кого-нидь еще(Пусть посмотрят пример
Этот код работает?
alert('Привет')
|
Deff,
Может быть, я накосячил при вставке кода? Если изображения находятся по адресу www.mysite.net/gallery/home.html#zap1 - это влияет на адрес в a[href*="mysite.net"]? Я пример тогда упростил, вдруг из-за этого не работает? Тут оба кода работают. У меня на сайте - нет.. |
scpooch,
Я не вижу по ссылке www.mysite.net/gallery/home.html#zap1 элемента с id=zap1 Поэтому сказать ничего не могу |
И так же не вижу элементов со ссылками mysite.net
|
Deff,
Похоже, надо таки спать ложиться, уже не понимаю что пишу.. Первый линк на закладку был правильный, я ступил сейчас. И коды ваши работают тут. У меня на сайте - не работают.. Так адреса - фиктивные, на реальный сайт я не давал - запрещено. |
Поставьте для теста, не изменяя прямо на сайт как есть
<style>
a[href*="mysite.net"] div[id]:target > img{
border:red solid 2px;
}
</style>
<a href="http://www.mysite.net/zap1.html" onclick="return false">
<div id="zap1"><img src="http://s3.uploads.ru/t/hPYlr.png" width="200" height="200" border="0" alt=""></div></a>
<a href="http://www.mysite.net/zap1.html" onclick="return false">
<div id="zap2"><img src="http://s3.uploads.ru/t/hPYlr.png" width="200" height="200" border="0" alt=""></div></a>
|
Deff,
даже mysite.net на настоящий домен не менять? |
Ничо не меняйте = как есть
После теста выложите пару реальных ссылок - я поправлю сss код |
Deff,
вставил как есть - ваши 2 картинки выделяются, мои - увы, хотя лишь название различается. Без реальных ссылок можно обойтись? Владелец сайта настаивает на конфиденциальности на время работ.. И еще - с картинок теперь нельзя перейти никуда, редирект перестал работать. |
scpooch,
Пишите в личку, у меня подобных ссылок мульён |
Deff,
тут мне подсказали выбрать вариант со спрайтом, а не "много мелких картинок" - для ускоренной загрузки. Перепишу код сначала, потом отпишусь тут. Спасибо за помощь! |
Цитата:
|
Deff,
не меняются, а картинок будет очень много (на тысячи пойдет счет по примеркам). Теперь вот сижу и не врубаюсь, как сделать. Сам спрайт готов, код нужно настрочить теперь.. |
scpooch,
Не делать все в один спрайт, а нарезать спрайты постранично, имя картинки совместить с расширением страницы |
Deff,
я вас не понял. У меня на странице, грубо говоря, квадрат (1000х1000). Он разбит, скажем, на 25 фрагментов (200х200). Изначально я его нарезал на эти 25 кусков в фотошопе и вставил на страницу тем же квадратом. Теперь пытаюсь без нарезки исходника разбить его на эти самые фрагменты (200х200) в CSS. |
scpooch,
я говорил о том, если объем полного спрайта более 700 кБ, её стоит разбить на части, желательно привязанных к страницам использования,? если данное разделение возможно( можно привязать название файла к названию страницы, на которых будет использоваться данный спрайт) ================================================= Для последующей вставки удобнее делать спрайт в одну строку, вытянутой в длину или ширину(конечно, если кол-во картинок не 1000) Квадратом - сложно вычислять смещение а так чисто ставите бекграундом /* Тут спрайт вытянут по вертикали */
div[id*="zap"] {
background-image:url("Ccылка на картинку")
}
#zap1 {
background-position:50% 0;
}
#zap2 {
background-position:50% 100px;
}
#zap2 {
background-position:50% 200px;
}
#zap3 {
background-position:50% 300px;
}
....//И т.д.
Возможно удобнее при много картинках ставить позицию бекграунда не через css, а скриптом... т.е тогда в css остаётся
div[id*="zap1"],div[id*="zap2"],div[id*="zap3"] {
background-image:url("Ccылка на картинку")
}
div[id*="zap4"],div[id*="zap5"],div[id*="zap6"] {
background-image:url("Ccылка на картинку")
}
(Это если спрайты по 30 картинок |
Deff,
спрайт вышел 209 кб, я думаю это нормально. Сейчас протестирую.. Сначала вышла какая-то белиберда - позиции фрагментов перепутались и картинка в паззл превратилась. Подредактировал код и все встало на места (правда, так и не понял, почему косяк такой). Код 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;}
Вот часть кода, отвечающего за вывод фрагмента. <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> Возвращаемся к выделению фрагмента (бордером или чем еще можно) :) |
Чот Аввы - 200x200 , типично - 170х240
Вернусь поздно... так что терпите |
Цитата:
|
scpooch,
Приеду - в час или два ночи по москве Аватарки стандартных размеров 170х240 |
Deff,
там речи про аватарки не идет, идея другая. Буду ждать, пока попробую сам что-нибудь сделать. Удачной поездки! |
Немного покопал код и стала работать версия:
<style>
a25:target {
visibility: hidden;
}
</style>
<a href="http://mysite.net/next/a25.html">
<a25 id="a25"><img src="images/blank.gif" width="200" height="200" border="0" alt=""></a25></a>
Правда, то, что мне надо - border, либо не фурычит, либо криво встает. Полагаю, это из-за того, что: 1) у самого фрагмента border="0", и все фрагменты стыкованы вплотную, образуя единую картинку 2) использован спрайт с 1х1px гифкой в основе Что можно прописать
<style>
a25:target {
??????????????; /* [COLOR="Red"]СЮДА[/COLOR] */
}
</style>
, чтобы выделить фрагмент? При этом, желательно сохранить основу со спрайтом. |
| Часовой пояс GMT +3, время: 00:52. |