гистограмма построена с использованием свойства images[ ] объекта document.
<html>
<head>
<script language="javascript">
i=0
function d_rand() {
for(j=0;j<10;j++) {
for(i=0;i<10;i++) document.images[j+i*10].src = "white.jpg"
y= math.floor(math.random()*10)
for(i=9;i>9-y;i--) document.images[j+i*10].src = "blue.jpg"
}
}
</script>
<body bgcolor=ffffff>
<center>
<table border=0>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<td><img src="white.jpg" width=20 height=10></td>
<tr><td colspan=10><img src="blue.jpg" width=250 height=2></td></tr>
</table>
<form name=diagram>
<input name=random type=button value=click onclick="d_rand()">
</form>
</center>
</body>
</html>
изменение картинки
в данном примере для этого используется свойство 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>