Numerous hyperlinks leading to different products within the same image

I am looking for a solution to create clickable links on a picture that contains multiple items (3 in my specific case, as shown in the image above). Currently, I am using position:absolute to place links on each item, but this method is causing overlap issues. I want to avoid using image mapping.

<div class="col-md-12">
    <a href="google.com" style="position: absolute;width: 149px;height: 240px;margin-left: 26%;"></a>
    <a href="yahoo.com" style="margin-left: 35%;position: absolute;width: 167px;height: 240px;"></a>
    <a href="index.com" style="margin-left: 45%;position: absolute;width: 151px;height: 240px;"></a>
    <img src="imagelink" alt="" class="col-md-12">
</div>
htmlcss

Answer №1

If you prefer not to use image-mapping, you can adjust the width and margin-left properties to prevent overlap. Keep in mind that the percentage-based margin-left properties will expand based on the parent's size, so consider using fixed values instead.

The specific values needed will vary depending on your image.

Below is a functional example with borders added to highlight the clickable areas:

a:first-of-type {
  border: 5px solid red;
  position: absolute;
  width: 85px;
  height: 140px;
  margin-left: 195px;
}

a:nth-of-type(2) {
  border: 5px solid blue;
  margin-left: calc(195px + 85px + 10px); /* Previous offset + width + borders */
  position: absolute;
  width: 100px;
  height: 240px;
}

a:last-of-type {
  border: 5px solid green;
  margin-left: calc(290px + 100px + 10px); /* Previous offset + width + borders */
  position: absolute;
  width: 92px;
  height: 240px;
}

img {
  margin: 0 auto;
  display: block;
}
<div>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <img src="http://placehold.it/400">
</div>

I hope this explanation proves useful! :)

Answer №2

To achieve the desired layout, you can utilize a mix of left and translate. Take a look at the code snippet provided below.

a{
background-color:red;
position: absolute;
width:150px;
height:150px;
}
a#fir{
left:0;
}
a#two{
left:50%;
transform:translateX(-50%);
}
a#thr{
right:0;
}
<div class="col-md-12">
    <a id="fir" href="google.com"></a>
    <a id="two" href="yahoo.com"></a>
    <a id="thr" href="index.com"></a>
    <img src="http://www.rokkorfiles.com/photos/360PX.jpg" alt="" class="col-md-12" style="width:100%;display:block;">
</div>

Answer №3

For creating interactive image links, you can utilize an image map

Check out this demo fiddle

To redirect users to different links by clicking on specific areas of an image:

Here is the HTML code snippet for implementing this:

<img src="https://www.w3schools.com/html/pic_mountain.jpg" usemap="#yourmap" border="0">
<map name="yourmap">
<area shape="rect" coords="0,0,50,50" href="https://www.google.com/" target="_blank">
<area shape="rect" coords="150, 150, 100, 100" href="https://www.yahoo.com/" target="_blank">
</map>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The overflow-x property causes the left side of the component to be cut off when scrolling

When the screen width is insufficient to display a component properly, I need it to be horizontally scrollable. However, when scrolling to the left after making it scrollable due to a smaller screen size, the left side of the component gets cut off and can ...

cssreactjsstyled-components

Which web browser(s) can properly display the CSS property display: run-in?

Compatibility with IE7 and FF2.0 Suitable for IE8 and Opera 9+ Works only on IE7 Optimized for IE8 and FF3.5 Supports IE7 and Safari This question came up in a quiz, but I don't have all the browsers to test it. Any assistance would be greatly apprec ...

css

Using Angular and ASP.NET for image uploading functionality

Trying to source the image from the PC and upload it into the database as "Images/aaa.jpg". I am relatively new to Angular and have attempted an example that did not work for me. I have been stuck on this issue for almost 3 days trying to find a solution. ...

c#htmlasp.netangularjs

Ways to ensure a video completely fills the frame

I am experiencing an issue where the video in the main div of my home page does not fully fill the div right away - I have to refresh the page for this to happen. As a result, there is black space on the left and right sides. Interestingly enough, this pr ...

javascriptjqueryhtmlcsshtml5-video

Exploring the process of web scraping from dynamic websites using C#

