Скрипт для сайта
20 ответов318 просмотровСейчас просматривают: 1
· 21.12.2008, 17:58
Накинте скрипт что бы при навидении курсора на банер он становился чётким :)
Пример:
- до навидения
- после навидения
P.S Что бы роботал в опере и других браузерах !
Зарание благодарю
0
· 21.12.2008, 18:01
l2-mega: Накинте скрипт что бы при навидении курсора на банер он становился чётким :)
Пример:
P.S Что бы роботал в опере и других браузерах !
Зарание благодарю
тут ненужны никакие скрипты, достаточно только CSS
_http://htmlbook.ru/css/?cat=14
0
· 21.12.2008, 18:08
Underworld: тут ненужны никакие скрипты, достаточно только CSS
_http://htmlbook.ru/css/?cat=14
Ответ по ссылке я так и не увидел из шести поданых вариантов.
Если можно выложи сам код стиля.
0
· 21.12.2008, 18:13
попробуй вот так <a href="ссылка"><img class="smg" src="адрес"></a> это если без ксс в ксс это выглядит примерно так
a:hover .smg {
opacity:1;
}
.smg {
opacity:0.6;
}
Не откажусь от спасибки если ты канешн чет понял))
0
· 21.12.2008, 18:17
C@sper: попробуй вот так <a href="ссылка"><img class="smg" src="адрес"></a> это если без ксс в ксс это выглядит примерно так
a:hover .smg {
opacity:1;
}
.smg {
opacity:0.6;
}
Не откажусь от спасибки если ты канешн чет понял))
Можно просто написать что мне надо всунуть в CSS что бы все банера были с данным ефектом ?)
0
· 21.12.2008, 18:20
l2-mega: Ответ по ссылке я так и не увидел из шести поданых вариантов.
Если можно выложи сам код стиля.
вариант №1
HTML
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'button3.jpg',/*url*/'button7.jpg')">
<img id="img1" alt="Button Text" height="20" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button7.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button3.jpg')" src="button2.jpg" style="border: 0" width="100">
</body>
</html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'button3.jpg',/*url*/'button7.jpg')">
<img id="img1" alt="Button Text" height="20" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button7.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button3.jpg')" src="button2.jpg" style="border: 0" width="100">
</body>
</html>
Вариант №2
_http://htmlbook.ru/content/?id=20 + немного поиграться с CSS
можно еще вот так
HTML
<img id="img1" alt="Button Text" height="20" onmousedown="button7.jpg" onmouseout="button2.jpg" onmouseover="button3.jpg" onmouseup="button3.jpg" src="button2.jpg" style="border: 0" width="100">
Чем этот вариант отличается от 1? тем что в этом варианте не происходит редворительная загрузка картинок и они грузятся только тогда когда на них навели
0
· 21.12.2008, 18:28
Я реально такой тугой или что случилось ?!
PLIZ дайте просто то что пихать в CSS или в main.tpl
У меня двиг DLE 7.2
0
· 21.12.2008, 18:36
l2-mega: Я реально такой тугой или что случилось ?!
PLIZ дайте просто то что пихать в CSS или в main.tpl
У меня двиг DLE 7.2
Тогда используй вот это (самое простое)
HTML
<img id="img1" alt="Button Text" height="20" onmousedown="button7.jpg" onmouseout="button2.jpg" onmouseover="button3.jpg" onmouseup="button3.jpg" src="button2.jpg" style="border: 0" width="100">
пояснения небольшие:
onmousedown при нажатии кнопки мыши выводится картинка
onmouseout обычное состояние (до наведения)
onmouseover при наведении мыши
onmouseup при отжатии кнопки мыши
src обычное состояние (до наведения)
0
· 21.12.2008, 18:40
Underworld: Тогда используй вот это (самое простое)HTML<img id="img1" alt="Button Text" height="20" onmousedown="button7.jpg" onmouseout="button2.jpg" onmouseover="button3.jpg" onmouseup="button3.jpg" src="button2.jpg" style="border: 0" width="100">
пояснения небольшие:
onmousedown при нажатии кнопки мыши выводится картинка
onmouseout обычное состояние (до наведения)
onmouseover при наведении мыши
onmouseup при отжатии кнопки мыши
src обычное состояние (до наведения)
Тоисть мне в CSS в конец надо вставить:
Код
<img id="img1" alt="Button Text" height="20" onmouseover="button3.jpg" style="border: 0" width="100">
И у меня все банера будут так роботать как я просил изначально ?
0
· 21.12.2008, 18:40
эо в мэйн пихай))
0
· 21.12.2008, 18:49
Код
<a href="http://l2top.ru/?voteme=4273" target="_blank"><img src="http://l2top.ru/vb/4273.pgif" width="88" height="31" border="0" alt="L2top.ru: Рейтинг-каталог серверов Lineage2"></a>
Вот мой изначальный код! Заменяю я src на onmouseover и толку 0 !
0
· 21.12.2008, 18:56
l2-mega:Код<a href="http://l2top.ru/?voteme=4273" target="_blank"><img src="http://l2top.ru/vb/4273.pgif" width="88" height="31" border="0" alt="L2top.ru: Рейтинг-каталог серверов Lineage2"></a>
Вот мой изначальный код! Заменяю я src на onmouseover и толку 0 !
у тебя должно быть 2 разных картинки
0
· 21.12.2008, 19:46
IceWorld: Магу кинуть скрипт в ксс но не знаю там он для юкоза ну можно попробывать...
Лудше бы дал стиль (Скрипт) вместо поста =)
0
· 21.12.2008, 20:05
Делается этот эффект, на самом деле, очень просто.
Достаточно всунуть в основной css такое содержание:
Код
/* ----////// Эффект прозрачности /////------- */
#banners a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}
#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
#banners a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}
#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
Сохряете css. Затем код тех баннеров, которые хотите сделать немного затемненными (прозрачными), помещаете в следующий контейнер:
Код
<div id="banners">тут код вашей кнопки</div>
И вуаля, эффект отлично работает. Настроить можете как хотите :)
p.s. Если помог, жмите "спасибо"! Ведь вы не жадные, да?)
— Random Post Generator
0
· 21.12.2008, 20:11
как сделано там
CSS
Код
#l2top A IMG {opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=50);}
#l2top A:hover IMG {opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);}
#l2top A:hover IMG {opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);}
на странице
HTML
<div style="position:absolute; width: 88px; height: 31px; z-index: 5; top:212px; right:77px;" id='l2top'>
<a href="http://l2top.ru/?voteme=5111" target="_blank"><img src="http://l2top.ru/catalog/top.php?id=5111" width="88" height="31" border="0"></a>
</div>
<a href="http://l2top.ru/?voteme=5111" target="_blank"><img src="http://l2top.ru/catalog/top.php?id=5111" width="88" height="31" border="0"></a>
</div>
0
· 21.12.2008, 20:16
Underworld
Собсна я тоже самое и написал ;)
— Random Post Generator
0
· 21.12.2008, 20:18
DarkGod: Underworld
Собсна я тоже самое и написал ;)
повторение мать учение;)
0
· 21.12.2008, 22:15
Было бы неплохо модерам переименовать тему в "Скрипт прозрачности баннеров/кнопок" и закрепить вверху. Думаю, полезная многим тема.
— Random Post Generator
0
Тема закрыта для ответов