Hvordan Dynamisk Lag bilder med bildetekster i Javascript

Javascript legger kraftig dynamisk funksjonalitet til HTML-koden. Innhold kan legges til eller fjernes fra din webside ved Javascript-kode, selv etter at den er lastet inn. Skriv en funksjon for å lage en div-elementet som inneholder et bilde og bildetekst, deretter legge den til siden din på fly. Kalle denne funksjonen som svar på innspill fra brukerne for å vise bildet de ønsker. Utvide denne koden for å lage en bildedatabase eller lysbildeserie.

Bruksanvisning

1 Sett inn følgende kode mellom "hodet" kodene i HTML-dokumentet:

<Script type = "text / javascript">

funksjon InsertImage (src, bildetekst, foreldre) {

parent = document.getElementById(parent);

Var span = document.createElement ( "span")

span.style.display = "inline-block";

span.style.fontSize = "80%";

span.style.textAlign = "center";

span.innerHTML = "& lt; img src = '» + src + "' />" + bildetekst;

parent.appendChild (spenn);

}

</ Script>

Endre størrelse og justering av bildeteksten ved å redigere "skrift" og "Tekstjustering" eiendom oppdrag kommandoer, hvis du ønsker det.

2 Legg til følgende kode i kroppen av HTML-dokumentet, erstatte banen til og navnet på bildefilen for "Bilde.jpg" og din tekst for "TEKST:"

<Input type = "button" value = "Legg til bilde" onclick = "InsertImage (Bilde.jpg ',' TEKST ',' Imagelocation ');" />

<Span id = "Imagelocation"> </ span>

3 Lagre siden din og legge det i en nettleser. Klikk på knappen, og bildet vises med sin bildetekst. Plasseringen av bildet er det samme som tom span med ID "Imagelocation." Du kan legge til flere spenn, hver med sin egen ID for å legge til flere bilder i forskjellige steder på siden med "InsertImage" -funksjonen. Ring "InsertImage" når du liker fra brukerinngangselementer eller andre Javascript-funksjoner.