I am attempting to extract data from using HtmlAgilityPack. The website is dynamic in nature, displaying content after the page has fully loaded. Currently, my code retrieves the HTML of the loading bar using this method, but encounters a TargetInvocation ...

javascriptc#html

Utilize the :not() selector in combination with the :first-child() selector

Currently, I am seeking a method to merge two css selectors together in order to target specific elements. The selectors I am attempting to combine are ':not' and ':first-of-type'. Here is the code snippet that represents my current sit ...

htmlcsscss-selectors

Choosing the image that represents your website in Safari web previews

Every time I check iCloud.com on my Safari top sites, the thumbnail is always the same. I'm curious about how I can automate this for my own website. ...

javascripthtmlcss

Placing an emblem after the header wording

Within my h1 tag, I have a header text that I would like to display alongside a small icon on the right side. The length of the text can vary, which presents a challenge in alignment. I attempted to use a background image with no repeat, but it ends up p ...

htmlcssimagebackground

I'm having an issue with my progress bar in ReactJS - it seems to move when I scroll the window instead of

My code includes a progress bar that works fine - it shows a movable progress bar when the window is scrolled. However, I want the progress bar to move when scrolling inside my div, not on the entire window. I am currently using jQuery for this functionali ...

javascriptjquerycssreactjs

Is it possible to isolate specific HTML elements within a designated area?

Is it possible to identify which elements are located within a specific rectangular region on a web page identified by a URL? UPDATE: The default settings for screen resolution, font size, etc. can all be adjusted to reasonable values. ...

htmlurlscreen-scrapinghtml-content-extractionlayout-extraction

Background with funky Font Awesome colors

Font Awesome is working perfectly for me, but I'm experiencing an issue with strange borders appearing around the icons in Chrome. Interestingly, this problem doesn't occur in IE and Firefox browsers. What's even more peculiar is that the bo ...

htmlcsstwitter-bootstrapfont-awesome

Determine the time variance in hours and minutes by utilizing the keyup event in either javascript or jquery

There are 6 input fields, with 5 input boxes designated for time and the result expected to display in the 6th input box. See the HTML below: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input ty ...

javascriptjqueryhtmldatetimetime

Finding a jQuery DOM element without using a loop

Can the element in variable d be identified directly instead of looping through each function? Take a look at the DOM below: <!DOCTYPE html> <html lang="en"> <head> <title></title> <script src="../jquery-ui ...

jqueryhtmlcss

"Strategies for using Selenium in Python to simulate clicks without relying on class, id, or name attributes

I am currently attempting to locate the "X" button and click on it, but I am struggling to find a way to do so. Below is the HTML code for the element: <div style="cursor: pointer; float:right; border-radius: 3px; background-color: red; font-size: ...

javascriptpythonhtmlselenium

Show button image beyond the limits of the hyperlink

Is it possible to create a button with a background image that changes on hover and when active, while also having the active state display an image that extends beyond the anchor's bounds? Check out my sprite here: The top half of the sprite represe ...

htmlcss

Ways to relocate the menu within the confines of the "menu border"

Is it possible to move the menu inside the border on this webpage? I am new to web design and was thinking of using position:absolute for the links. Should I also move the submenu along with it? Any suggestions on how to achieve this? Thank you! The goal ...

htmlcssmenuposition

The custom color override feature in Bootstrap is not being applied as expected

I attempted to incorporate a new theme color into Bootstrap's color scheme, but encountered difficulties in getting it to work. To guide me through the process, I referred to this YouTube tutorial as well as the official Bootstrap documentation. Des ...

csstwitter-bootstrapsass

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

javascriptjqueryhtmlfilter

Error: Issue with parsing integer in JavaScript

I'm in the process of developing a dice game that involves rolling two dice and determining the sum. The goal is to display the running total next to the dice. However, I'm encountering an issue where NaN (Not a Number) is being displayed. Here i ...

javascripthtmlnanparseint

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Encountering a 400 bad request issue when trying to connect over HTTP, despite the package only being installable via HTTP. Attempting to override in composer.json to force HTTPS as suggested by others for a workaround, but that solution doesn't seem ...

htmlcssangularlaravel-5