Jump to content
Sign in to follow this  
Alx909

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

Recommended Posts

Добрый день уважаемые форумчане, возник вопрос как сделать бекграунд кликабельным?  Я так понимаю что нужно обернуть ссылку в div, но вот куда вставлять не знаю,

Version 2.1.0.1 (rs.2)

Шаблон: ShopStore

Сайт с примером https://www.timecode.ru   Сайт на который пытаюсь сделать кликабельный бекграунд http://on-timewatch.ru

 

Share this post


Link to post
Share on other sites

onclick="document.location = 'ссылка';"

Share this post


Link to post
Share on other sites

Тут нужно добавить отдельные блоки div (слева и справа от основного контента) и при клике через js менять url. Как это сделано на сайте https://www.timecode.ru/

<div id="clickable_bg_left" onclick="document.location = 'https://www.timecode.ru/timex';" style="width: 82px; height: 4771px;"></div>
<div id="clickable_bg_right" onclick="document.location = 'https://www.timecode.ru/timex';" style="width: 82px; height: 4771px;"></div>

Посмотрите через инструменты разработчика Chrome. Да, еще один момент. Для того чтобы эти блоки боковые подстраивались под ширину экрана нужно добавить:

Скрытый текст
<script>
    function SetBGsize(){
        var container_width  = parseInt($('body').width());
        var container_height = parseInt($('body').height());

        if(container_width>=1100) {
            $('#clickable_bg_left').css('width',(container_width-1100)/2+'px');
            $('#clickable_bg_right').css('width',(container_width-1100)/2+'px');
        }else{
            $('#clickable_bg_left').css('width','0px');
            $('#clickable_bg_right').css('width','0px');
        }

        $('#clickable_bg_left').css('height',container_height+'px');
        $('#clickable_bg_right').css('height',container_height+'px');
    }

    $(window).resize(function () {
        SetBGsize();
    });

    $(document).ready(function() {
        SetBGsize();
    });
</script>

 

 

Код взят из сайта-примера. Возможно, его нужно подогнать под себя. Но логика такая.

 

Еще, конечно, зависит от того какой именно фон вы хотите сделать кликабельным. Если только левую и правую часть как на сайте-примере то решение выше я описал.

Если полностью сделать кликабельным фон (т.е. любой видимый пиксель фона body) - решение тут нужно другое.

Share this post


Link to post
Share on other sites

Сложность в том куда ставить эти коды? Именно для данного шаблона. Понимаю что уже это тянет на платную доработку, но все же не ужели никто не делал у себя в магазине такое? Уважаемый dexteron, помогите разобраться в этом вопросе, готов обсудить ваше предложение пусть даже на платной основе.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.