Логин:   Пароль:




Новости
Рассылки
Форум
Поиск


Java
- Апплеты
- Вопрос-ответ
- Классы
- Примеры
- Руководства
- Статьи
- IDE
- Словарь терминов
- Скачать

Мобильная Java
- Игры
- Примеры
- Статьи
- WAP, WML и пр.

JavaScript
- Вопрос-ответ
- Примеры
- Статьи

Веб-мастеринг
- HTML
- CSS
- SSI

Разминка для ума
Проекты
Книги
Ссылки
Программы
Юмор :)




Rambler's Top100

JavaScript: ПримерыПример предварительной загрузки изображений

Пример предварительной загрузки изображений


<html>
<head>
<title>Пример предварительной загрузки изображений</title>
<script language="JavaScript">
<!-- hide
// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
//     http://rummelplatz.uni-mannheim.de/~skoch/js/ 
//       JS-book: http://www.dpunkt.de/javascript
//    You can use this code if you leave this message
//        Editted Yura Ladik 
// ******************************************************
// ok, у нас браузер с поддержкой JavaScript 
var browserOK = false;
var pics;
// -->
</script>
<script language="JavaScript1.1">
<!-- hide
//браузер с поддержкой JavaScript 1.1!
 browserOK = true;
 pics = new Array();
// -->
</script>
<script language="JavaScript">
<!-- hide
 var objCount = 0;// количество изображений на  web-странице
 function preload(name, first, second) {  
// предварительная загрузка изображений и размещение их в массиве 
 if (browserOK)
 {     
  pics[objCount] = new Array(3);
  pics[objCount][0] = new Image();
  pics[objCount][0].src = first;
  pics[objCount][1] = new Image();
  pics[objCount][1].src = second;
  pics[objCount][2] = name;
  objCount++;
 }
}
function on(name)
{
 if (browserOK)
 {
  for (i = 0; i < objCount; i++)
  {
   if (document.images[pics[i][2]] != null)
    if (name != pics[i][2])
    { 
     // вернуть в исходное систояние все другие изображения 
     document.images[pics[i][2]].src = pics[i][0].src;
    }
    else
    {
     // показывать вторую картинку, поскольку курсор пересекает данное изображение
     document.images[pics[i][2]].src = pics[i][1].src;
    }
  }
 }
}

function off()
{
 if (browserOK)
 {
  for (i = 0; i < objCount; i++)
  {
   // вернуть в исходное систо\яние все изображени\я
   if (document.images[pics[i][2]] != null) 
   document.images[pics[i][2]].src = pics[i][0].src;
  }
 }
}

// заранее загружаемые изображения - Вы должны здесь указать 
// изображения, которые нужно загрузить заранее, а также объект Image,
// к которому они относятся (первый аргумент). Именно эту часть 
// нужно корректировать, если Вы хотите использовать скрипт 
// применительно к другим изображениям (конечно это не освобождает
// Вас от обязанности подредактировать в документе также и раздел body)
preload("link1", "img1f.jpg", "img1t.jpg");
preload("link2", "img2f.jpg", "img2t.jpg");
preload("link3", "img3f.jpg", "img3t.jpg");
// -->
</script>
</head>
&#60body>
&#60a href="/" onMouseOver="on('link1')" onMouseOut="off()">
&#60img name="link1" src="img1f.jpg" width="140" height="50" border="0"></a>
&#60a href="/" onMouseOver="on('link2')" onMouseOut="off()">
&#60img name="link2" src="img1f.jpg" width="140" height="50" border="0"></a>
&#60a href="/" onMouseOver="on('link3')" onMouseOut="off()">
&#60img name="link3" src="img1f.jpg" width="140" height="50" border="0"></a>
&#60/body>
&#60/html>
</font></pre>
</div>
<!--КОНЕЦ ОСНОВНОЙ ТЕКСТ -->
</td>
<td width="1" background="../../../img/divider.gif"></td>
<td width="130" valign="top">
<div style="padding-left:7px; padding-right:7px">
<img src="../../../img/bookshelf.gif">


<p class="news"><img src="http://www.ozon.ru/multimedia/books_covers/small/1000242767.gif" border="1"><br><b>Вадим Дунаев</b><br>"JavaScript. Самоучитель"<br><a href="/books/aboutbook.php?id=9">Подробнее&gt&gt</a><br><a href="#">Заказать&gt&gt</a></p><p class="news"><img src="http://www.ozon.ru/multimedia/books_covers/small/1000372717.gif" border="1"><br><b>Питер Вейнер</b><br>"Java и JavaScript"<br><a href="/books/aboutbook.php?id=28">Подробнее&gt&gt</a><br><a href="#">Заказать&gt&gt</a></p>
<span class="news">
<img src="../../../img/important.gif">
<font color="red">Узнай</font> о чем ты на самом деле сейчас думаешь <a href="/humour/now_you_think.html">тут</a>.
<br><br><br>

[an error occurred while processing this directive]
</span>
<br>
<br>
<span class="news">
<img src="../../../img/news.gif">
<img src="/img/bulit.gif"><a href="/news/worldnews.php?id=514"></a><br><img src="/img/bulit.gif"><a href="/news/worldnews.php?id=512">Apache Struts 2.0.11</a><br><img src="/img/bulit.gif"><a href="/news/worldnews.php?id=511">Apache MyFaces Trinidad Core 1.2.3.</a><br><img src="/img/bulit.gif"><a href="/news/worldnews.php?id=510"> Sun переводит мобильные устройства с Java ME на Java SE </a><br><img src="/img/bulit.gif"><a href="/news/worldnews.php?id=507">Хакерская атака!</a><br>
</span>
<br>
<br>
<script type="text/javascript"><!--
google_ad_client = "pub-4001110505267280";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "B4C2AC";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_url = "0000FF";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</td>
</tr>
  <tr height="80">
<td colspan="5" align="center">
<p align="center">
<a href="#" target="_blank">
<img src="http://www.pokerstars.com/euro_bnrs/euro_current/russian/1024x60.gif" border="0"></a>
</p>
</td>
  </tr>
  <tr>
    <td colspan="3" align="left"><img src="../../../img/wround-b-l.gif" width="4" height="4"></td>
    <td colspan="2" align="right"><img src="../../../img/wround-b-r.gif" width="4" height="4"></td>
  </tr>
</table>
<p class="copyright">JavaPortal.ru - всё о Java и Javascript | <a href="../../../adv.html">Реклама на сайте</a> | <a href="../../../link.html">Обратная связь</a><br>
Copyright &copy; Юрий Ладик 2000-2007 г.</p>

</body>
</html>