Hvordan bruke img src i HTML

Ved hjelp av en touch av Javascript kan du legge til kraftige bildemanipulering evner til ditt nettsted. Site eiere lage bilder vises på websider ved å legge til "img" koder til deres HTML-dokumenter. Hver img tag inneholder en src eiendom. At HTML-hotellet har en verdi som peker til nettadressen til et bilde som ligger på nettet. For å lage et bilde endring til en ny --- slik en når en bruker klikker på en knapp --- endre img-taggen er src verdi til nettadressen til et annet bilde.

Bruksanvisning

1 Åpne en HTML-editor og legge i ett av dine web sider. Legg til følgende img-taggen til dokumentets "body" -delen:

<Img id = "Image1" alt = "Mitt bilde" onmouseover = "changeSrc ( 'Image1', 'New_Image.jpg');" />

Den første setningen definerer en img tag og setter sin src eiendom til Main_Image.jpg. Bytt Main_Image.jpg med navnet på et bilde på harddisken eller nettadressen til et bilde på nettet. Dette img tag inneholder også en onmouseover hendelsen. Dette gjør det mulig å demonstrere nettleserens evne til å bytte bilder. Den onmouseover hendelsen krever en Javascript-funksjon kalt changeSrc. Legg merke til de to parametrene etter ordet changeSrc: dette er de parametere som sendes til Javascript-funksjonen. Den første parameteren er img tag id verdi. At verdien i dette eksempelet er Image1. Den andre parameteren inneholder navnet på bildet du ønsker å ha vises når du holder markøren over hovedbildet. Det bildet heter New_Image.jpg i dette eksempelet. Bytt New_Image.jpg med navnet på en faktisk bilde på datamaskinen eller nettadressen til et bilde på nettet.

2 Legg denne HTML koden under koden vist i forrige trinn:

<Input type = "button" value = "Change img src" onclick = "changeSrc ( 'Image1', 'New_Image.jpg');" />

Dette skaper en knapp. Dens onclick hendelsen krever samme Javascript-funksjonen beskrevet i onmouseover funksjonen i forrige trinn. Denne knappen kan du vise bilde swapping ved å klikke på en knapp.

3 Plasser denne Javascript-kode i dokumentet er "head" -seksjonen:

<Script type = "text / javascript">

funksjon changeSrc (imageID, newsrc) {

var imageObject = document.getElementById(imageID);

imageObject.src = newsrc;

} </ Script>

Denne funksjonen godtar id og nye bilde verdier vedtatt av onmouseover og onclick hendelser. Funksjonen henter en referanse til bildet objektet med getElementByID funksjon, og erstatter det bildet er src med src peker på det andre bildet.

4 Lagre HTML-dokumentet og åpne den i en nettleser. Nettleseren viser bildet du har definert i img-taggen src eiendom.

5 Klikk på knappen eller beveger musen over bildet. Javascript-koden går og endrer img-taggen src til det andre bildet du har definert. Nettleseren din viser det bildet.

Hint

  • Hvert bilde som du legger til en webside må ha en unik ID verdi. Hvis du refererer til et bilde som ligger på en annen webserver, sjekk websiden jevnlig for å kontrollere at siden din vises bildet riktig. Hvis et nettsted eieren fjerner et bilde eller endrer navn, kan siden din ikke vil vise bildet.