Страница 1 из 1
javascript: 'замещение' картинок
Добавлено: 11 мар 2007, 16:23
itwork
помогите написать скрипт действие которого:
при нажатие на "image1.gif" картинка заменялась "image2.gif", а при нажатие на "image2.gif" картинка заменялась "image1.gif", при нажатие на "image1.gif" картинка заменялась "image2.gif" и так далее
Re: javascript: 'замещение' картинок
Добавлено: 11 мар 2007, 17:07
WEB_bobby
Один из вариантов. - Его Можно упростить. - Нет время - сегодня ночью или завтра утром покажу как. Пока конструкцией с if else пользуйся.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>BlendTrans(visibyliti)</title>
<script>
var fr = 0 ;
function myTestTrans1()
{
p1.filters.blendTrans.Apply()
p1.filters.blendTrans.Play()
if (fr == 0)
{fr = 1; p1.src ="fialki1.jpg";}
else
{fr = 0; p1.src ="fialki2.jpg"}
}
</script>
</head>
<body>
<img src ="fialki2.jpg" id ="p1" style = "filter: blendTrans (duration = 3)" onClick ="myTestTrans1()">
</body>
</html>
А и забыл fialki1 - поменяй на image1 и т.п. И jpg свои клади в одном каталоге с програмкой.
!!!!!!!! И перед запуском программки, сначала сохрании ее хотябы один раз; - Это всегда так делают. Просто если код не разу сохранялся в каталог с картинками, то как прога узнает из какого каталога загружать картинки
Re: javascript: 'замещение' картинок
Добавлено: 11 мар 2007, 17:15
WEB_bobby
duration попробуй разный!
десятые тоже можно писать, например duration = 1,5;
Завтра утром дальше растолкую как все это апгредить...
Re: javascript: 'замещение' картинок
Добавлено: 11 мар 2007, 17:56
Duncon
ppc некоторые совершенно читать не умеют
Код: Выделить всё
<script>
var flag = 0;
function do_change(){
x_im = document.getElementById("imgid");
if (flag != 0){
x_im.src = "image2.gif";
flag = 1;
} else {
x_im.src = "image1.gif";
flag = 0;
}
}
<img src="image1.gif" id="imgid" border="0" onClick="do_change()">
</script>
Re: javascript: 'замещение' картинок
Добавлено: 11 мар 2007, 18:04
WEB_bobby
Duncon писал(а):ppc некоторые совершенно читать не умеют
- ЫЫЫ... Ну сказал же что завтра покажу что подправить...
(Кстати if else - лаймерский вариант. А если он например 10 картинок захочет. Это я тоже завтра объясню - как лучше. Сегодня своей работы по горло.
)
Re: javascript: 'замещение' картинок
Добавлено: 11 мар 2007, 20:05
itwork
аха понял Всем Всем Спасибо! :d
Re: javascript: 'замещение' картинок
Добавлено: 11 мар 2007, 20:24
WEB_bobby
itwork писал(а):аха понял Всем Всем Спасибо! :d
- пожалуйста!
Кстати на сегодня еще одно : width(ширина) = height(высота) = нужно указывать ;
Когда браузер знает эти параметры, то быстрее загружает.
<img src = "" width ="" height ="" >
И еще когда задаешь топ и лефт добовляй px(пиксели) - когда нибудь это поможет избежеать конкретных тупняков.
style="position:absolute; top:180px; left:200px;"
duration - понравился? - Жаль только в Мозиле не работает. - Хотя я это уточню.
Заходи на свой топик завтра.
Re: javascript: 'замещение' картинок
Добавлено: 11 мар 2007, 21:00
Duncon
Задание абсолютных позицый - дурной тон от мелкософта, теряешь часть возможностей автоматом..
Кста, я там описался
Код: Выделить всё
if (flag == 0){
x_im.src = "image2.gif";
flag = 1;
} else {
x_im.src = "image1.gif";
flag = 0;
}
Re: javascript: 'замещение' картинок
Добавлено: 12 мар 2007, 10:51
WEB_bobby
Вариант - когда много картинок.Создай 4 файла(у меня это фиалки1,фиалки2...)
А с фильтрами для особо не балуй !
Для всяческих красивостей и анимации написано немало кросс-браузерных библиотек. Например jQuery, prototypes.js + sript.aculo.us, и т.п.
Предыдущий код не срабатывал в fireFox - Изображение не появляется из-за ошибки в JS (у p1 нет свойства filters).Это свойство есть только в IE, т.к. только в нём есть filter. Никакого смысла в других браузерах от него нет.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>for</title>
<script lanaguage ="JavaScript">
var c = 0;
function myTest()
{
++c;
if (c <= 4)
document.getElementById("p1").src ='fialki' + c +'.jpg';
if (c == 4)
c = 0;
}
function lunch()
{
c = 1;
document.getElementById("p1").src ='fialki' + c +'.jpg';
SI = setInterval('myTest()',1500);
}
</script>
</head>
<body onload = lunch();>
<img src ="fialki2.jpg" id ="p1">
</body>
</html>