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

О проекте

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

MySQL

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

Хостинг

Другое








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

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

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

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

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

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

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

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

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

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

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

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



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





Изменение картинки.
Примеры скриптов на языке 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>

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



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