Numerous hyperlinks leading to different products within the same image

https://i.sstatic.net/T7P4V.jpg

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

Excessive letter spacing in font-face causing display issues on Apple devices such as iPhone and iPad

Recently, I designed a website using some unique fonts that aren't supported on all devices. To ensure compatibility across various platforms, I converted the fonts to all major file formats, including SVG for iPhones and iPads. Surprisingly, this sol ...

iphonehtmlcssipadfont-face

Floating container leads to delays

My goal is to create a div that changes when I hover over it. However, when I move my mouse into the div, there seems to be some lagging and the content does not appear clearly. Below is the HTML and CSS code I have used: .unshow-txt:hover, .unshow-txt: ...

htmlcss

tips for creating a jquery/css scales animation

I am looking to implement a unique feature on my website where I create scales with a balancing effect. The scales should mimic an up and down motion continuously. You can see an example of what I'm referring to here Is there a way in jQuery or CSS t ...

jqueryhtmlcssjquery-animate

Choosing the Offspring: Deliberating on Multiple Children with Identical Names in Selenium

Just starting out with Selenium and web development in general, I've encountered a problem with locating an element using XPath. selenium.common.exceptions.NoSuchElementException I've been trying to troubleshoot for a while now, but haven' ...

pythonhtmlcssseleniumselenium-webdriver

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

As a enthusiastic beginner, I'm facing a challenge that seems to have no easy solution. Can someone please assist me with this: How can I assign all the ids from a JSON database to the variable dotContainer, in order to hide all corresponding HTML id ...

javascripthtmlcssjsonajax

The Android webview fails to load the page, but the app successfully loads it when accessed through the

I'm experiencing an issue with my HTML5 mobile web app loading fine in a browser but getting stuck on an Android webview. We have implemented a splash screen before loading the web app, but the webview seems to be stuck on the splash screen and does n ...

androidhtmlwebviewwurfl

I appear to be having issues with the pseudo-element. Is there something I am doing incorrectly? This relates to the first child

I initially tried to make the opening paragraph stand out by applying a red color, but unexpectedly, all elements on the page turned red. view image here <!DOCTYPE html> <html lang="en"> <head> <link rel="styleshee ...

htmlcss

When using Selenium to locate a sub element within a previously obtained WebElement using xpath, it will always return the first match found on the entire

Currently, my project involves using selenium and python to automate website testing. I am facing an issue while trying to extract links to files on the website using the following approach: I first use divs = find_elements_by_css_selector("div.answer") to ...

pythonhtmlseleniumxpath

Display or conceal form elements depending on the JSON response

Upon making an api call, a json Response is received with the following structure: {"Field":"Amount","FieldName":"Amount","FieldType":"Numeric","MaximumLength":128,"MinimumLength":0,"Options":"Mandatory"} This api call yields between 5-10 of these object ...

javascriptjqueryhtmljson

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed. ...

htmlcsstwitter-bootstrapgrid-layout

The CSS element is styled with a background color while maintaining a level of transparency

My menu structure is set up as follows: <nav id="main"> <ul id="nav-user"> <li class="user-name"> <span class="name">John Doe</span> <ul class="submenu"> <li>Pro ...

htmlcss

Eliminate the horizontal scrollbar generated by a certain div

I'm working on the following HTML structure: <div id="container"> <div id="content"></div> </div> The container div is set at a width of 1050px and has a shadow background that repeats vertically. The content div is 950px ...

htmlcssscrollbar

HTML/JavaScript: Embrace the Power of Dynamic Page

I have a unique element in my HTML code: <image src="http://..." style='...'> Using Python-Flask, I pass on a dynamic source address and save it as window.dynamicEmbedding. Now, during page load, I want to change the image's ...

javascriptpythonhtmldynamicembedding

Conceal one object when the other is revealed?

Is there a way to hide the element with the class .close-button while showing another element with the ID #loading-animation? Can jQuery conditionals help achieve this? For example: if ($('#loading-animation').is(':visible')) { $ ...

javascriptjquerycss

Chrome's behavior of reducing the width of inline elements when the content is dynamic

Upon opening the specified URL in Google Chrome, an issue can be observed where on the initial load everything appears fine. However, upon refreshing, the width of the three items at the top (Bedingungen, Preise, and So geht's) collapse. This seems to ...

jqueryhtmlcss

Sending a collection of text inputs from a web form and saving them in MongoDB

I have been attempting to store an array of strings from my HTML form into my database (MongoDB). Here's the HTML form for creating a new class: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

javascripthtmlnode.jsmongodbexpress

Is it possible to utilize hCard for semantic markup exclusively for a business's contact information?

Can hCard be used to markup a business's contact information without including a personal name? According to the hCard guidelines, a name is required in the format (e.g. John Doe): . I am specifically trying to mark up just a business's contact d ...

htmlsemanticssemantic-markupmicroformats

Mobile display issue with CSS columns when using the :checked pseudo class

I have embarked on the creation of a portfolio website that relies solely on CSS3 to present a grid and filter out thumbnail images. If you're curious about what I've accomplished so far, feel free to take a look here. To achieve the filtering ...

cssgridmobile-safaripseudo-class

What is the best way to create a new column that wraps content from existing columns?

While working on some homework, I encountered an issue with flex-wrap. I have columns that I want to wrap into at least two columns, but instead, they are overflowing my container. Note: I am aware that this can be achieved with grid as well, but I wanted ...

htmlcssflexbox

Issue with conditional comment in IE 8 not functioning as expected

Struggling with changing the SRC attribute of my iFrame specifically for users on IE 8 or older. This is the code I have written: <script> var i_am_old_ie = false; <!--[if lte IE 8]> i_am_old_ie = true; <![endif]--> </script> ...

javascriptjqueryhtml