| Предыдущая тема :: Следующая тема |
| Автор |
Сообщение |
Alex_dr
Зарегистрирован: 18.05.2007
Сообщения: 2
|
 Добавлено: Пт Май 18 2007 08:23 Заголовок сообщения: Ворос по Java Script |
 |
|
Нужно было сделать так, чтобы при наведении указателя мыши на изоброжение менялась ее прозрачность.
Нашел подходящий скрипт.
| Код: |
<script language=JavaScript>
var m = new Array(0,100);
var t = new Array();
function next() {
m[0]+=5;
document.getElementById("a1").style.opacity = m[1]/100;
document.getElementById("a1").style.filter="alpha(opacity="+m[0]+")";
t[0] = setTimeout("next()",5);
if (m[0]>98) clearTimeout(t[0]);
}
</script>
|
В теле документа след параметры.
| Код: | | <a href="test.html"><img id="a1" onmouseover="next()" onmouseout="" style='filter:alpha(opacity=50); opacity: 0.5' alt="" title="" width="168" height="91" src="images/top_images/top_2.jpg"></a> |
Какую еще функцию нужно прописать...для того чтобы уменьшить прозрачность обратно до значения "50", что нужно внести в onmouseout=""
Сам разобраться не могу....[/b] |
|
| Вернуться к началу |
|
 |
Mytilus Galloprovincialis
Зарегистрирован: 30.08.2005
Сообщения: 358
Откуда: откуда все люди родятся
|
| Добавлено: Пт Май 18 2007 08:35 Заголовок сообщения: |
|
|
| Замени строку m[0]+=5; на m[0]-=5;, а if (m[0]>98 ) clearTimeout(t[0]); на if (m[0]<2) clearTimeout(t[0]);. |
|
| Вернуться к началу |
|
|
Alex_dr
Зарегистрирован: 18.05.2007
Сообщения: 2
|
| Добавлено: Пт Май 18 2007 08:48 Заголовок сообщения: |
|
|
Спасибо.
Я совсем не разбираюсь в Java Script, но сделал след.
| Код: |
<script language=JavaScript>
var m = new Array(0,100);
var t = new Array();
function next() {
m[0]+=5;
document.getElementById("a1").style.opacity = m[1]/100;
document.getElementById("a1").style.filter="alpha(opacity="+m[0]+")";
t[0] = setTimeout("next()",5);
if (m[0]>98) clearTimeout(t[0]);
}
function next2() {
m[0]-=5;
document.getElementById("a1").style.opacity = m[1]/100;
document.getElementById("a1").style.filter="alpha(opacity="+m[0]+")";
t[0] = setTimeout("next2()",5);
if (m[0]<2) clearTimeout(t[0]);
}
</script>
|
| Код: |
<img id="a1" onmouseover="next()" onmouseout="next2()" style='filter:alpha(opacity=50); opacity: 0.5' alt="" title="" width="168" height="91" src="images/top_images/top_2.jpg"> |
И теперь если убрать указатель мыши, картинка исчезает совсем.
Но мне нужно, чтобы оставалась "50" прозрачности |
|
| Вернуться к началу |
|
|
Mytilus Galloprovincialis
Зарегистрирован: 30.08.2005
Сообщения: 358
Откуда: откуда все люди родятся
|
| Добавлено: Вс Май 27 2007 03:40 Заголовок сообщения: |
|
|
| ОК. Тогда пиши if (m[0]<51) clearTimeout(t[0]);. |
|
| Вернуться к началу |
|
|
Mytilus Galloprovincialis
Зарегистрирован: 30.08.2005
Сообщения: 358
Откуда: откуда все люди родятся
|
| Добавлено: Вс Май 27 2007 05:16 Заголовок сообщения: |
|
|
Вообще, для чистоты кода надо все переиначить. Во-первых, лучше использовать функцию setInterval() вместо setTimeout(). setTimeout() вызывает указанный в параметре код один раз, тогда как setInterval() выполняет такой код постоянно через указанный промежуток времени вплоть до вызова clearInterval(). Во-вторых, функции, которые ты назвал Next и Next2, схожи. Лучше их объединить в одну. Ну и наконец, выбросить к черту весь лишний код.
В результате мы получим следующее. Рисуем картинку:
| Код: |
<img id=image1 onmouseout=mouseOut() onmouseover=mouseOver() src="..." style=filter:alpha(opacity=50);height:91;width:168>
|
От фрагмента "opacity: 0.5" нам ни тепло, ни холодно. Поэтому писать его не к чему.
Далее рисуем сценарий. Начнем с функции, изменяющей прозрачность изображения (через аргумент limit будем передавать желаемую окончательную прозрачность: 100 - непрозрачно, 50 - полупрозрачно):
| Код: |
var varOpacity = 50, varTimer;
// Глобальная переменная varOpacity хранит значение текущей прозрачности.
// varTimer будем использовать как дескриптор setInterval (не бери в голову :о)).
function setOpacity(limit) {
// Изменяем значение varOpacity на новое
// (+5, если прозрачность уменьшаем, -5, если наоборот).
varOpacity += varOpacity < limit ? 5 : -5;
// Изменяем значение стиля картинки.
// image1 - свойство id тега img.
image1.style.filter = "alpha(opacity=" + varOpacity + ")";
// Если мы достигли значения limit, прерываем цикл.
if (varOpacity == limit) clearInterval(varTimer);}
|
Теперь осталось реализовать методы:
| Код: |
function mouseOut() {
clearInterval(varTimer);
varTimer = setInterval("setOpacity(50)", 5);}
function mouseOver() {
clearInterval(varTimer);
varTimer = setInterval("setOpacity(100)", 5);}
|
В методах мы сначала прерываем цикл (на случай, если он уже был запущен), а следом - запускаем новый, указывая значение аргумента limit и паузу между витками цикла в 5 мс.
Удачи!  |
|
| Вернуться к началу |
|
|
|
FAQ 
Поиск 
Пользователи 
Группы
Регистрация
Профиль 
Войти и проверить личные сообщения 
Вход 
