Sivupiste.com - Tuki - Ohjeet - Vaihtuvat painikkeet

Vaihtuvat painikkeet

Vaihtuvat painikkeet on helppo toteuttaa Javascriptin avulla. Aluksi sinulla pitää olla vähintään kaksi kuvaa, joista toinen näkyy kun hiiren osoitin ei ole painikkeen päällä ja toinen kun hiiren osoitin viedään painikkeen päälle. Kuvien pitää olla saman kokoisia.

Ohessa malliesimerkki, jonka voi hakea koneellesi täältä (3kb):

1 Lisää sivusi alkuun seuraava javascripti <HEAD> </HEAD> 'tagien' väliin.

<script language="JavaScript">
<!--

painike_1 = new Image(69,25); 
painike_1.src = "out.gif"; 
painike_1 = new Image(69,25); 
painike_1.src = "in.gif"; 

painike_2 = new Image(69,25); 
painike_2.src = "out2.gif"; 
painike_2 = new Image(69,25); 
painike_2.src = "in2.gif"; 

//Tämän yläpuolelle painikkeiden nimet

function mover(img_name, img_gif){
  var id,constr;

  if(document.images){
      id = 'document.' + img_name;
      constr = eval(id);
      constr.src = img_gif;
  }
}

// -->

</script>

2 Kun teet lisää painikkeita, muuta 'painike_x' ja out-/in-kuvat halutuiksi esim. 'painike_3' ja kuvat 'out3.gif' ja 'in3.gif'. OUT tarkoittaa kuvaa, joka näkyy kun painikkeeseen ei ole viety hiiren-osoitinta ja IN tarkoitaa kuvaa joka näkyy kun hiiren-osoitin viedään painikkeen päälle. Arvot 69,25 (new Image) ovat kuvan leveys ja korkeus. Laita tähän omien kuviesi leveys ja korkeus.

3 Lisää seuraava javascripti sivustosi <BODY> osaan siihen kohtaan mihin haluat vaihtuvien painikkeiden tulevan:

<a href="../../../index.html"
   onMouseOver="mover('painike_1','in.gif');"
   onMouseOut="mover('painike_1','out.gif');">
<img name="painike_1" src="out.gif" 
width="69" height="25"
alt="Testipainike1" border="0"></a>

<a href="../../../index.html"
   onMouseOver="mover('painike_2','in2.gif');"
   onMouseOut="mover('painike_2','out2.gif');">
<img name="painike_2" src="out2.gif" 
width="69" height="25"
alt="Testipainike2" border="0"></a>

Jos ohjeessa on virhe, huomautettavaa tai parannettavaa, olisitko ystävällinen ja jättäisit palautetta asiasta. Kiitos.