IntroductionDid du vet att du kan ändra värdet på en HTML-bildkälla attribut? Om du gör det, skulle bilden som visas på webbläsaren förändras. I den här artikeln visar jag er effekterna av att ändra värdet på källattributet av bilden tag.You behöver grundläggande kunskaper i HTML, CSS och JavaScript för att kunna förstå detta article.Note: Om du inte kan se koden eller om du tror något saknas i den här artikeln (bruten länk, bild frånvarande), bara att kontakta mig på [email protected]. Det vill säga, kontakta mig för minsta problem du har om vad du är reading.html ElementAn HTML-element produceras av antingen en eller två taggar. Ett HTML-element är en del av webbsidan som du ser på webbläsaren. Bilden till exempel produceras av en tagg. Styckeelementet å andra sidan produceras av två taggar (start och slut-tagg). Presentationen av ett element är producerad av CSS. Presentation betyder utseende, placering och storlek på en element.
The Image Elementa enkel tagg för bildelementet är: Med den här bilden tag, skulle CSS presentationen ges av något liknande img # ID {width: 200px; height: 200px} I denna presentation positionen ges inte, men storleken ges. Under detta tillstånd, om du ändrar värdet för attributet src kommer du att se en annan bild på webbläsaren. Denna funktion är mycket praktiskt. Ändra käll AttributeThe DOM och JavaScript möjliggör du ändra värdet på bildkällan attributet. Syntaxen är: document.getElementById (ID) .src = URLThe uttryck, "document.getElementById (ID)" returnerar en referens till bildobjektet.
"src" är källan egendom bildobjektet. ID och webbadress måste varje vara inom citationstecken. ID är identifierare av bilden object.Resulting förenklad CodeIf det inte vore möjligt att ändra värdet på källattributet av en bild, sedan ändra en bild som du skulle behöva ändra hela taggen. Detta skulle leda till en mer komplicerad code.Advantages av att ändra värdet på källan Attribute- Den leder till en förenklad code.- Presentationen av den ursprungliga bilden bibehålls. När du ändrar värdet på källattributet är storlek och position där det tidigare bilden upprätthålls.
Detta kan vara mycket användbart i ett bildgalleri där du måste presentera en stor storlek bild för olika images.ExampleWhen du klickar på knappen i följande kod skulle den visade bilden förändras. Prova koden med två av dina egna bilder. Bilden och knappen är i ett HTML-objekt element. Bilden är i ett annat objekt element kapslat i den yttre objekt. Den yttre objekt är flöt rätt. "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">