L'élément IMG nous permet d'intégrer des images dans des documents HTML.
Pour intégrer une image, vous devez utiliser les attributs SRC et ALT, le code est le suivant:
<img src = "../ img / example / img-map.jpg" />
Effet d'affichage:
1 Entrez l'image dans l'hyperlien
Une utilisation courante de l'élément IMG consiste à créer un hyperlien basé sur l'image en combinaison avec l'élément A, le code est le suivant:
<a href = "autrepage.html"> <img src = "../ img / example / img-map.jpg" ismap /> </a>
La façon dont le navigateur affiche cette image n'est pas différente. Par conséquent, il est important de fournir aux utilisateurs des indices visuels qu'une image particulière représente un hyperlien. L'approche spécifique peut être d'utiliser CSS, qui est préférable de l'exprimer dans le contenu de l'image.
Si vous cliquez sur cette image, le navigateur accédera à l'URL spécifié par l'attribut HREF de l'élément parent A. L'application de l'attribut ismap à l'élément IMG crée une carte de réponse de branche côté serveur, ce qui signifie que les emplacements cliqués sur l'image seront attachés à l'URL. Par exemple, si l'emplacement de clic est à 8 pixels en haut de l'image et à 10 pixels sur le bord gauche, le navigateur accédera à l'adresse suivante:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
Le code suivant affiche le contenu dans OtherPage.html, qui contient un script simple pour afficher les coordonnées de la position de clic:
<body> <p> La coordonnée x est <b> <span id = "xco"> ?? </span> </b> </p> <p> La coordonnée y est <b> <span id = "yco"> ?? </span> </b> </p> <script type = "application / javascript"> var coords = window.location.href.split ('?') [1] .split (','); document.getElementById ("xco"). innerHtml = coordonnées [0]; document.getElementById ("yco"). innerhtml = coordonnées [1]; </cript> </body>La façon dont le navigateur affiche cette image n'est pas différente. Par conséquent, il est important de fournir aux utilisateurs des indices visuels qu'une image particulière représente un hyperlien. L'approche spécifique peut être d'utiliser CSS, qui est préférable de l'exprimer dans le contenu de l'image.
Si vous cliquez sur cette image, le navigateur accédera à l'URL spécifié par l'attribut HREF de l'élément parent A. L'application de l'attribut ismap à l'élément IMG crée une carte de réponse de branche côté serveur, ce qui signifie que les emplacements cliqués sur l'image seront attachés à l'URL. Par exemple, si l'emplacement de clic est à 8 pixels en haut de l'image et à 10 pixels sur le bord gauche, le navigateur accédera à l'adresse suivante:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
Le code suivant affiche le contenu dans OtherPage.html, qui contient un script simple pour afficher les coordonnées de la position de clic:
<body> <p> La coordonnée x est <b> <span id = "xco"> ?? </span> </b> </p> <p> La coordonnée y est <b> <span id = "yco"> ?? </span> </b> </p> <script type = "application / javascript"> var coords = window.location.href.split ('?') [1] .split (','); document.getElementById ("xco"). innerHtml = coordonnées [0]; document.getElementById ("yco"). innerhtml = coordonnées [1]; </cript> </body>Vous pouvez voir l'effet du clic de souris:
Le graphique de réponse de partition côté serveur signifie généralement que le serveur répondra différemment en fonction de la zone de clic de l'utilisateur sur l'image, comme renvoyer différentes informations de réponse. Si l'attribut ismap sur l'élément IMG est omis, les coordonnées du clic de souris ne seront pas incluses dans l'URL de demande.
2 Créer un diagramme de réponse de partition client
Nous pouvons créer une carte de réponse de partition du client et laisser le navigateur naviguer vers différentes URL en cliquant sur différentes zones sur une image. Ce processus ne nécessite pas de démarrage via le serveur, de sorte que les éléments sont utilisés pour définir les zones individuelles de l'image et le comportement qu'ils représentent. L'élément clé du graphique de réponse de partition du client est une carte, qui contient un ou plusieurs éléments de zone, chacun représentant une zone sur l'image qui peut être cliquée.
Les propriétés de l'élément de zone peuvent être divisées en deux catégories. La première catégorie traite de l'URL que le navigateur naviguera après que la zone d'image représentée par la zone est cliquée par l'utilisateur. La figure suivante présente ce type d'attribut, qui est similaire aux attributs correspondants observés sur d'autres éléments.
La deuxième catégorie contient des attributs plus intéressants: la forme et les attributs de coords. Ces propriétés peuvent être utilisées pour indiquer chaque zone d'image sur laquelle l'utilisateur peut cliquer. Les propriétés de forme et de coords fonctionnent ensemble. La signification de l'attribut coords dépend de la valeur de l'attribut de forme, comme indiqué dans la figure ci-dessous:
Après avoir introduit ces éléments, donnez un exemple, le code est le suivant:
<body> <img src = "../ img / example / img-map.jpg" ismap usemap = "# mymap" /> <map name = "mymap"> <zone href = "javascript: show_page (1)" shape = "rect" coords = "'' 34,60,196 230" /> <area href = "JavaScript: show_page (2)" shape = "rect" coords = "'210,60,370,230" /> <area href = "javascript: show_page (3)" forme = "rect" coords = "' 383,60,545,230" /> </ map> </ script type = "application / javascript"> fure show_page (num) {// Affichez le produit via la boîte de dialogue pour indiquer l'alerte de page de saut correspondante ("Ceci est produit" + num); } </cript> </ body>L'effet d'affichage est le même, sauf que lorsque vous cliquez sur l'image du produit correspondant, le nom du produit correspondant apparaîtra, indiquant la page du produit sautée.
L'article ci-dessus JavaScript Basics_simple implémentation d'images embarquées est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.