JavaScript

w przykładach

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

Podmieniana grafika - sposób na efektowne menu

Ten skrypt pozwala umieścić na stronie grafikę, która będzie podmieniana za każdym razem, kiedy użytkownik przesunie myszkę nad jakimś odsyłaczem. Pozwala to utworzyć efektowne menu (którego poszczególne pozycje - odsyłacze - też mogą być obrazkami), w którym najechanie na link powoduje wyświetlenie szerszego opisu. Niestety, ten opis musi być zapisany jako grafika, ale dzięki temu skrypt działa także w starszych przeglądarkach, nie obsługujących DHTMLu. Skrypt ten różni się od Aktywnego przycisku tym, że tu mamy do czynienia z jednym obrazkiem i wieloma odsyłączami.

Instrukcja

Musisz przygotować osobny obrazek dla każdego odsyłacza, który ma uaktywniać skrypt. Obrazki muszą mieć identyczne rozmiary - ich zawartość zależy tylko od Twojej inwecji twórczej.

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                  
                                                                      
                                                                      
// domyslny obrazek:                                                  
var ihPusty = "url_domyslnego_obrazka";                               
                                                                      
// podmienia grafike na te o danym adresie:                           
function ihPokaz(adres) {                                             
   if (document.images)                                               
      document.hint_img.src = adres;                                  
}                                                                     
                                                                      
// podmienia grafike na domyslna:                                     
function ihCzysc() {                                                  
   ihPokaz(ihPusty);                                                  
}                                                                     
                                                                      
//-->                                                                 
</script>

W miejsce url_domyslnego_obrazka wpisz adres (względny lub absolutny) do grafiki, która ma być wyświetlana, gdy kursor nie znajduje się nad żadnym odsyłaczem.

Teraz pozostaje Ci tylko dodać odpowiednie instrukcje do odsyłaczy. W każdym z nich muszą znaleźć w się następującej postaci atrybuty onmouseover i onmouseout:

<a href="Jakiś URL"                                                   
 onMouseOver="ihPokaz('url_obrazka_do_podmiany')"                     
 onMouseOut="ihCzysc()">                                              
treść odsyłacza                                                       
</a>

Zamiast "url_obrazka_do_podmiany" podaj oczywiście adres obrazka, który ma zostać wyświetlony. Za treść odsyłacza możesz podstawić cokolwiek, może to też być grafika.

Teraz jeszcze pozostaje wstawienie obrazka, który będzie zmieniany. Służy do tego taki o to kod:

<img src="url_domyslnego_obrazka" border=0 alt="" name="hint_img">

Za url_domyslnego_obrazka wpisz to samo, co wyżej, w samym skrypcie. Obrazek może się znaleźć w dowolnym miejscu strony.

Jeśli rysunek nie został jeszcze skopiowany z serwera, użytkownik zobaczy puste pole. Dlatego wskazane jest dokonanie preloadowania obrazków - czy to wcześniej, czy na samej stronie.

[ Powrót na górę ]

Przykład

Przykładowe zastosowanie skryptu:

jeden dwa trzy