Dynamic click area for image used as hyperlink

Question

header .logo a{
    background-image: url("xxxxxxxxxxxxxxx");
    background-size:100%;
    background-repeat: no-repeat;
    height: 115px;
    width:200px;
    display: inline-flex;
    position: relative;
    text-indent: -90000px;   
}

I'm just getting into some HTML/CSS because I'm trying to develop a website for my job. I currently have a logo that I want to use as a homepage hyperlink which is all working successfully. However, the logo is a word that is underlined and the underline extends further down vertically basically turning the picture into an additional 100 pixels vertically when most of the image is in contained in the first 50 pixels (hopefully this makes sense). Basically, I want to be able to customize a region of the hyperlink where I basically only need to hover over the image itself and not the invisible box that I have created in order to make the whole logo visible. Can someone help with this?

The arrow indicates where the I don't want the cursor to turn into the hyperlink hand cursor. I only want the hyperlink to be the exact dimensions of the image and not a box around the image.

The arrow indicates where the I don't want the cursor to turn into the hyperlink hand cursor. I only want the hyperlink to be the exact dimensions of the image and not a box around the img.

_"hopefully this makes sense"_ It didn't. Post a [mcve] please — j08691, Sep 23 '20 at 20:16
See https://stackoverflow.com/questions/18560097/how-to-make-a-section-of-an-image-a-clickable-link. — isherwood, Sep 23 '20 at 20:37

score 0 · Answer 1 · answered Sep 23 '20 at 21:33

You can use an image map for this! If you google "image map generator" you can build it yourself using online tools to the shape you want (rectangle, circle, or polygon). The generator should give you the area tags and the specific coords for your logo. You will have to put an image tag in place of your link tag and remove the background- stuff in your css:

<map name="logoMap">
  <area shape="circle" coords="337,300,44" alt="Nike Homepage" href="/index.html">
</map>

<img src="/images/xxxxxxxxxxxxxxx.png" width="200" usemap="#logoMap" />

Dynamic click area for image used as hyperlink

1 Answers1