Задача 2.1 показва лесен начин за задаване и промяна на прозрачността на изображение чрез използването на JavaScript. Примерът използва изкачащ прозорец за отваряне на изображението.

1. Вмъкваме изображението paris.jpg в HTML документа като намаляваме реалния му размер на 180px в широчина и височина.

<img src="../Pictures/paris.jpg" width="180" height="180" />

2. Задаваме хипервръзка от намаленото изображение към това с реални размери.

<a href="../Pictures/paris.jpg"> <img src="../Pictures/paris.jpg" width="180" height="180" /></a>

3. Вмъкваме JavaScript събитията MouseOver и MouseOut в <img> тага. Присвояваме style.opacity=n за представяне на прозрачност в Netscape браузър, като n варира от 0 (пълна прозрачност) до 1 (непрозрачност). Присвояваме filters.alpha.opacity=m за представяне на прозрачност в IE браузър, като m варира от 0% (пълна прозрачност) до 100% (непрозрачност)

<a href="../Pictures/paris.jpg"> <img src="../Pictures/paris.jpg" width="180" height="180" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"></a>

4. Вмъкваме JavaScript събитие Click в <a></a> тага на HTML домумента. Чрез събитие Click създаваме отварянето на нов прозорец, който наричаме MyWindow. Задаваме следните атрибути на изскачащия прозорец: ленти към прозореца - toolbar, status, menubar, location (да/не); скролиращи ленти - scrollbars (да/не); преоразмеряване на прозореца - resizable (да/не); ширина на прозореца - width (в пиксели); височина на прозореца - height (в пиксели); отстояние на прозореца от горния ляв ъгъл на браузъра - left и top (в пиксели).

<a href="zad1.html" onClick="MyWindow=window.open( '../Pictures/paris.jpg','MyWindow','toolbar=no,location=no, status=no,menubar=no,scrollbars=no,resizable=yes, width=520px,height=520px,left=20,top=20'); return false;"> <img src="../Pictures/paris.jpg" width="180" height="180" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"></a>

Преоразмерете изскачащия прозорец и местоположението му в бараузъра.