onclick="eff(this)"
....
function eff(e){
......
time(e)
......
Плавное появление изображения при наведении указателя мышки.
Вот, по сути дела, первые мои нормальные функции. Два варианта. Может кому пригодятся.
1 Вариант.
[HTML]<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='img/1.jpg'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=10 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function eff(i,e){
if (timer[i.id]){clearInterval(timer[i.id])}
if (e.type!='mouseover'){z[i.id]=y;var t=dn}
else{z[i.id]=x;var t=up}
timer[i.id]=setInterval(function(){return time(i)},t)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i2 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i3 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i4 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
</body>
</html>[/HTML]
2 Вариант.
[HTML]<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='img/1.jpg'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=5 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function on(i){
if (timer[i.id]){clearInterval(timer[i.id])}
z[i.id]=x
timer[i.id]=setInterval(function(){return time(i)},up)}
function off(i){
clearInterval(timer[i.id])
z[i.id]=y
timer[i.id]=setInterval(function(){return time(i)},dn)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i2 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i3 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i4 onMouseOver=on(this) onMouseOut=off(this)>
</body>
</html>[/HTML]
А может, кто чего предложит для улучшения. Быстренько улучшим.:)
1 Вариант.
[HTML]<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='img/1.jpg'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=10 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function eff(i,e){
if (timer[i.id]){clearInterval(timer[i.id])}
if (e.type!='mouseover'){z[i.id]=y;var t=dn}
else{z[i.id]=x;var t=up}
timer[i.id]=setInterval(function(){return time(i)},t)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i2 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i3 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i4 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
</body>
</html>[/HTML]
2 Вариант.
[HTML]<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='img/1.jpg'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=5 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function on(i){
if (timer[i.id]){clearInterval(timer[i.id])}
z[i.id]=x
timer[i.id]=setInterval(function(){return time(i)},up)}
function off(i){
clearInterval(timer[i.id])
z[i.id]=y
timer[i.id]=setInterval(function(){return time(i)},dn)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i2 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i3 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i4 onMouseOver=on(this) onMouseOut=off(this)>
</body>
</html>[/HTML]
А может, кто чего предложит для улучшения. Быстренько улучшим.:)
Поспешил.
Mozilla ругается, пришлось записать так:
[HTML]timer=setInterval(function (i){return function(){ time(i)}}(this),t)}[/HTML]
Снова всё исправил.:)
Mozilla ругается, пришлось записать так:
[HTML]timer=setInterval(function (i){return function(){ time(i)}}(this),t)}[/HTML]
Снова всё исправил.:)
Цитата: AKS.
Вот эта строчка будет работать?
Конечно будет. В параметр функции eff будет передан вызывающий объект. Стандартная процедура когда не нужно или не хочется вещать id на элемент.
Цитата: alekciy
Конечно будет.
Ну так напишите маленький примерчик (что-нибудь вроде document.onclick -> какой-нибудь alert)...
Цитата: AKS.
Ну так напишите маленький примерчик (что-нибудь вроде document.onclick -> какой-нибудь alert)...
А смысл?
Смысл в том, что Вы должны убедиться в несостоятельности ваших утверждений.
Цитата: AKS.
Смысл в том, что Вы должны убедиться в несостоятельности ваших утверждений.
Возможно ты не правильно понял мою мысль или неверно проследил диалог. Либо же в контексте диалого неверно трактовал мою мысль.
Напомню:
Цитата: alekciy
Код:
Цитата: AKS.
Вот эта строчка будет работать?
Цитата: alekciy
Конечно будет.
И попрежнему я буду утверждать, что такая контрукция работать будет.
Полный код (во избежании верности трактовки):
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function foo(elm)
{
alert('Вы передали в функцию элемент '+elm+'. Его id= '+elm.getAttribute('id'));
}
</script>
<div onclick="foo(this)" id="div1">Это первый див в системе. Нажмите его для передачи в функцию этого элемента.</div>
<div onclick="foo(this)" id="div2">Это второй див в системе. Нажмите его для передачи в функцию этого элемента.</div>
<input onclick="foo(this)" id="2" type="button" value="push me!">Это инпут в системе. Нажмите его для передачи в функцию этого элемента.
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function foo(elm)
{
alert('Вы передали в функцию элемент '+elm+'. Его id= '+elm.getAttribute('id'));
}
</script>
<div onclick="foo(this)" id="div1">Это первый див в системе. Нажмите его для передачи в функцию этого элемента.</div>
<div onclick="foo(this)" id="div2">Это второй див в системе. Нажмите его для передачи в функцию этого элемента.</div>
<input onclick="foo(this)" id="2" type="button" value="push me!">Это инпут в системе. Нажмите его для передачи в функцию этого элемента.
</body>
</html>
И как, работает?
Цитата:
Это инпут в системе. Нажмите его для передачи в функцию этого элемента.
:)
Работает, я свидетель...
а что случилось?:)
Цитата: alekciy
Возможно ты не правильно понял мою мысль или неверно проследил диалог. Либо же в контексте диалого неверно трактовал мою мысль.
Напомню:
<div onclick="foo(this)" id="div1">
И как, работает?
Напомню:
<div onclick="foo(this)" id="div1">
И как, работает?
А причем тут вообще intrinsic events?
И не о том Вы решили "напомнить". Давайте-ка я Вам напомню:
Цитата: AKS.
document.body.onclick = function () {
var caller = this; // Create a pointer to the <body>
window.setTimeout(function () { return test(caller); }, 1000);
};
Глядя на это Вы сделали замечание:
Цитата: alekciy
И вообще лучше сразу в функцию передать объект через this, ибо зачем плодить лишние переменные если они потом все равно не используются.
Цитируя вот этот код:
Вы сделали вывод:
???
Код:
var caller = this;
timer = setInterval(function () { return time(caller); }, t);
timer = setInterval(function () { return time(caller); }, t);
Вы сделали вывод:
Цитата: alekciy
Я имел ввиду в том духе, что сразу делать time(this)...
Поэтому в данном случае объект так и нужно дальше передавать по цепочке:
Поэтому в данном случае объект так и нужно дальше передавать по цепочке:
Код:
onclick="eff(this)"
....
function eff(e){
......
time(e)
......
....
function eff(e){
......
time(e)
......
Каким образом в функции, передаваемой первым аргументом в метод setInterval Вы собирались воспользоваться ключевым словом this?
И почему это все превратилось в совершенно неотносящееся к теме:
Код:
<div onclick="foo(this)" id="div1">
???
Цитата: AKS.
Глядя на это Вы сделали замечание:
А откуда ты можешь знать, куда я глядел и что думал? ;)
Не туда я гляден. Да ты и сам это понял чуть позже, поэтому и появился следующий уточняющий топик. Вот в нем причинно-следственные связи выявлены уже более точно.
Да, я в тот момент глянул именно туда и ни куда более. Т.е. эти две строки я не рассматривал в контексте предыдущего кода. Собственно посему и родилось подобное замечание.
В контексте же всего предыдущего обсуждения конечно это совершенно не правильно и предложеный тобою вариант безусловно верен. В данном случае ты больше проникся в задачу, чем я.
Насчет строчки которая будет или не будет работать. Если рассматривать её как есть, то она безусловно работать будет и в каком случае я уже написал. Она даже будет работать в контексте данной задачи, но код придется модифицировать с разнесением обработчиков событий в разные функции.
Думаю на этом недопонимания будут исчерпаны.
Вы мне лучше скажите, что сделать в Opera, чтобы прозрачность нормально работала с картинкаси с прозрачностью (.gif например)
Прозрачность становистся черной - херня, которой страдает только опера
Прозрачность становистся черной - херня, которой страдает только опера
alex243, о какой прозрачности Вы говорите? У GIF-а может быть только два варианта прозрачности: 0% и 100%. используйте jpg...
Ghirik, я говорю о полупрозрачных картинках, когда один из цветов или т.п. делается как прозрачный.
Опера не переваривает таких картинок, когда накладывает свою прозрачность.
Но после ночного штурма, я нашел решение самостоятельно.
Опера не понимает gif прозрачности, но корректно работает с прозрачностью в png.
Описываем стили для opera, safari
<link rel="stylesheet" href="xxx_opera.css" type="opera/css" />
а в файле xxx_opera.css меняем картинки
(У меня каритнки для фона (темы оформления) были, поэтому все меняется через css).
а jpg, не удовлетворяют моим потребностям, т.к. воовсе неспособны делать у себя какой-либо цвет прозрачным.
Опера не переваривает таких картинок, когда накладывает свою прозрачность.
Но после ночного штурма, я нашел решение самостоятельно.
Опера не понимает gif прозрачности, но корректно работает с прозрачностью в png.
Описываем стили для opera, safari
<link rel="stylesheet" href="xxx_opera.css" type="opera/css" />
а в файле xxx_opera.css меняем картинки
(У меня каритнки для фона (темы оформления) были, поэтому все меняется через css).
а jpg, не удовлетворяют моим потребностям, т.к. воовсе неспособны делать у себя какой-либо цвет прозрачным.