Сделайте фон кликабельным с помощью jquery - PullRequest
Новая
       2

Сделайте фон кликабельным с помощью jquery

2 голосов
/ 25 апреля 2011

Я запускаю на своем сайте объявление с огромным фоновым изображением (которое должно быть размещено за контентом сайта). Сайт является decibelmagazine.com. В настоящее время на сайте очень большое фоновое изображение, которое будет заменено рекламой. Мне нужно, чтобы объявление было кликабельным (слева и справа от контента сайта). Объявление будет размещено как фоновое изображение (не встроенное).

Тем не менее, мне нужно, чтобы это фоновое изображение было активным (с назначенным URL). Я думал структурировать это так:

HTML 

<body url="http://google.com">

CSS 

body{color:#222; background:#959595 url(images/mainbg.jpg) repeat-y center top; width:100%; display:table; width:970px; margin:0 auto;}

Jquery 

$("body").click(
    function()
    {
        window.location = $(this).attr("url");
        return false;
    });

Будет ли этот метод работать? Я не хочу, чтобы содержание сайта было кликабельным (даже если оно внутри тела). Должен ли я использовать z-index для предотвращения этого? Просто ищу лучший способ добавить скин сайта (объявление) с учетом разметки на decibelmagazine.com

Спасибо!

Ответы [ 3 ]

4 голосов
/ 25 апреля 2011

Таким образом, вы можете сделать это: 

<body>
    <img class="ad" src="images/mainbg.jpg" alt="" rel="http://google.com" />
    <div class="contents">
     Contents here
    </div>
</body>

CSS: 

img{position:absolute;display:block;top:0;left:0;z-index:1;}
div.contents{position:relative;z-index:1000;}

Javascript: 

$("img.ad").click(function(e){
     window.location = $(this).attr("rel");   
});
0 голосов
/ 25 апреля 2011

Я думаю, что лучшим способом было бы поместить контейнер позади контента (с position: и z-index:) и сделать , что div, интерактивным.Проблема, с которой вы столкнетесь, заключается в том, что если вы сделаете $(body).click(), вы будете получать каждый щелчок, чтобы всплыть до тела (если вы не заставите все использовать .stopPropagation(), что будетболь).

0 голосов
/ 25 апреля 2011

Э, нет, нет, нет.Добавление href к вашему телу - плохая идея.Не могли бы вы сделать что-то подобное?

CSS: 

.clickspot { width: 20%; }
#content { width: 80%; }

HTML: 

<body>
    <div class="clickspot"></div>
    <div id="content"></div>
    <div class="clickspot"></div>
</body>

JS: 

$(".clickspot").click(function(){
    window.location = "http://link.to/my/advertiser";
});

Или:

CSS 

#clickable { position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; z-index: -1;  }
#content { position: relative; z-index: 1; }

JS 

$("#clickable").click(function(){
    window.location = "http://link.to/my/advertiser";
});
...