Примеры скриптов на языке JavaScript, Изменение картинки

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

В данном примере для этого используется свойство 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>