Námsefnisgerð í HTML | Um | SOS | Nemendur | Hól | Tilvísanir | Skipanir | Lexíur | fyrri | næsta |

27d. JavaScript : Skipt um mynd

Kviklegar hreyfimyndir!

Renndu músinni þinni yfir flöskuna!

Renndu henni af!

Ert þú tilbúinn að búa til sömu áhrif?


Markmið

Eftir þessa lexíu átt þú að kunna að:

Lexía

Athugaðu: Ef þú ert ekki með skjölin úr síðustu lexíu, þá getur þú sótt eintök af þeim núna.

Í þessari lexíu ætlum við að sýna þér hvernig á að búa til áhrif eins og þú hefur að líkindum séð á öðrum vefjum -- þar sem vefmynd breytist ef maður rennir músinni yfir hana eða smellir á hana. Til dæmis hér fyrir neðan, þá „bólgnar“ örin ef músinni er rennt yfir hana og breytist í hnapp sem er niðri ef smellt er á hana:

ör til vinstri

Þegar búið er að „læsa“ hnappinn niður, þá þarf að endurhlaða síðuna til að endurstilla hann.

Algengasta notkun á þessum áhrifum er að setja líf í stiklumyndir sem virka eins og hnappar, þannig að notandinn sjái að hluturinn undir músinni er eitthvað sem er þess virði að smella á.

Þú er frjáls að nota það sem fram kemur í þessari lexíu til að láta hnappa hoppa og skoppa, en það er okkar staðfasta skoðun að slíkt bætir ekki neitt upplýsingarnar sem fram koma á síðunni. Þess vegna ætlum við að nota tækifærið og sýna dæmi um hvernig nota má þetta á þann hátt sem skiptir máli.

Þú skalt líka hafa annað í huga. Fyrir hverja mynd sem breytist þegar mús rennur yfir hana þarf að sækja tvær mismunandi myndir og, eins og þú sérð bráðum, þá verður það að gerast áður en HTML kóðinn fyrir síðuna er sóttur. Þetta getur því teygt á tímanum sem það tekur að hlaða síðuna og setja hana upp og á meðan verður notandinn að horfa á tóman skjáinn.

mouseOver myndskipting virkar nokkurn vegin svona:

  1. Vefskoðarinn byrjar að lesa HTML kóðann fyrir síðuna
  2. Á <HEAD>...</HEAD> svæðinu eru skipanir sem sækja fyrst tvær myndir og setja þær í tímabundna geymslu.
  3. Venjuleg <img...> skipun setur upp fyrstu myndina sem á að sjást.
  4. JavaScript „atburðastjóri“ í stiklu í kringum myndina athugar hvort að músin er að koma yfir eða fara af svæðinu sem myndin er á.
  5. Ef músin kemur á myndina, þá er kallað á JavaScript fall sem skiptir um skráarupplýsingar fyrir myndina og setur upp þá mynd sem á að sjást ef músin ef yfir henni.
  6. Þegar músin fer af svæðinu, þá er kallað á annað JavaScript fall sem setur upprunalegu myndina upp.
ATHUGAÐU: Til að þetta virki rétt, þá verða myndirnar að vera af sömu hæð og breidd.

Hér fyrir neðan er sýnd grunnuppsetning fyrir hnappaskipti. Sú aðferð sem notuð er á þessari síðu hefur nokkur aukaskref sem þú er hvattur til að skoða með því að líta á HTML kóðann fyrir þessa síðu.

JavaScript Myndaskipting
HTML kóði útskýring 

<html>
<head>
<title>Síðan mín</title>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
 Dæmigert upphaf HTML síðu sem er með JavaScrip föll í <HEAD>...</HEAD>. svæðinu. 
