Next Generation CMS :: Форум поддержки

Заинтересовала наша система? Тогда этот форум для Вас!

Вы не зашли.

#1 2011-08-25 00:47:49

legenda
Участник
Откуда ua
Зарегистрирован: 2009-12-22
Сообщений: 2,160
Рейтинг :   39 

Как сделать клик на беграунде

Допустим у меня беграунд сайта (брендирование) кокой-то рисунок, на нем нарисован логотип спонсора, как сделать так чтоб на этот логотип можно б было кликнуть и можно б было перейти на сайт спонсора?

Не в сети

#2 2011-08-25 03:38:39

Trashcka
Участник
Откуда КиевГрад
Зарегистрирован: 2008-12-04
Сообщений: 1,487
Рейтинг :   73 

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)

Не в сети

#3 2011-08-25 14:25:40

legenda
Участник
Откуда ua
Зарегистрирован: 2009-12-22
Сообщений: 2,160
Рейтинг :   39 

Re: Как сделать клик на беграунде

Trashcka, спасибо, хотел уточнить, твой вариант это 1 картинка (весь бегруанд с нарисованым там логотипом) или 2 картинки (1 - беграунд, 2 - логотип)?

Не в сети

#4 2011-08-25 14:48:24

Trashcka
Участник
Откуда КиевГрад
Зарегистрирован: 2008-12-04
Сообщений: 1,487
Рейтинг :   73 

Re: Как сделать клик на беграунде

legenda, это типа одна картинка, а надо две?, если да, то детальнее распиши, что именно надо.

Не в сети

#5 2011-08-25 15:34:45

legenda
Участник
Откуда ua
Зарегистрирован: 2009-12-22
Сообщений: 2,160
Рейтинг :   39 

Re: Как сделать клик на беграунде

надо одну, буду пробовать...

Не в сети

#6 2011-08-29 03:15:55

legenda
Участник
Откуда ua
Зарегистрирован: 2009-12-22
Сообщений: 2,160
Рейтинг :   39 

Re: Как сделать клик на беграунде

Trashcka, впринципе все работает, спасибо, есть еще один вопросик.

Так как счас клик распостраняется на весть беграунд за сайтом, а если надо в каком-то определенном месте, например у мня нарисован в левом углу части беграунда логотип размером 100-150 и вот по нему кликать надо, а все остальное пространство ненадо.

Не в сети

#7 2011-08-29 12:09:34

Trashcka
Участник
Откуда КиевГрад
Зарегистрирован: 2008-12-04
Сообщений: 1,487
Рейтинг :   73 

Re: Как сделать клик на беграунде

legenda, в левом углу это именно в углу?, или в левом углу в пределах рабочей части сайта? Лучше скрин сайта покажи.

Не в сети

#8 2011-08-29 15:51:14

legenda
Участник
Откуда ua
Зарегистрирован: 2009-12-22
Сообщений: 2,160
Рейтинг :   39 

Re: Как сделать клик на беграунде

скина еще нет.., вот например тут можно посмотреть http://www.newsmarket.com.ua/category/health/ в углу есть красных крест (логотип) вот например на него надо кликать.

Не в сети

#9 2011-08-29 19:27:44

Trashcka
Участник
Откуда КиевГрад
Зарегистрирован: 2008-12-04
Сообщений: 1,487
Рейтинг :   73 

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

legenda
Участник
Откуда ua
Зарегистрирован: 2009-12-22
Сообщений: 2,160
Рейтинг :   39 

Re: Как сделать клик на беграунде

Trashcka, немного не так поняла, картинка то должна бить большая, как в указаном више примере, но кликать не по всей картинке а только по определенной ее части, например там где логотип

Не в сети

#11 2011-08-29 23:53:51

Trashcka
Участник
Откуда КиевГрад
Зарегистрирован: 2008-12-04
Сообщений: 1,487
Рейтинг :   73 

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)

Не в сети

#12 2011-08-30 02:46:55

legenda
Участник
Откуда ua
Зарегистрирован: 2009-12-22
Сообщений: 2,160
Рейтинг :   39 

Re: Как сделать клик на беграунде

Trashcka, спасибо, будем пробовать чтото зашаманить)

Не в сети

Подвал раздела

Работает на FluxBB