What is the process of adding a clickable link to an image using maplinks in a responsive theme?

I am trying to add a link to an image using maplink, but it doesn't seem to work with the responsive theme I'm using. I'm unsure how to make it responsive. If anyone has any ideas, please share them.

html

    <img src="http://www.gate7infotech.com/projects/development/MyLuckyBottle/wp-content/themes/twentythirteen/images/home_background.jpg" alt="new" width="100%" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
  <area shape="poly" coords="691,918,705,756,931,763,910,930,692,920" href="http://youtu.be/zG28Gy6mKO0" target="_self" alt="new-video" />
</map>

    </div>

css

.container{
    width:100%;
    margin:0 auto;
}
htmlcss

Answer №1

http://example.com/jsfiddle/gVu5y/

XHTML

<div class="location">
    <img src="http://www.company.com/images/location.jpg"/>
    <a href="#" class="x"></a>
    <a href="#" class="y"></a>
    <a href="#" class="z"></a>
</div>

Stylesheet

div.location {
    position: relative;
}

div.location > img {
    display: block;
    max-width: 100%;
}

div.location > a {
    display: block;
    position: absolute;
}

div.location > a:hover {
    background-color: rgba(0, 255, 0, .5);
}

div.location > a.x {
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
}

div.location > a.y {
    top: 0;
    left: 50%;
    width: 20%;
    height: 50%;
}

div.location > a.z {
    bottom: 0;
    right: 0;
    width: 20%;
    height: 50%;
}

Answer №2

To create a responsive design, avoid using image maps and opt for background images with <a> tags and position:absolute within a div element instead. Utilize percentages for optimal viewing on different devices in a responsive layout.

HTML

<div class="container">
    <a href="#">link</a>
</div>

CSS

.container{
    width:100%;
    background:red;
    height:500px;
    position:relative;
}
.container a{
    position:absolute;
    top:40%;
    left:30%;
}

View Demo

Answer №3

If you find yourself in a situation where the size of your image maps may vary, relying solely on HTML/CSS for a solution won't cut it!

You'll need to incorporate additional techniques like Javascript.

One option is to utilize a jQuery plugin that adjusts map coordinates based on the size of the image:
jQuery-rwdImageMaps

However, keep in mind that image maps can be challenging to use on touch devices!
Furthermore, they pose accessibility issues.

In light of these challenges, it's generally best to avoid using image maps in responsive design!

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

Maintain the selected image

I am working on a program that allows users to choose images and I have given them the pseudo-class. .my_image_class:hover{ border:3px solid blue; -webkit-box-sizing: border-box; } This makes the images bordered in blue when hovered over, giving a "sele ...

javascripthtmlcss

Vue.js Dynamic Gallery

Greetings to everyone attending, I'm currently working on a portfolio page and I am looking to resize blocks dynamically in vue.js based on window size.View image description here The tile displayed in the image should always maintain a square shape, ...

javascripthtmlcssvue.js

Adjust the appearance of elements depending on whether the user has activated dark mode or

What is the most efficient way to implement both dark and light themes in my Vue app? One option is to create a 'dark.scss' file and use the '!important' property to override styles defined in components. Another option is to utilize pr ...

javascriptcssvue.jsthemes

Problems with IE8 CSS display across various Windows machines

My website is displaying differently on various machines that have the same setup... I've tested the site on 6 different machines, all running IE8 (8.0.7600) on Windows 7, and I'm getting two different renderings of the site in Internet Explorer ...

cssinternet-explorer-8

iOS users may encounter a virtual keyboard obstructing HTML elements while using Safari

An editable HTML element that takes 100% of the screen's height is needed. In Safari, when an element is focused, a virtual keyboard appears and covers part of the element. Is there a way to use CSS or JavaScript to make an element take up 10 ...

htmlcssiossafariheight

Step-by-step guide on creating a blank horizontal line in an HTML table

