How to find a right place on a webpage to make a click?

Question

The trouble is huge but a task is very simple.

I have a background image with the small flower on it. I need some action to be done when user press on it. However flower is placed on totally different areas of a screen depending of screen's resolution.

How could I connect "small flower" with a hover zone for 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>

Let me give you an example. So I need DIFFERENT WEBLINKS when orange flower was pressed or a blue one and third different weblink for white flowers and so on. If it is one screen I just divide it for some virtual squares but it absolutely rubbish to do so for many different resolutions:

resolution\location wont mater the A tag is still going to be triggered when its clicked on as long as the image is inside of it, but currently your href does not trigger anything `` — , Jan 06 '19 at 01:00
Do you have an example of the flower image? Are you wanting image recognition? — mbunch, Jan 06 '19 at 01:01
@vppy you could try getting the color of the pixel that was clicked, I think three.js has/does something like this. — mbunch, Jan 06 '19 at 01:11

Mohamed Elrashid · Accepted Answer · 2019-01-06T02:32:08.973

use usemap

Step 01

crate a map

use Free Online Image Map Generator

Step 02

set urls

Step 03

generate code

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

Step 04 :Image Map Demo - non responsive

Live demo 1 - View

Live demo 1 - Code - click preview after you open

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

Step 05 Image Map Demo - responsive

Live demo 2 - View

Live demo 2 - Code - click preview after you open

used imageMapResizer + jquery + bootstrap

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

More on map

HTML img usemap Attribute

html - Responsive image map - Stack Overflow

stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin

Responsive Image Maps jQuery Plugin

davidjbradshaw/image-map-resizer: Responsive HTML Image Maps

html - How using usemap in div background url - Stack Overflow

How to create clickable areas in an image in HTML

Perfect! This link is the same type of task which I have asked about: http://davidjbradshaw.com/imagemap-resizer/example/ — vppy, Jan 06 '19 at 01:19
Thank you for your support. Appreciate you have shared this solution here! — vppy, Jan 06 '19 at 01:19
Your solutions is really awesome. It helps to make this grid really fast. However I have tried to add a responsive style to it and areas where migrated from flowers. — vppy, Jan 06 '19 at 01:37
So, looks like some additional trick for responsive images is needed. — vppy, Jan 06 '19 at 01:38
see the links up on More on map Responsive Image Maps jQuery Plugin — Mohamed Elrashid, Jan 06 '19 at 01:38
Great, Thank you! I have seen it works with plugins. Appreciate your support and wish you many good projects in the year. — vppy, Jan 06 '19 at 01:40
@vppy responsive Image Map Demo - https://www.tutorialspoint.com/cg/assets/yWh7N5.php — Mohamed Elrashid, Jan 06 '19 at 02:33
Wow! I have never met someone who so much fast and supportive as you are. I really appreciate your efforts and I suppose that you are really Master in coding. — vppy, Jan 06 '19 at 03:24

score 1 · Answer 2 · answered Jan 06 '19 at 01:03

1

This answer will only work if the image is loaded within the tag. If the background image has the small flower and it moves around, you wont be able to identify when a user clicks the flower via an tag. You will need much a more sophisticated solution.

<a href="javascript:void(0);" onClick="alert('you clicked the image')">Image</a>

answered Jan 06 '19 at 01:03

mbunch

560
7
21

Thank you for a support. But unfortunately it will not work because I need few different weblinks on a sole image. – vppy Jan 06 '19 at 01:07
1

@vppy After you updated your question, I realized that my solution will not work for you. – mbunch Jan 06 '19 at 01:08

score 1 · Answer 3 · answered Jan 06 '19 at 01:08

1

You need to do it manually.

Define the position of the flower inside your image, i.e., the area that will trigger the event when clicked.
Set an event handler for the click event on the body element.
Get the position of the mouse when the user clicked on the image.
Compare that position with the defined area for the flower.

answered Jan 06 '19 at 01:08

David

6,695
3
29
46

Yes, that's exact what do I am looking for. However, how could I make this for many different screens multiplied on many different images? – vppy Jan 06 '19 at 01:10
I mean that on some screen flower is on one position while at other screen resolution it is on a different one. – vppy Jan 06 '19 at 01:11
It doesn't matter. You have to get the position of the mouse *relative to the image*, not relative to the screen. – David Jan 06 '19 at 01:15
But is it the same for 400x600 and for 2048×1080 ? – vppy Jan 06 '19 at 01:16
Ah, ok, you are serving different images depending on the resolution. Well, I guess the picture ratio is constant so get the width of the picture with JavaScript and then simply do the math. – David Jan 06 '19 at 01:18
Last answer proposed a good solution: http://davidjbradshaw.com/imagemap-resizer/example/ Looks like something I was looking for. Anyway, appreciate for your solution and support. Wish you a good year and good luck in all of your projects. – vppy Jan 06 '19 at 01:20
1

Same for you :) – David Jan 06 '19 at 01:22