recherche

Maison  >  Article  >  interface Web  >  Bases de Javascript (implémentation simple d'images intégrées)

Bases de Javascript (implémentation simple d'images intégrées)

亚连
亚连original
2018-05-21 09:43:521063parcourir

Maintenant, je vais vous apporter les bases de Javascript (implémentation simple d'images intégrées). Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde. 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" alt="Products Image" width="580" height="266" />

Effet d'affichage :

1 Intégrer des images dans des hyperliens

Une utilisation courante de l'élément img consiste à créer un lien hypertexte basé sur une image en combinaison avec l'élément a. Le code est le suivant : 

<a href="otherpage.html">
  <img src="../img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" />
</a>
Affichage du navigateur La façon dont cette image fonctionne n'est pas différente. Par conséquent, il est important de fournir aux utilisateurs des indications visuelles indiquant qu’une image particulière représente un hyperlien. La méthode spécifique peut consister à utiliser CSS, et il est préférable de l'exprimer dans le contenu de l'image.

Si vous cliquez sur ce type d'image, le navigateur naviguera vers l'URL spécifiée par l'attribut href de l'élément parent a. L'application de l'attribut ismap à l'élément img crée un graphique de réponse partielle côté serveur, ce qui signifie que l'emplacement du clic sur l'image est ajouté à l'URL. Par exemple, si le clic est à 8 pixels du haut de l'image et à 10 pixels du bord gauche, le navigateur naviguera vers l'adresse suivante : 

https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8
Le code suivant affiche le contenu dans une autre page. html, Il contient un script simple qui affiche les coordonnées de l'emplacement du clic : 

<body>
<p>The X-coordinate is <b><span id="xco">??</span></b></p>
<p>The Y-coordinate is <b><span id="yco">??</span></b></p>
<script type="application/javascript">
  var coords = window.location.href.split(&#39;?&#39;)[1].split(&#39;,&#39;);
  document.getElementById("xco").innerHTML = coords[0];
  document.getElementById("yco").innerHTML = coords[1];
</script>
</body>
Il n'y a aucune différence dans la façon dont les navigateurs affichent cette image. Par conséquent, il est important de fournir aux utilisateurs des indications visuelles indiquant qu’une image particulière représente un hyperlien. La méthode spécifique peut consister à utiliser CSS, et il est préférable de l'exprimer dans le contenu de l'image.

Si vous cliquez sur ce type d'image, le navigateur naviguera vers l'URL spécifiée par l'attribut href de l'élément parent a. L'application de l'attribut ismap à l'élément img crée un graphique de réponse partielle côté serveur, ce qui signifie que l'emplacement du clic sur l'image est ajouté à l'URL. Par exemple, si le clic est à 8 pixels du haut de l'image et à 10 pixels du bord gauche, le navigateur naviguera vers l'adresse suivante : 

https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8
Le code suivant affiche le contenu dans une autre page. html, Il contient un script simple pour afficher les coordonnées de l'emplacement du clic : 

<body>
<p>The X-coordinate is <b><span id="xco">??</span></b></p>
<p>The Y-coordinate is <b><span id="yco">??</span></b></p>
<script type="application/javascript">
  var coords = window.location.href.split(&#39;?&#39;)[1].split(&#39;,&#39;);
  document.getElementById("xco").innerHTML = coords[0];
  document.getElementById("yco").innerHTML = coords[1];
</script>
</body>
Vous pouvez voir l'effet du clic de souris :

Les graphiques de réponse partitionnés côté serveur signifient généralement que le serveur réagira différemment, par exemple en renvoyant des informations de réponse différentes, en fonction de la zone sur laquelle l'utilisateur clique sur l'image. 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 la requête.

2 Créer un graphique de réponse de partition côté client

Nous pouvons créer un graphique de réponse de partition côté client et laisser le navigateur naviguer vers différentes zones en cliquant sur différentes zones sur une image sur l'URL. Ce processus n'a pas besoin d'être démarré via un serveur, les éléments sont donc utilisés pour définir les différentes zones de l'image et le comportement qu'elles représentent. L'élément clé du graphique de réponse de partition côté client est map. L'élément map contient un ou plusieurs éléments de zone, dont chacun représente une zone cliquable sur l'image.

Les attributs de l'élément zone peuvent être divisés en deux catégories. La première catégorie concerne l'URL vers laquelle le navigateur naviguera après que l'utilisateur a cliqué sur la zone d'image représentée par la zone. Le diagramme ci-dessous illustre cette classe de propriétés, qui sont similaires aux propriétés correspondantes vues sur d'autres éléments.

La deuxième catégorie contient des attributs plus intéressants : les attributs de forme et de coordonnées. Vous pouvez utiliser ces attributs pour indiquer différentes zones de l'image sur lesquelles l'utilisateur peut cliquer. Les propriétés de forme et de coordonnées fonctionnent ensemble. La signification de l'attribut coords dépend de la valeur de l'attribut shape, comme le montre la figure suivante :

Après avoir introduit ces éléments, par exemple, le code est le suivant : 

<body>
  <img src="../img/example/img-map.jpg" ismap alt="Products Image" usemap="#mymap" width="580" height="266" />

<map name="mymap">
  <area href="javascript:show_page(1)" shape="rect" coords="&#39;34,60,196,230" alt="product 1" />
  <area href="javascript:show_page(2)" shape="rect" coords="&#39;210,60,370,230" alt="product 2" />
  <area href="javascript:show_page(3)" shape="rect" coords="&#39;383,60,545,230" alt="product 3" />
</map>

<script type="application/javascript">
   function show_page(num){
     //通过对话框显示产品，表示对应的跳转页面
     alert("This is product "+num);
   }
</script>
</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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Expression de fonction JavaScript (tutoriel image et texte)

Expression de fonction JavaScript (tutoriel image et texte) ) )

JavascriptMécanisme d'héritage (réponses détaillées, tutoriel graphique)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Interprétation détaillée des méthodes d'itération et de fusion en Javascript (tutoriel graphique)Article suivant：Interprétation détaillée des méthodes d'itération et de fusion en Javascript (tutoriel graphique)

Articles Liés

Voir plus