CODEWITHSUNDEEP
htmlcssimagehyperlink
wpakt
wpakt

Reputation: 1083

Making an image clickable at a specific location

I'm trying to make a specific clickable location on my image. The image size adjusts dynamically to the size of the browser, so I need the clickable box to do that as well. I have created a box to contain my image (not sure if that is necessary) and thought that if I made a box (a.resume) within that container, it would adjust relative to the image. However, the box seem to be creating outside of the container, off-screen to the right.

Below is the CSS:

#banner {
    width: 100%;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

img.banner {
    max-width: 100%;
    height: auto;
    width: auto;
}

a.resume {
    top: 20%; 
    left: 35px; 
    width: 60%; 
    height: 28%;
    position: relative; 
    background-color: black; /* to see where my box is */
    display:block;
}

Below is the HTML:

<body>
<div id="banner">
    <img src="banner.png" class="banner" />
    <a href="banner1.png" class="resume" />
</div>
</body>

Also, I would appreciate it if you can let me know if I can simplify anything in my CSS or HTML. I'm new to this and I might be over complicating them.

Upvotes: 0

Views: 1251

Answers (1)

Dominic Romano
Dominic Romano

Reputation: 37

You'll need to use the HTML map tag. You can learn about it here

Upvotes: 2

Related Questions