if (document.images) {
 Þetta er próf til að gá hvort vefskoðarinn skilur myndgeymlufallið sem þarf að nota við myndskipti. Ef þetta gefur neikvætt svar, þá ættum við að sleppa afganginum af kóðanum og sýna bara fastar myndir. 
  var hnappur1_upp = new Image();
  hnappur1_upp.src = 'hnappur_upp.gif";
 Við búum til breytu (e. variable) sem er af þeirri gerð sem stendur fyrir myndir. Seinni línan setur slóðina að fyrstu myndinni á src eigindið . 
  var hnappur1_yfir = new Image();
  hnappur1_yfir.src = 'hnappur_yfir.gif";
 Við búum til aðra myndarbreytu sem setur slóðina að annarri myndinni á src eigindið. 
function yfir_hnappur() {
  if (document.images) {
    document["hnappurEitt"].src = hnappur1_yfir.src
  }
}
 Þegar kallað er á þetta fall, þá athugar það að vefskoðarinn geti skipt um myndir. Ef svo er, þá skoðar það lista yfir vefmyndir sem geymdar eru í skjalhlutnum og setur á hann breytuna sem vísar í myndina sem á að sjást þegar músin er yfir. 
function upp_hnappur() {
  if (document.images) {
    document["hnappurEitt"].src = hnappur1_upp.src
  }
}
 Þetta fall virkar næstum eins, nema það setur upp upprunalegu myndina. 
//-->
</SCRIPT>
<body>
   :
   :
   :
 Lokin á JavaScript kóðanum og nú byrjar HTML kóðinn sem sýnir síðuna sjálfa. 

<A HREF="file.html" 
  onMouseOver="yfir_hnappur()" 
  onMouseOut="upp_hnappur()">
  <img src="hnappur_upp.gif" alt="smelltu á mig" 
    width="XX" height="YY" name="hnappurEitt" 
    border=0>
</a>
Skipuninn sem notuð er til að hlaða inn fyrstu útgáfunni af myndinni („upp“ myndina). Athugaðu að innan <img...> skipunarinnar er búið að gefa myndinni einstakt nafn, „hnappurEitt“, sem við getum notað til að vísa í hana í kóða eins og document["nafn hnapps"] Í stiklunni er JavaScrip atbuðrastjóri, onMouseOver sem setur af stað kall í falllið okkar og skiptir í „niðri“ myndina þegar músin er yfir henni. Á sama hátt virkar onMouseOut atburðurinn til að kalla á hitt fallið og skipta aftur um mynd þegar músin fer af myndinni..

Nú skulum við skoða hvernig þetta virkar á eldfjallavefnum okkar. Frekar en að setja líf í einhverja leiðinlega hnappa, þá ætlum við að búa til eftirlíkingu af smásjá!

Sem hluta af Innganginum, þá ætlum við að búa til nýjan hluta sem lýsir steinasýnum úr eldfjalli og sýnum mynd af einu sem kallast „vikur“. Við ætlum að nota JavaScript til að breyta myndinni þannig að það sjáist sneiðmynd í gegnum vikur í smásjánni. Með því að færa músina af og á myndina þá getum við borðið myndirnar saman (Já-já, við viðurkennum að þetta er ekkert frumlegra en að setja líf í hnappa og að það væri hægt að fá sömu áhrif með því að setja myndirnar hlið við hlið...)

  1. Farðu í Lexía 27d Myndvistunarmiðstöð til að sækja myndirnar tvær sem þarf fyrir þessa lexíu. Þær eiga að fara í möppuna/undirskrána myndir ásamt öllum hinum myndunum þínum.
  2. Opnaðu skjalið inngang.html í textaritlinum þínum.
  3. Á svæðið <HEAD>...</HEAD> skaltu setja þennan JavaScript kóða: 
    <SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
   var pum1 = new Image();
   pum1.src = "../myndir/pumice.gif";
   var pum2 = new Image();
   pum2.src = "../myndir/pumice2.gif";
}

function show_rock() {
	if (document.images) {
		document["pum"].src = pum2.src;
	}
}

function hide_rock() {
	if (document.images) {
		document["pum"].src = pum1.src;
	}
}	
//-->
</SCRIPT>
    ATHUGAÐU: Við bjuggum til tvær geymslubreytur sem standa fyrir hvora mynd fyrir sig. Við köllum á show_rock() fallið til að sýna smásjármyndina í myndarskjalinu pumice2.gif og hide_rock() falllið til að fá upprunalegu myndina aftur. Þessir atburðir eru settir á mynd sem kallast „pum“. Næst skoðum við HTML kóðann.
  4. Á eftir töflunni um vel þekkt eldgos, og á eftir setningunni sem endar : 
      sem maðurinn hefur fylgst með.
    setjum við nýjan hluta um gjósku. Þar verður myndin af vikrinum og JavaScript kóði til að skipta um myndir: 
    
<A NAME="vr"><h3 align=center>Gjóska</h2></A>
Vísindamenn skoða berg við margvísleg skilyrði.<p>
<b>Vikur</b> er ein tegund bergs sem verður til við mikil 
<A HREF="inngang.html" 
  onClick="alert('Færðu músina yfir bergsýnið til að sjá stækkaða mynd.'); 
  return false"   
  onMouseOver="show_rock(); window.status='lýsing á sprengiskala'; 
  return true" 
  onMouseOut="hide_rock()">
