Gör en rullgardinsmeny Klickbar text visar en bild

JavaScript - bildvisning

Det skript vi nu skall titta på är mer komplicerat än rullgardinsmenyn, men det är fortfarande lätt att ändra så att det passar på din hemsida. Det är samma skript som jag har använt på den första sidan om Bilder, där jag visade skillnaden mellan olika bildformat.

Alltsammans består av tre delar

  • Ett skript som ligger mellan HEAD-taggarna
  • En tabell där bilderna ligger och där funktionerna anropas
  • Ett formulär där funktionen Beskriv() visar bildtexten
Vi går igenom delarna en i taget

Först skriptet som skall ligga mellan HEAD-taggarna. Det ligger här därför att det innehåller två funktioner, som skall vara definierade innan de anropas. Dessutom kontrollerar det att den webbläsare som besökaren använder är antingen Netscape 3+ eller Internet Explorer 4+, eftersom skriptet inte fungerar i äldre webbläsare:

<SCRIPT LANGUAGE="JavaScript">
<!-- Göm skriptet

//de fyra följande raderna kontrollerar vilken webbläsare som används
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
ns3upp = (browserName == "Netscape" && browserVer >= 3);
ie4upp = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

//här skapas en ny matris med namnet Bildtexten
Bildtexten = new Array(); 

//for-satsen ser till att matrisen får en plats för varje bild
//ändra 8 i första raden nedan till ditt bildantal
for (i = 0; i <= 8; i++) {
Bildtexten[i] = new String;
}

//skriv in dina bildtexter här
Bildtexten[1] = "Min första bild - lejongap";
Bildtexten[2] = "Min andra bild - clematis";
Bildtexten[3] = "Min tredje bild - gulkremla"; 
Bildtexten[4] = "Min fjärde bild - ringblomma";
Bildtexten[5] = "Min femte bild - judekörs";
Bildtexten[6] = "Min sjätte bild - julkaktus";
Bildtexten[7] = "Min sjunde bild - tofsskivling";
Bildtexten[8] = "Min åttonde bild - kannranka";

//den här funktionen visar bildtexten till bilden som man pekar på
//detta sker oavsett vilken webbläsare som används
function Beskriv(i) {
document.visatext.Minbildtext.value = Bildtexten[i];
}

//den här funktionen visar den bild som man klickar på
//här finns också en inkapslad kontroll av webbläsaren
function visaBild(bildNamn) {
if (ns3upp || ie4upp) { //om webbläsaren är för gammal visas bilden inte
imgOn = ("" + bildNamn);
document.startbild.src = imgOn;
}
}
// Sluta gömma -->
</SCRIPT>

Allt som är markerat med rött är kommentarer, som du kan ta bort. Skriptet fungerar dock även om de ligger kvar.

Tabellen

Den andra delen är en tabell. I denna visas alla bilderna och var och en av dem är en länk som med händelsehanteraren OnMouseOver anropar den första funktionen. Den andra funktionen anropar länken som svar på en klickning.

För att koden skall bli lättare att läsa, har jag tagit bort alla attribut som anger HSPACE, VSPACE och ALIGN samt attributen till TABLE-taggen:

