JavaScript

w przykładach

http://javascript.jest.o.k.pl

OnMouseOver, czyli "Aktywny przycisk"

To chyba najpopularniejszy rodzaj skryptu w Sieci. Obrazek który zmienia się, kiedy umieścisz nad nim kursor myszki. Może (a nawet musi, jeśli ma działać w Netscape'ie) służyć jako odsyłacz. Dodatkowo, możesz podać tekst, który wyświetlany będzie w pasku stanu przeglądarki.

To jest nowa, poprawiona wersja tego skryptu, mam nadzieję, że okaże się łatwiejsza w stosowaniu.

Instrukcja

Aby móc korzystać z tego skryptu musisz najpierw przygotować odpowiednią ilość wersji danego przycisku. Umieść je wszystkie w jednym katalogu i nadaj im nastepujące nazwy: nazwa_high.gif dla wersji, która będzie widoczna po najechaniu na przycisk myszą, oraz nazwa_norm.gif dla wersji "zwykłej". W miejsce "nazwa" wstaw ciąg znaków, który będzie identyfikował obrazek.

Następnie w nagłówku dokumentu (pomiędzy <HEAD> a </HEAD>) umieść następujący kod:

<script language="JavaScript" type="text/javascript">                 
<!--                                                                  
// Niniejszy skrypt pochodzi z serwisu "JavaScript w przykladach"     
// Copyright (C) 1999 Maciej Szczepaniak <maciek@wls1.ch.pwr.wroc.pl> 
                                                                      
// Skrypt objety jest licencja GNU General Public License.            
// Koniecznie przeczytaj pelna informacje o licencji pod adresem:     
//     http://javascript.jest.o.k.pl/archiwum.html#l                  
                                                                      
                                                                      
var ImgFolder = "katalog_z_obrazkami/";                               
                                                                      
function highlight(Nazwa, Info) {                                     
   eval("document.images[\"" + Nazwa + "\"].src = \"" +               
      ImgFolder + Nazwa + "_high.gif\"");                             
   window.status = Info;                                              
}                                                                     
                                                                      
function normalize(Nazwa) {                                           
   eval("document.images[\"" + Nazwa + "\"].src = \"" +               
      ImgFolder + Nazwa + "_norm.gif\"");                             
   window.status = "";                                                
}                                                                     
                                                                      
//-->                                                                 
</script>

W miejsce katalog_z_obrazkami/ musisz wpisać nazwę katalogu, w którym znajdują się wszystkie obrazki, pamiętając o "/" na końcu. Jeśli obrazki znajdują się w tym samym katalogu, co strona, nie wpisuj nic (nawet "/").

Teraz pozostaje Ci tylko wstawić na stronę przyciski. Służy do tego taki kod:

<a href="Jakiś URL"                                                   
 onMouseOver="highlight('nazwa', 'Wiadomość'); return true"           
 onMouseOut="normalize('nazwa'); return true">                        
<img src="nazwa_norm.gif" name="nazwa">                               
</a>

Zamiast "nazwa" podaj oczywiście taką nazwę, jakiej użyłeś(łaś) tworząc pliki graficzne.

Wiadomość to tekst, który pojawi się w pasku statusu przeglądarki.

Użyty tu atrybut NAME elementu IMG nie jest zgodny z żadną specyfikacją HTML, ale jest konieczny ze względu na Netscape Navigatora. Specyfikacja HTML4.0 zaleca stosowanie w celu identyfikacji poszczególnych elementów strony atrybutu ID. Poprawnie interpretuje go jednak tylko MSIE, więc pozostaje wybór: albo strona spełnia wymagania W3C, albo jest zgodna z NN. (Istnieje jeszcze jedno wyjście z tej sytuacji: można do obrazków odnosić się poprzez numer kolejny, ale jest rozwiązanie conajmniej niewygodne)

[ Powrót na górę ]

Przykład

A oto i przykład zastosowania tego skryptu: