Bases de Javascript (implémentation simple d'images intégrées)-js tutoriel-php.cn

Maison

interface Web

js tutoriel

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

亚连

May 21, 2018 am 09:43 AM

javascriptjs简单

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="/static/imghwm/default1.png"  data-src="../img/example/img-map.jpg"  class="lazy"   alt="Products Image"    style="max-width:90%"  style="max-width:90%" />

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="/static/imghwm/default1.png"  data-src="../img/example/img-map.jpg"  class="lazy"   ismap alt="Products Image"    style="max-width:90%"  style="max-width:90%" />
</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.

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="/static/imghwm/default1.png"  data-src="../img/example/img-map.jpg"  class="lazy"   ismap alt="Products Image" usemap="#mymap"    style="max-width:90%"  style="max-width:90%" />

<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 connexe

Moteurs JavaScript: comparaison des implémentationsApr 13, 2025 am 12:05 AM

Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.

Au-delà du navigateur: Javascript dans le monde réelApr 12, 2025 am 12:06 AM

Les applications de JavaScript dans le monde réel incluent la programmation côté serveur, le développement des applications mobiles et le contrôle de l'Internet des objets: 1. La programmation côté serveur est réalisée via Node.js, adaptée au traitement de demande élevé simultané. 2. Le développement d'applications mobiles est effectué par le reactnatif et prend en charge le déploiement multiplateforme. 3. Utilisé pour le contrôle des périphériques IoT via la bibliothèque Johnny-Five, adapté à l'interaction matérielle.

Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AM

J'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant

Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Cet article démontre l'intégration frontale avec un backend sécurisé par permis, construisant une application fonctionnelle EdTech SaaS en utilisant Next.js. Le frontend récupère les autorisations des utilisateurs pour contrôler la visibilité de l'interface utilisateur et garantit que les demandes d'API adhèrent à la base de rôles

JavaScript: Explorer la polyvalence d'un langage WebApr 11, 2025 am 12:01 AM

JavaScript est le langage central du développement Web moderne et est largement utilisé pour sa diversité et sa flexibilité. 1) Développement frontal: construire des pages Web dynamiques et des applications à une seule page via les opérations DOM et les cadres modernes (tels que React, Vue.js, Angular). 2) Développement côté serveur: Node.js utilise un modèle d'E / S non bloquant pour gérer une concurrence élevée et des applications en temps réel. 3) Développement des applications mobiles et de bureau: le développement de la plate-forme multiplateuse est réalisé par réact noral et électron pour améliorer l'efficacité du développement.

L'évolution de JavaScript: tendances actuelles et perspectives d'avenirApr 10, 2025 am 09:33 AM

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

Démystifier javascript: ce qu'il fait et pourquoi c'est importantApr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Python ou JavaScript est-il meilleur?Apr 06, 2025 am 12:14 AM

Python est plus adapté à la science des données et à l'apprentissage automatique, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python est connu pour sa syntaxe concise et son écosystème de bibliothèque riche, et convient à l'analyse des données et au développement Web. 2. JavaScript est le cœur du développement frontal. Node.js prend en charge la programmation côté serveur et convient au développement complet.

See all articles