» »

Динамически кликабельный фон


Динамически кликабельный фон

Всем привет, многие спрашивали скрипт для установки фона чтоб он был кликабельный и не был постоянный, мы не смогли пройти мимо такого и сделали. Скрипт удобно подойдет для рекламы так как многие используют именно его для этого!... Также в скрипте вы можете настроить тайм аут смены ссылки и картинки.

Установка:

1. Установим html код с начальной ссылкой:
Код
<div id="uLink" onclick="location='http://zornet.ru/'"></div>


Заменить ссылку в html на свою

2. ДобавимCSS стиль к нашему html:
Код
#uLink {background:url(http://j-p-g.net/if/2016/05/15/0216796001463347886.jpg);height:100%;width:100%;position:fixed;display:inline-block;top: 0px;background-size:cover !important;left:0px;cursor:pointer;}


Заменить ссылку фона на свой фон для ссылки!.

3. Добавим js смену фона и сылки (Тайм аут смены 15 секунд):
Код
<script>  
  var bgArr = ["1.jpg", "2.jpg", "3.jpg"];  
  var bgLnk = ["1.ru", "2.ru", "3.ru"];  
  var i=0;  
  var interval = self.setInterval("img()", 15000)  
  function img() { if (i>(bgArr.length-1) || i>(bgLnk.length-1)) { i=0  
  $("#uLink").css("background", "url("+bgArr[i]+")");  
  $("#uLink").attr("onclick", "location='"+bgLnk[i]+"'");  
  } else {  
  $("#uLink").css("background", "url("+bgArr[i]+")");  
  $("#uLink").attr("onclick", "location='"+bgLnk[i]+"'");  
  } i++; }  
  </script>


Разберем скрипт:
1. Переменная картинок: var bgArr = ["1.jpg", "2.jpg", "3.jpg"];
2. Переменная сылок: var bgLnk = ["1.ru", "2.ru", "3.ru"];

В них ставим ссылки на картинки и ссылки для этих картинок соответственно!.

Изменить время обновления вы можете сменив число 15000 (15сек) на свое время!...
16.05.2016 Просмотров: 407 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Сопрано
Сопрано 16.05.2016 02:201
0
Интересно, а куда можно поставить этот фон, он же наверно весит не мало.
csretven
csretven 16.05.2016 02:252
0
А что вы хотеле, не зря же говорят, чем красивей фон, тем он тяжелее.
Сафрон
Сафрон 16.05.2016 02:353
0
Здесь как понимаю, все зависит от ссылки, которая идет на фон и она может быть разной.
feliksteg
feliksteg 17.05.2016 09:284
0
Но точно под такие публики не подойдёт, здесь нужно сто то оригинальное.
Kosten
Kosten 17.05.2016 09:565
0
Так вот как раз на паблике и можно лицезреть.)
avatar