Блог

Главная - Вопросы по программированию - Сделать фон интерактивным с помощью jquery

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

#jquery #html #css #background-image

#jquery #HTML #css #фоновое изображение

Вопрос:

Я запускаю на своем сайте рекламу, представляющую собой огромное фоновое изображение (которое будет размещено за содержимым сайта). Сайт является 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-индекс, чтобы предотвратить это? Просто ищу наилучший способ добавить обложку сайта (объявление) с учетом разметки на decibelmagazine.com

Спасибо!

Ответ №1:

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

 <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");   
});

Ответ №2:

Э-э, нет-нет-нет. Добавление 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";
});

Комментарии:

1. Вы также могли бы обернуть «содержимое» в теги clickspot, тогда содержимое также было бы интерактивным.

2. Он не хочет, чтобы контент был интерактивным.

Ответ №3:

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