Next Generation CMS :: Форум поддержки
Вы не зашли.
- Темы: Активные | Без ответов
Объявление
Страницы 1
#1 2011-08-25 00:47:49
Как сделать клик на беграунде
Допустим у меня беграунд сайта (брендирование) кокой-то рисунок, на нем нарисован логотип спонсора, как сделать так чтоб на этот логотип можно б было кликнуть и можно б было перейти на сайт спонсора?
Не в сети
#2 2011-08-25 03:38:39
Re: Как сделать клик на беграунде
Типа так, не уверена что будет работать )) т.к. никогда не было необходимости в подобном, на глаз, что говорится пишу ))):
HTML
<body>
<a href="http://google.com/" target="_blank" id="bgimglink"> </a>
<div id="container">
ТУТА КОД КОД и КОД ))
</div>
</body>
CSS
#bgimglink { width: 100%; height: XXXpx; background: url(images/bg.png) top center no-repeat; position: absolute; left: 0; top: 0; }
#container { width: XXXpx; margin: XXXpx auto 0; position: relative; }
Забыла )) там где XXX, это соответственно: 1 - высота картинки, 2 - ширина рабочей части сайта, она естественно должна быть меньше ширины картинки, 3 - высота отступа от верха рабочей части сайта, если есть необходимость, чтобы картинка спонсора тыцкалась и сверху, если нет, то вместо - margin: XXXpx auto 0;, вставить - margin: 0 auto;.
Изменено Trashcka (2011-08-25 03:46:07)
Не в сети
#6 2011-08-29 03:15:55
Re: Как сделать клик на беграунде
Trashcka, впринципе все работает, спасибо, есть еще один вопросик.
Так как счас клик распостраняется на весть беграунд за сайтом, а если надо в каком-то определенном месте, например у мня нарисован в левом углу части беграунда логотип размером 100-150 и вот по нему кликать надо, а все остальное пространство ненадо.
Не в сети
#9 2011-08-29 19:27:44
Re: Как сделать клик на беграунде
Ну там тоже сделано как примерно у меня, с одной разницей, что позиционирование у картинки фиксированное.
Если же надо именно маленькую картинку сделать и тыцкаться только по ней должно, то примерно так:
HTML
как и выше
CSS
#bgimglink { width: XXXpx; height: XXXpx; background: url(../images/img.jpg) top center no-repeat; position: relative; top: 0; left: -XXXpx; display: inline-block; }
#container { width: XXXpx; margin: -XXXpx auto 0; }
XXX
1 - ширина картинки
2 - высота картинки
3 - (в примере идет позиционирование картинки слева) значение указать равное - половине ширины ширины #container + отступ от сaмого #container + ширина картинки
4 - ширина рабочей части сайта
5 - отступ равен высоте картинки
Только, что проверила на левом шаблоне videopassion все работает как надо, можно сделать это еще и другими способами, но и этот вариант работает гуд ))
Изменено Trashcka (2011-08-29 23:22:58)
Не в сети
#10 2011-08-29 23:42:47
Re: Как сделать клик на беграунде
Trashcka, немного не так поняла, картинка то должна бить большая, как в указаном више примере, но кликать не по всей картинке а только по определенной ее части, например там где логотип
Не в сети
#11 2011-08-29 23:53:51
Re: Как сделать клик на беграунде
Image map надо использовать тогда, ща лень думать как это сделать из бэкграунда. Вообще не люблю эти карты изображения, как по мне, лучше 2 картинки втулить, одна - фоном, а вторая линк, т.е. так:
HTML
<body>
<a href="http://google.com/" target="_blank" id="bgimglink"> </a>
<div id="container">
ТУТА КОД КОД и КОД ))
</div>
</body>
CSS
body { background: url(images/bg-body.png) top center no-repeat; }
#bgimglink { width: XXXpx; height: XXXpx; background: url(../images/img.jpg) top center no-repeat; position: relative; top: 0; left: -XXXpx; display: inline-block; } - тут можно заюзать даже не полную картинку линк, а просто прозрачную картинку, если в боди будет стоять полная картинка
#container { width: XXXpx; margin: -XXXpx auto 0; }
XXX
1 - ширина картинки
2 - высота картинки
3 - (в примере идет позиционирование картинки слева) значение указать равное - половине ширины ширины #container + отступ от сaмого #container + ширина картинки
4 - ширина рабочей части сайта
5 - отступ равен высоте картинки
Изменено Trashcka (2011-08-30 00:04:29)
Не в сети
Страницы 1