Как создать простые баннеры и разместить их на сайте? (Продолжение)

<<< На предыдущую На двух страницах. Страница 2.

Баннер с эффектом подвижности картинки при наведении курсора мыши


<html>
<head>
<title>Эффект подвижности картинки при наведении курсора</title>
<style type="text/css">
.mobility 
{
position: relative
}
</style>
<script type="text/javascript" language="JavaScript1.2">
<!--//
var rector=3 //амплитуда колебания
var stopit=0 
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector}
else{
shake.style.left=parseInt(shake.style.left)-rector}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
//-->
</script>
</head>
<body>
<p>
<a href="https://www.your_resource.ru">
<img class="mobility" onmouseover="init(this);rattleimage()" 
onmouseout="stoprattle(this)"src="images/mobility_of_picture.jpg" width="300" height="138" alt="баннер" border="0"></a>
</p>
</body>
</html>

Пропишем стиль классу, назовём его, например, mobility. (Стили писать в head).

Подключим скрипт (можно располагать, как в head, так и в body). В строке кода скрипта var rector=3 //амплитуда колебания выставляем значение амплитуды колебаний.

https://www.your_resource.ru - укажем адрес в Сети, куда должен попасть посетитель, сделавший щелчок мышью на нашем баннере.

Путь к файлу рисунка. Может быть полный, с указанием
https://www.site.ru/...., либо неполным, как в нашем случае.

Баннер с эффектом произвольной смены картинок

Попробуем реализовать этот элемент с помощью следующего HTML-кода:


код в раздел head:


<script type="text/javascript" language="JavaScript">
i=0;
img_a=new Array()
img_h=new Array()
img_a[0]=new Image()
img_a[1]=new Image()
img_a[2]=new Image()
img_a[0].src="images/1PAN2016E.gif"
img_a[1].src="images/2PAN2016E.gif"
img_a[2].src="images/3PAN2016E.gif"
function img_b()
{
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
i++
if(i>2) i=0;
setTimeout("img_b()", 1000)
}
</script>
 
 

 
 
код в раздел body:

 
<body onLoad="img_b()">
<br><br>
<strong>Баннер со сменой картинок</strong>
<br><br>
<a href="https://leonidmuzyka.ru" target="_blank">
<img src="images/1PAN2016E.gif" alt=""></a>

Далее осталось только подобрать изображения для баннеров, разместить их в папке images вашего сайта и проставить названия в нужных местах (в коде скрипта и в коде баннера в разделе body).

Пока всё. До следующей встречи! Всего Вам доброго и успехов в освоении процесса создания баннеров! L.M.

<<< На предыдущую На двух страницах. Конец страницы 2.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки