Иллюстрированный самоучитель по созданию сайтов › Веб-страницы, реагирующие на действия пользователя › Динамическое изменение графических элементов веб-страницы [страница - 137] | Самоучители по работе в Internet

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

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

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

Чтобы этого избежать, придется написать код для предварительной загрузки в память всех картинок. Это можно сделать при помощи объявления объектов типа 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.