<TABLE>
<TR>
<TD ROWSPAN="2">
<IMG NAME="startbild" SRC="bild1.jpg" BORDER="0" WIDTH="210" HEIGHT="158"></TD>
<TD><A HREF="javascript:visaBild('bild1.jpg');">
<IMG SRC="bild1_liten.jpg" BORDER="0" onMouseOver='Beskriv("1");' WIDTH="44" ¬ HEIGHT="33"></A></TD>
<TD><A HREF="javascript:visaBild('bild2.jpg');">
<IMG SRC="bild2_liten.jpg" BORDER="0" onMouseOver='Beskriv("2");' WIDTH="44" ¬ HEIGHT="33"></A></TD>
<TD><A HREF="javascript:visaBild('bild3.jpg');">
<IMG SRC="bild3_liten.jpg" BORDER="0" onMouseOver='Beskriv("3");' WIDTH="44" ¬ HEIGHT="33"></A></TD>
<TD><A HREF="javascript:visaBild('bild4.jpg');">
<IMG SRC="bild4_liten.jpg" BORDER="0" onMouseOver='Beskriv("4");' WIDTH="44" ¬ HEIGHT="33"></A></TD>
</TR>
<TR>
<TD><A HREF="javascript:visaBild('bild5.jpg');">
<IMG SRC="bild5_liten.jpg" BORDER="0" onMouseOver='Beskriv("5");' WIDTH="44" ¬ HEIGHT="33"></A></TD>
<TD><A HREF="javascript:visaBild('bild6.jpg');">
<IMG SRC="bild6_liten.jpg" BORDER="0" onMouseOver='Beskriv("6");' WIDTH="44" ¬ HEIGHT="33"></A></TD>
<TD><A HREF="javascript:visaBild('bild7.jpg');">
<IMG SRC="bild7_liten.jpg" BORDER="0" onMouseOver='Beskriv("7");' WIDTH="44" ¬ HEIGHT="33"></A></TD>
<TD><A HREF="javascript:visaBild('bild8.jpg');">
<IMG SRC="bild8_liten.jpg" BORDER="0" onMouseOver='Beskriv("8");' WIDTH="44" ¬ HEIGHT="33"></A></TD>
</TR>
</TABLE>

Du ser att den allra första IMG-taggen har ett NAME-attribut, nämligen startbild. I den här taggen anges vilken bild som skall visas här när sidan öppnas.

När du klickar på någon av de små bilderna, kommer funktionen visaBild() att ändra värdet på startbild, och i stället visa den bild som anges i länken som anropar funktionen:
<A HREF="javascript:visaBild('bild2.jpg'";">

Varje rad i tabellen består av en länk och en bild. Som du ser står det två bildfilsnamn i varje rad. Det första namnet hör till länken. Det är den andra bilden, den som har namnet bild1_liten.jpg och så vidare, som visas på respektive plats i tabellen. Den bilden är en krympt version av motsvarande bild1.jpg. 

Det enda du behöver ändra i tabelldelen är bildfilernas namn, plus att du måste ange rätt bredd och höjd för varje bild. Eftersom alla bilder kommer att visas i formatet 210x158 (eller den storlek du väljer för visningen) bör alla de "färdiga" bilderna vara lika stora. Däremot finns det inget som hindrar att de krympta bilderna är olika stora.

Men om du inte klickar på någon bild, utan bara pekar på de små bilderna, utlöses händelsehanteraren onMouseOver. Den anropar funktionen Beskriv(i) och i får det värde som anges i anropet, det vill säga värdet där händelsehanteraren utlöstes. I den här funktionen anges vad som skall ske i formuläret visatext.

Formuläret

<FORM NAME="visatext">
<INPUT TYPE="text" NAME="Minbildtext" SIZE="73">
</FORM>

NAME-attributen i FORM- och INPUT- gör att funktionen Beskriv(), som anropas av onMouseOver i tabellen, vet var texten skall visas. SIZE anger bredden i tecken på den här textkontrollen. Du kan ändra bredden på textkontrollen, men om du ändrar något av NAME-attributen måste du göra motsvarande ändring i funktionen.

Övningsuppgiften

Skapa ett antal bildpar (bild1.jpg och bild1_liten.jpg). Tänk på att alla de stora bilderna bör ha samma mått - däremot går det bra även med GIF-bilder och du kan naturligtvis välja helt andra namn på bilderna.

Skriv sedan ihop skriptet och lägg in det på någon av dina sidor. Tänk på att alla tre delarna måste finnas med. Se till att du får in rätt bildfiler på rätt plats, och ändra antalet i skriptets for-sats så att det stämmer med ditt bildantal.

Spara sedan sidan och kontrollera i webbläsaren att det fungerar.

Gör en rullgardinsmeny Klickbar text visar en bild

© SupportData.Net