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

Динамическое изменение графических элементов веб-страницы

Предварительная загрузка графических объектов

Однако это еще не все. Представьте себе, что пользователь навел мышь на кнопку-гиперссылку. Что должно произойти? Естественно, замена рисунка. Но откуда браузер возьмет новый рисунок? Начнет загружать через Интернет, поскольку до этого новый рисунок не был загружен в память. В результате на некоторое время отобразится пустой прямоугольник, и весь эффект пропадет!

Чтобы этого избежать, придется написать код для предварительной загрузки в память всех картинок. Это можно сделать при помощи объявления объектов типа Image:

var img1 = new Image();
img1.src = 'Images/ALTavista.jpg';
var img2 = new Image();
img2.src = 'Images/ALTavista2 .jpg;

…и так далее. Теперь все графические объекты будут загружены в память заранее, и при наведении мыши на кнопку-гиперссылку смена рисунка произойдет практически мгновенно, что и даст требуемый эффект.

Посмотрим, что у нас получилось в целом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  
<HEAD>
    <TITLE>Страница гиперссылок</TITLE>
    <STYLE TYPE="text/css">
        BODY {
            text-align: center - background: url("Images/back?.jpg");
        }
        H1 {
            border-color: #0063CE;
            border-style: groove;
            border-width: thick;
            padding: 5px;
            background-color: #ACEDFF;
            width: 16em;
        }
        SPAN {
            border-color: #FF63CE;
            border-style: ridge;
            border-width: medium;
            padding: 5px;
            padding: 5px;
            background-color: #FCEDFF;
            width: 60%;
            font-size: 20px;
        }
        IMG {
            margin: 7px;
        }
        -->
    </STYLE>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
        //<!--
        var img1 = new Image() img1.src = 'Images/ALTavista.jpg';
        var img2 = new Image() img2.src = 'Images/ALTavista2.jpg';
        var img3 = new Image() img3.src = 'Images/yahoo.jpg';
        var img4 = new Image() img4.src = 'Images/yahoo2.jpg';
        var img5 = new Image() img5.src = 'Images/yandex.jpg';
        var img6 = new Image() img6.src = 'Images/yandex2.jpg';
        var img7 = new Image() img7.src = 'Images/aport.jpg';
        var img8 = new Image() img8.src = 'Images/aport2.jpg';
  
        function change1() {
            var a = window.event.srcElement;
            if (a.tagName == "IMG")
                a.src = a.src.substring(0, a.sre.length - 4) + "2" + a.src.substring(a.sre.length - 4, a.src.length);
        }
  
        function change2() {
            var a = window.event.srcElement;
            if (a.tagName == "IMG")
                a.src = a.src.substring(0, a.src.length - 5) + a.src.substring(a.src.length - 4, a.src.length);
        }
        document.onmouseover = changel;
        document.onmouseout = change2;
         //-->
    </SCRIPT>
</HEAD>
  
<BODY>
    <H1>ПОИСКОВЫЕ МАШИНЫ</H1>
    <SPAN>Если вы ищете в Интернете какую-либо информацию, вам помогут следующие сайты:<SPAN>
    <BR>
    <BR>
    <A HREF="http://www.ALTavista.corn" TARGET="_blank">
        <IMG SRC="Images/ALTavista.jpg" WIDTH="192" HEIGHT="40" BORDER="0" ALT="ALTavista">
    </A>
    <BR>
    <A HREF="http://www.yahoo.corn" TARGET="_blank">
        <IMG SRC="Images/yahoo.jpg" WIDTH="147" HEIGHT="40" BORDER="0" ALT="Yahoo! ">
    </A>
    <BR>
    <A HREF="http://www.aport.ru" TARGET="_blank">
        <IMG SRC="Images/aport.jpg" WIDTH="135" HEIGHT="40" BORDER="0" ALT="АпорТ">
    </A>
    <BR>
    <A HREF="http://www.yandex.ru" TARGET="_blank">
        <IMG SRC="Images/yandex.jpg" WIDTH="129" HEIGHT="40" BORDER="0" ALT="Яndex">
    </A>
</BODY>
  
</HTML>

Можно, разумеется, придумать и другие средства взаимодействия с графическими элементами. В главе 6, например, мы создали картинку с динамически изменяющимся размером. В разделе 7.2 мы передвигали картинки с помощью мыши. Вы можете также попробовать передвигать картинки без участия пользователя (что создаст эффект анимации) или изменят). их стилевое свойство filter.

Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.