Le problème est énorme mais la tâche est très simple.
J'ai une image de fond avec la petite fleur dessus. J'ai besoin d'une action à effectuer lorsque l'utilisateur appuie dessus. Cependant, la fleur est placée sur des zones totalement différentes d'un écran en fonction de la résolution de l'écran.
Comment pourrais-je connecter "petite fleur" avec une zone de survol pour a: href?
<style>
body {
background-image: url(images/bg.jpg);
}
</style>
<body>
<div>
<h1><a href=#>press it where small flower is situated on an page</a></h1>
</div>
</body>
Laissez-moi vous donner un exemple. J'ai donc besoin de DIFFÉRENTS LIENS WEB lorsque la fleur d'oranger a été pressée ou d'un lien bleu différent pour les fleurs blanches et ainsi de suite. S'il s'agit d'un écran, je le divise simplement pour quelques carrés virtuels, mais c'est absolument nul de le faire pour de nombreuses résolutions différentes: 
3 Réponses :
Cette réponse ne fonctionnera que si l'image est chargée dans la balise. Si l'image d'arrière-plan a la petite fleur et qu'elle se déplace, vous ne pourrez pas identifier quand un utilisateur clique sur la fleur via une étiquette. Vous aurez besoin d'une solution beaucoup plus sophistiquée.
<a href="javascript:void(0);" onClick="alert('you clicked the image')">Image</a>
Merci pour un soutien. Mais malheureusement, cela ne fonctionnera pas car j'ai besoin de quelques liens Web différents sur une seule image.
@vppy Après avoir mis à jour votre question, j'ai réalisé que ma solution ne fonctionnera pas pour vous.
Vous devez le faire manuellement.
Oui, c'est exactement ce que je recherche. Cependant, comment pourrais-je faire cela pour de nombreux écrans différents multipliés sur de nombreuses images différentes?
Je veux dire que sur certains écrans, la fleur est sur une position tandis qu'à une autre résolution d'écran, elle est sur une autre.
Cela n'a pas d'importance. Vous devez obtenir la position de la souris par rapport à l’image et non par rapport à l’écran.
Mais en est-il de même pour le 400x600 et le 2048 × 1080?
Ah, ok, vous servez des images différentes en fonction de la résolution. Eh bien, je suppose que le rapport d'image est constant, alors obtenez la largeur de l'image avec JavaScript, puis faites simplement le calcul.
La dernière réponse proposait une bonne solution: davidjbradshaw.com/imagemap-resizer/example On dirait quelque chose Je cherchais. Quoi qu'il en soit, appréciez votre solution et votre soutien. Je vous souhaite une bonne année et bonne chance dans tous vos projets.
Pareil pour toi :)
créez une carte
utilisez Générateur de cartes d'images en ligne gratuit
définir les URL
générer du code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://i.stack.imgur.com/l35x9.jpg" usemap="#image-map1" class="img-fluid" >
</div>
</div>
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://i.stack.imgur.com/l35x9.jpg" usemap="#image-map2" class="img-fluid" >
</div>
</div>
<div class="row">
<div class="col-sm">
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://i.stack.imgur.com/l35x9.jpg" usemap="#image-map3" class="img-fluid" >
</div>
</div>
</div>
<map name="image-map1">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="39,686,204,502" shape="rect">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="981,533,789,390" shape="rect">
<area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com?q=Pink+flower" coords="517,318,781,556" shape="rect">
<area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com?q=light+pink+flower" coords="449,438,21,278" shape="rect">
</map>
<map name="image-map2">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="39,686,204,502" shape="rect">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="981,533,789,390" shape="rect">
<area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com?q=Pink+flower" coords="517,318,781,556" shape="rect">
<area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com?q=light+pink+flower" coords="449,438,21,278" shape="rect">
</map>
<map name="image-map3">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="39,686,204,502" shape="rect">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="981,533,789,390" shape="rect">
<area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com?q=Pink+flower" coords="517,318,781,556" shape="rect">
<area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com?q=light+pink+flower" coords="449,438,21,278" shape="rect">
</map>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://rawgit.com/davidjbradshaw/imagemap-resizer/master/js/imageMapResizer.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('map').imageMapResize();
});
</script>
</body>
</html>
</body>
</html>
Démo en direct 1 - Code - cliquez sur l'aperçu après l'ouverture
<!DOCTYPE html>
<html>
<head>
<title>HTML area Tag</title>
</head>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://i.stack.imgur.com/l35x9.jpg" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="39,686,204,502" shape="rect">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="981,533,789,390" shape="rect">
<area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com?q=Pink+flower" coords="517,318,781,556" shape="rect">
<area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com?q=light+pink+flower" coords="449,438,21,278" shape="rect">
</map>
</body>
</html>
utilisé imageMapResizer + jquery + bootstrap
a> <!-- Image Map Generated by http://www.image-map.net/ -->
<img src="l35x9.jpg" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com/q=yelow+flower" coords="39,686,204,502" shape="rect">
<area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com/q=yelow+flower" coords="981,533,789,390" shape="rect">
<area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com/q=Pink+flower" coords="517,318,781,556" shape="rect">
<area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com/q=light+pink+flower" coords="449,438,21,278" shape="rect">
</map>
html - Image map responsive - Stack Overflow
stowball / jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin
Plugin jQuery Responsive Image Maps
davidjbradshaw / image-map -resizer: Cartes d'images HTML réactives
html - Comment utiliser usemap dans l'url d'arrière-plan div - Stack Overflow
Parfait! Ce lien est le même type de tâche que j'ai posé la question: davidjbradshaw.com/imagemap-resizer/example
Merci pour votre soutien. Merci d'avoir partagé cette solution ici!
Vos solutions sont vraiment géniales. Cela aide à rendre cette grille très rapide. Cependant, j'ai essayé d'y ajouter un style réactif et des zones où ont migré des fleurs.
Il semble donc qu'une astuce supplémentaire pour les images réactives soit nécessaire.
voir les liens vers le haut Plus sur la carte Plugin jQuery pour images réactives
Super merci! J'ai vu que cela fonctionne avec des plugins. J'apprécie votre soutien et vous souhaite de nombreux bons projets dans l'année.
Démo Image Map @vppy responsive - tutorialspoint.com/cg/assets/yWh7N5.php
Hou la la! Je n'ai jamais rencontré quelqu'un d'aussi rapide et de soutien que vous. J'apprécie vraiment vos efforts et je suppose que vous êtes vraiment maître en codage.
resolution \ location ne prendra pas en compte la balise A va toujours être déclenchée quand elle est cliquée tant que l'image est à l'intérieur, mais actuellement votre href ne déclenche rien
< img src = 'flower.gif'>Avez-vous un exemple de l'image de la fleur? Voulez-vous une reconnaissance d'image?
@vppy vous pouvez essayer d'obtenir la couleur du pixel sur lequel vous avez cliqué, je pense que three.js a / fait quelque chose comme ça.