<IMG SRC="../myndir/pumice.gif" align=right ALT="mynd af vikri" 
  WIDTH="220" HEIGHT="170" hspace=12 vspace=12 name="pum" border=0></A>
sprengigos. Heit, freyðandi <b>bergkvika</b> kólnar hratt og 
skilur eftir sig berg með mörgum snúnum loftgöngum. Vikur er þess vegna  
mjög léttur.
<p>
Ef þú rennir músinni yfir myndina, þá getur þú séð hvernig vikur lítur út
í smásjá.
<p>
<b>Sneiðmynd</b> er sneið af bergi svo þunn að ljósið í smásjá nær að 
lýsa í gegnum hana og þannig getum við séð uppbyggingu steinsins.
<p>
Snúnu hólfin hér eru lofthólfin sem festust innan í berginu þegar það
þeyttist upp úr eldfjallinu.
<br clear=right>
    ATHUGAÐU: Farðu sérstaklega vandlega með <img...> skipunina; hún er orðin frekar flókin! Nú þarf hún að sjá um mouseOver atburðinn, sýna texta á stöðulínu (eins og við gerðum í lexíu 27a), og hoppa á nálægt akkeri ef notandinn smellir á myndina (en heldur sig á sömu síðu). Myndin er einnig sett til hægri á síðuna og það er dálítið pláss sett í kringum hana (hspace og vspace)
  5. Vistaðu skjalið og Kallaðu aftur á það

Gættu að hvað þú gerir

Berðu þínar vefsíður saman við þetta dæmi um hvernig þær ættu að sjást. Ef þínar síður eru ekki eins og dæmið eða stiklutextarnir virka ekki rétt, þá skaltu endurskoða textann sem þú ritaðir í textaritlinum. Athugaðu að JavaScrip er mjög næmt fyrir innsláttarvillum -- ein gæsalöpp eða semikomma sem vantar skemmir alla síðuna! Athugaðu líka að þú hafir ekki nein auka LÍNUSKIPTI í JavaScript kóðanum

Upprifjun

Upprifjunarefni fyrir þessa lexíu:

  1. Hvaða svæði í HTML kóðanum þarf að lagfæra til að geta notað JavaScript myndaskipti?
  2. Hver er munurinn á onMouseOver og onMouseOut?
  3. Hvað sér notandinn ef vefskoðarinn gefur neikvætt svar við prófuninni document.images?
  4. Hvað er nauðsynlegt í JavaScript kóða til að skipta um myndir (vísbending: athugaðu myndaskrárnar, kóða til að hlaða myndir, kóða til að skipta um myndir og kóða til að setja atburð af stað)?

Æfingar

Finndu myndir sem þú getur notað til að skipta; mundu að þær verða að vera af nákvæmlega sömu stærð! Notaðu kóðann okkar til að búa til sömu áhrif á síðunum þínum. Hvað þyrfti að gera til að láta tvær mismunandi myndir skipta svona? Af hverju væri þessi aðferð ekki eftirsóknarverð ef síðan þín væri með 10 myndir sem allar skitu um ef músin færi yfir?

Athugaðu að þú getur líka skrifað JavaScript föll sem framkvæma ýmsar skipanir við músarsmelli:


<a href="file.html" onMouseOver="yfir_hnappur()" onMouseOut="upp_hnappur()"
  onClick="doButtonClick()">
  <img src="hnappur_upp.gif" alt="smelltu á mig" width="XX" height="YY" 
  name="hnappurEitt" border=0>
</a>

svo framarlega sem þu hefur skrifað JavaScrip fall í <HEAD>...</HEAD> svæðið sem bregst við þessum atburði

Næst á dagskrá....

Það er kominn tími til að lífga uppá síðurnar með gagnvirkum FORMUM...

FARA Á.... | Efnisyfirlit | síðasta: „JavaScript: Gluggaopnarar“ | næsta: „FORM“

Námsefnisgerð í HTML: Lexía 27d: Dálítið af JavaScript : Skipt um mynd
©1994-2000 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

Tengiliður MCLI er Alan Levine
Sendu athugasemdir til alan.levine@domail.maricopa.edu
eða gaui@mmedia.is

URL: http://www.vma.is/tut/tut27d.html
Þýtt með leyfi höfundar