IntroductionDid vous savez que vous pouvez changer la valeur d'une image source HTML attribuer? Si vous faites cela, l'image affichée au niveau du navigateur allait changer. Dans cet article, je vous montre les effets de la modification de la valeur de l'attribut source de l'image tag.You besoin des connaissances de base en HTML, CSS et JavaScript afin de comprendre ce article.Note: Si vous ne pouvez pas voir le code ou si vous pensez il manque quelque chose dans cet article (lien brisé, l'image absente), contactez-moi au [email protected].
Qui est, me contacter pour le moindre problème que vous avez à propos de ce que vous êtes élément reading.HTML ElementAn HTML est produite par un ou deux mots clés. Un élément HTML est un composant de la page web que vous voyez au niveau du navigateur. L'image par exemple est produite par une étiquette. L'élément Paragraphe de l'autre main est produite par deux balises (début et la balise de fin). La présentation d'un élément est produit par CSS.
Présentation signifie l'apparence, la position et la taille d'un élément image Elementa simples balise de l'élément d'image est: Avec cette balise d'image, la présentation de CSS serait donné par quelque chose comme img ID # {width: 200px; hauteur: 200px} Dans cette présentation, notamment la position est pas donné, mais la taille est donnée. Sous cette condition, si vous modifiez la valeur de l'attribut src vous verrez une image différente au niveau du navigateur. Cette fonction est très pratique.
Modification de la Source AttributeThe DOM et JavaScript vous permettent de changer la valeur de l'attribut source de l'image. La syntaxe est: document.getElementById (ID) .src = URLThe expression, «document.getElementById (ID)" renvoie une référence à l'objet de l'image. "src" est la propriété de source de l'objet de l'image. ID et l'URL doivent chacun être entre guillemets. ID est l'identifiant de l'image object.Resulting simplifié CodeIf il était pas possible de changer la valeur de l'attribut source d'une image, puis de changer l'image que vous souhaitez avoir à changer toute la balise.
Cela conduirait à une code.Advantages plus complexes de changer la valeur de la Source Attribute- Elle conduit à une présentation simplifiée code.- L'de l'image originale est maintenue. Lorsque vous modifiez la valeur de l'attribut source, la taille et la position de l'image précédente est maintenue. Cela peut être très utile dans une galerie d'images où vous devez présenter une image de grande taille pour images.ExampleWhen différent, vous cliquez sur le bouton du code ci-dessous, l'image affichée ne change. Essayez le code avec deux de vos propres images.
L'image et le bouton est dans un élément HTML de l'objet. L'image est dans un autre élément de l'objet imbriqué dans l'objet externe. L'objet externe est flottait droite. "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">