[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум справочника » Компьютерный мир » Вэб-дизайн, вэб-программирование (HTML, CSS, PHP и т.д.) » Сложные скрипты
Сложные скрипты
Fleur  Дата: Пятница, 02 Январь 2009, 21:15 | Сообщение # 1
Гуру Вконтакте
Группа: Администраторы
Сообщений: 204
Репутация: 7
Статус: Offline
Гистограмма построена с использованием свойства images[ ] объекта Document.
Code

<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.

Code
<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 и выше!

Code
<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>


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



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



vlink="#A52A2A" onLoad=scroll_image()>





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

Code
<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>

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

<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.

Code
<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>

So Break Yourself Against My Stones
And Spit Your Pity In My Soul
You Never Needed Any Help
You Sold Me Out To Save Yourself
And I Won’t Listen To Your Shame
You Ran Away - You’re All The Same
Angels Lie To Keep Control…
My Love Was Punished Long Ago
If You Still Care, Don’t Ever Let Me Know
If you still care, don’t ever let me know…
 
Форум справочника » Компьютерный мир » Вэб-дизайн, вэб-программирование (HTML, CSS, PHP и т.д.) » Сложные скрипты
Страница 1 из 11
Поиск: