da027bb7

Изменение картинки


В данном примере для этого используется свойство images[ ] объекта Document.

<html>

<head>

</head>

<script language="JavaScript">

<!-- анализируется версия броузера:--> browserName=navigator.appName; browserVer=parseInt(navigator.appVersion); if (browserName=="Netscape" && browserVer >= 3) version="n3"; else version="n2";

if (version=="n3") { graph1green=new Image(20,20); graph1green.src="lgcit.gif"; graph1red=new Image(20,20); graph1red.src="logo.gif"; } function graphON(graphName) { if (version=="n3") { green_red=eval(graphName + "green.src"); document.images[graphName].src=green_red; } } function graphOFF(graphName) { if (version=="n3") { red_green=eval(graphName + "red.src"); document.images[graphName].src=red_green; } } </script>

<body bgcolor=ffffff>

<a href="http://www.cit-forum.com" onMouseOver="graphON('graph1')" onMouseOut="graphOFF('graph1')"><img src="logo.gif" name="graph1" border=0></a>

</body>

</html>

В предыдущем примере изменение происходило при попадании курсора мыши в область картинки и при выходе курсора из нее. В данном примере это организовано в цикле для двух картинок с использованием метода setTimeout.
Работает только в Netscape Navigator 3.0 и выше!

<html>

<head>

<title>Баннер</title>

</head>

<script language="JavaScript">



i=0; img_a=new Array() img_a[0]=new Image() img_a[1]=new Image() img_a[0].src="logo.gif" img_a[1].src="lgcit.gif"

function img_b() { document.images[0].src=img_a[i].src document.images[0].src=img_a[i].src i++ if(i>1) i=0; setTimeout("img_b()", 2000) }

</SCRIPT>

</head>

<body bgcolor="#ffffff" onLoad=img_b()>

<img src="logo.gif">

</body></html>


Данный пример аналогичен предыдущему, но сам скрипт написан несколько иначе.

<html>

<head>

<title>Мультипликация по событию onLoad</title>

</head>

<script language="JavaScript">

pictures = new Array() for(i=0;i<3;i++) { pictures[i] = new Image() if(i==0) pictures[i].src = "/pictures/it/javascript/3.gif" if(i==1) pictures[i].src = "/pictures/it/javascript/2.gif" if(i==2) pictures[i].src = "/pictures/it/javascript/1.gif" } n=1; flag=1; function scroll_image() { if(flag==1) { n++;if(n>2) n=0; document.images[0].src = pictures[n].src } setTimeout("scroll_image()",1500); } </SCRIPT>

</head>

<body bgcolor="#FFF5EE" text="#000000" link="#FF0000" alink="#FF0000" vlink="#A52A2A" onLoad=scroll_image()>

<center><IMG SRC="/pictures/it/javascript/1.gif" NAME="tool">

</center>

</body></html>

Этот пример иллюстрирует возможность изменения картинки при выборе из списка.

<html>

<head>

<META NAME="Key Words" CONTENT="Информационные технологии, Примеры JavaScript">

<html>

<head>

<title>Изменение картинки при выборе из списка</title>

</head>

<script language="JavaScript">

pictures = new Array() for(i=0;i<3;i++) { pictures[i] = new Image() if(i==0) pictures[i].src = "/pictures/it/javascript/3.gif" if(i==1) pictures[i].src = "/pictures/it/javascript/2.gif" if(i==2) pictures[i].src = "/pictures/it/javascript/1.gif" } function l_image() { document.images[0].src = pictures[document.form1.item.selectedIndex].src } </SCRIPT>

</head>

<body bgcolor="#FFF5EE" text="#000000" link="#FF0000" alink="#FF0000" vlink="#A52A2A">

<center><TABLE COLS=2 WIDTH="100%" >

<TR>



<th>

<form name=form1>

<select name=item onChange=l_image()>

<option>рисунок 1 <option>рисунок 2 <option selected>рисунок 3 </select>

</form>

</th>

</tr>

<tr>

<th ALIGN=CENTER VALIGN=CENTER>

<IMG SRC="/pictures/it/javascript/1.gif" NAME="tool"></th>

</TR>

</TABLE>

</center>

</body></html>

Изменение картинки при выборе гиперссылки.

<html>

<head>

<title>Изменение картинки при выборе гиперссылки</title>

</head>

<script language="JavaScript">

function l_image(a) { document.images[0].src=a } </SCRIPT>

</head>

<body bgcolor="#FFF5EE" text="#000000" link="#FF0000" alink="#FF0000" vlink="#A52A2A">

<center><TABLE COLS=2 WIDTH="100%" >

<TR><TD>

<UL>

<LI><A HREF="javascript:l_image('/pictures/it/javascript/1.gif')">рисунок 1</A>

<LI><A HREF="javascript:l_image('/pictures/it/javascript/2.gif')">рисунок 2</A>

<LI><A HREF="javascript:l_image('/pictures/it/javascript/3.gif')">рисунок 3</A>

</UL></TD>

<TD ALIGN=CENTER VALIGN=CENTER>

<IMG SRC="/pictures/it/javascript/3.gif" NAME="tool" > </TD>

</TR>

</TABLE>

</center>

</body></html>

Изменение картинки при загрузке документа в зависимости от текущего времени осуществляется с использованием объекта Date.
Работает во всех броузерах, поддерживающих JavaScript.

<html>

<head>

<title>Баннер</title>

</head>

<script language="JavaScript">

function ban() { j=(new Date()).getSeconds()%2 this[0]="logo.gif" this[2]="lgcit.gif" document.write("<img src=",this[2*j],">")

return (" ");

}

</script>

</head>

<body bgcolor="#ffffff">

<SCRIPT>

document.write(ban()) </SCRIPT>

</body></html>


Содержание раздела