Can anyone help me figure out how to draw a horizontal line connecting from td 1 to td 4 without relying on content CSS? I'm envisioning a progress bar like the one shown in the following image: https://i.sstatic.net/on8Bi.png <table> < ...

htmlcss

Creating a CSS3 Transition-Enabled Flip Card

I have successfully created an HTML flip card: <div id="services_card" class="shadow iOS"> <div class="front face"> <i class="fa fa-apple fa-4x"></i> <p>iOS</p> </div> <div class="back face ...

htmlcss

React-Bootsrap Col with additional right margin

https://i.sstatic.net/FTfyi.png I'm facing a challenge with positioning corner components on the screen using react and react-bootstrap. Even after trying various methods like modifying col size, adjusting right positioning, and using box-sizing prop ...

htmlcssreactjsbootstrap-4react-bootstrap

Setting dynamic image dimensions within a div element

Is there a way to display the div width in percentage even when the image is not loaded? The image sizes are mentioned in percentage and they load dynamically, making it impossible to fix their size. How can we ensure that the div maintains the correct wid ...

htmlimagecss

Add a hyperlink to a div element without directly editing the HTML code

Is it possible to add a link to the div using JavaScript instead of changing the HTML and inserting an <a>-tag? <div class="some-class">Some content</div> ...

jqueryhtmlhyperlink

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

javascriptjqueryhtmlajax

What is the best way to trigger an AJAX function by clicking a submit button?

On my website, I am experimenting with a form and JavaScript function. This is just a test to see if it's possible for me to achieve what I want. What I'm trying to accomplish is to make a form send an AJAX request to the server so that the data ...

phpjavascripthtmlajax

Could someone shed some light on why hjk fails to print whenever I click?

Why is the code not printing 'hgk' every time I click? The debounce function should run and print 'hgk' each time the button is clicked. Can someone please explain why this is not happening? const debounce=(fn,delay)=>{ ...

javascripthtmlreactjsdomdom-events

"Challenges with Full-Width Dropdowns in Multi-level Mega Menus

I am currently attempting to design a multi-level mega menu that spans the full width of the screen, while keeping the content within it restricted to a maximum width of 1240px. I have managed to set the content to the maximum width, but I am facing challe ...

htmlcssdropdown

What's the most effective method for setting up this header using the flex grid system?

I have been able to arrange the logo, search bar, and text in different columns, but I'm struggling to figure out how to position the <nav> below the search bar while maintaining the height consistency with the logo. #outer {} #logo { ...

htmlcssflexboxbootstrap-4

Looking for assistance in turning this curl script into one that can handle multiple links

Below is a script that has the ability to download files from a given URL. However, I am looking for a way to include multiple links for downloading files. Instead of having a button to add another input box for URLs, I want users to be able to input three ...

phphtmlcurl

Tips for implementing nested p tags within CSS and Bootstrap containers

Behold, here lies the image: I'm uncertain about how to align the text "Location, Type, Price, $2,250" exactly like in the image. Also, as a newcomer to bootstrap, I would appreciate feedback on whether my approach is correct. .image-box img { ...

htmlcsstwitter-bootstrap

Create a personalized keyboard layout for entering passwords with numbers using jQuery Mobile

As we work on creating a mobile application using jquery mobile and phonegap, we have a current requirement to display a password keyboard with numbers. We are wondering if it is possible to develop an Android-based password keyboard with a number keyboard ...

htmlcssjquery-mobile

Display the content of an md-dialog with a scroll bar

I am experiencing a problem with printing a long report created using md-list displayed in a md-dialog. When I attempt to print it, only the section that is currently visible on the screen gets printed instead of the entire length of the md-list. I have at ...

cssangularprintingmaterial-designangular-material

When an external image is dragged over, include the class in the drop area of the file input

Hey, does anyone know how to use Jquery to add a class when an element is being dragged over a drop area? Here's the HTML code I'm working with: <div class="upload"> <form action=""> <input class="uploadfile" type="file" ...

javascriptjqueryhtmlcssdrag-and-drop