П О Р Т А Л                            
С Е Т Е В Ы Х                          
П Р О Е К Т О В                        
  
Поиск по сайту:
                                                 
Главная

О проекте

Web-мастеру
     HTML & JavaScript
     SSI
     Perl
     PHP
     XML & XSLT
     Unix Shell

MySQL

Безопасность

Хостинг

Другое








Самое читаемое:

Учебник PHP - "Для Чайника".
Просмотров 182770 раз(а).

Иллюстрированный самоучитель по созданию сайтов.
Просмотров 82283 раз(а).

Учебник HTML.
Просмотров 77183 раз(а).

Руководство по PHP5.
Просмотров 48091 раз(а).

Хостинг через призму DNS.
Просмотров 55614 раз(а).

Подборка текстов стандартных документов.
Просмотров 47453 раз(а).

Учебник PHP - Самоучитель
Просмотров 53922 раз(а).

Документация на MySQL (учебник & справочное руководство)
Просмотров 54847 раз(а).

Внешние атаки...
Просмотров 44396 раз(а).

Учебник PHP.
Просмотров 39583 раз(а).

SSI в примерах.
Просмотров 29450 раз(а).



 
 
| Добавить в избранное | Сделать стартовой | Помощь





Изменение картинки.
Примеры скриптов на языке 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_h=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 = "3.gif"
    if(i==1) pictures[i].src = "2.gif"
    if(i==2) pictures[i].src = "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="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 = "3.gif"
    if(i==1) pictures[i].src = "2.gif"
    if(i==2) pictures[i].src = "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="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('1.gif')">рисунок 1</A>
<LI><A HREF="javascript:l_image('2.gif')">рисунок 2</A>
<LI><A HREF="javascript:l_image('3.gif')">рисунок 3</A>
</UL></TD>
<TD ALIGN=CENTER VALIGN=CENTER>
<IMG SRC="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>

[Назад] [Содержание] [Вперед]



Если Вы не нашли что искали, то рекомендую воспользоваться поиском по сайту: