Comment intégrer des images dans des éléments HTML-tutoriel HTML-php.cn

Comment intégrer des images dans des éléments HTML

php中世界最好的语言

Libérer： 2018-01-22 10:45:42

original

1600 Les gens l'ont consulté

Cette fois, je vais vous montrer comment intégrer des images dans des éléments HTML et quelles sont les précautions pour intégrer des images dans des éléments HTML. Voici des cas pratiques. .

1 Intégrer une image dans un lien hypertexte

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. suit :

<a href="otherpage.html">  
    <img src="../img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" />  
</a>

Copier après la connexion

Il n'y a aucune différence dans la façon dont le navigateur affiche 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

Copier après la connexion

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>

Copier après la connexion

Les graphiques de réponse de partitionnement côté serveur signifient généralement que le serveur répond en fonction de l'endroit où le l'utilisateur a cliqué sur l'image Différentes régions réagissent différemment, par exemple en renvoyant des informations de réponse différentes. 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 une 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 URL en cliquant sur différentes zones d'une image. 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, chacun représentant 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>

Copier après la connexion

L'effet d'affichage est le même. Oui, cliquez simplement sur l'image du produit correspondant et le nom du produit correspondant apparaîtra, indiquant la page du produit sautée.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Exemples détaillés de formatage de texte HTML

Liste ordonnée HTML, liste non ordonnée et définir le fonctionnement de la liste doit être utilisé

Quel est le format en ligne du tableau HTML

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!