A single image with dual clickable areas managed by an interactive image map

Is there a way to attach two href links to one image using CSS? I want it to function like an old school image map, but purely with CSS. Is this something that can be done?

The current HTML code looks like the example below. However, I need the image to have two different URLs depending on where the user hovers their mouse.

<div id="logo-wide">
<a href="http://myurl1"><img src="BIG-Logo_FINAL.png" alt="url-name1"></a>
<a href="http://myurl2"><img src="BIG-Logo_FINAL.png" alt="url-name2"></a>
</div>

Philip

htmlcssimagemap

Answer №1

In order to accomplish this task, you must consider one of the following:

  1. Implementing an image map
  2. Dividing the image into two halves and linking each half separately
  3. Overlaying two absolutely positioned links on the images using z-index (although this method is considered unprofessional and unattractive)

It is recommended to go with either option 1 or 2.

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

Is there a quicker alternative to the 500ms delay caused by utilizing Display:none?

My div is packed with content, including a chart from amCharts and multiple sliders from noUiSlider. It also features various AngularJS functionalities. To hide the page quickly, I use $('#container').addClass('hidden'), where the rule ...

javascriptcssperformance

Remove all HTML tags except for those containing a specific class

Looking for a regex that removes all HTML tags except the "a" tags with the "classmark" class For example, given this HTML string: <b>this</b> <a href="#">not match</a> <a href="#" target="_blank" ...

javascripthtmltagsstrip

"jQuery's .each() method is only iterating through the last element in

I am encountering an issue with this function not operating correctly... only the last Element shows the box. NOTES: <aside> is set to position: fixed; and I understand that this is not the "correct" use of <article> tags, but it helps me dist ...

javascriptjqueryhtmldom

Creating an image using tiles in HTML

I have divided an image into 48 tiles (8x6) using a method similar to "Cutting an Image into 9 pieces C#". Now, I want to reconstruct the original image in HTML. What is the most effective approach to achieve this? Initially, I attempted to use a table wi ...

htmlcss

Why is the camera access permission dialog not showing up in the WeChat app?

Why is it that when I attempt to open the following links for the first time, Chrome asks for camera permission, but when I access them through WeChat's in-app browser, the camera permission dialog does not appear? Can someone shed some light on this ...

htmlhtml5-videowebrtcgetusermediawechat

Looking to create a centered 'ul' using Bootstrap

I am looking to center the list with a specific width. body { background-color: rgb(26, 40, 114); } h1 { color: white; text-shadow: 7px 7px 10px black; } li { list-style: none; border-radius: 5px; border: 2px solid white; background-colo ...

htmlcsswebbootstrap-4

Implement varying styles in React components

In my React project, I am attempting to create a unique progress bar with custom styling. Specifically, I have a dynamically calculated percentage that I want to assign as the width of a div element. Initially, I tried achieving this using Tailwind CSS: &l ...

javascriptcssreactjstailwind-css

The Bootstrap 3.3 Carousel is stationary and does not rotate

I am facing a challenge with implementing a Carousel using Bootstrap version 3.3.7 on my website. The code snippet is as follows: <!-- Carousel ================================================== --> <div class="row dark-start d-none d-lg-block"&g ...

javascripthtmltwitter-bootstrap-3carouselbootstrap-carousel

I am having trouble with node.js express not recognizing the path to my CSS files

My objective is to load information onto an HTML page using Node.js and Express. The issue I am facing is that when I try to open the main page (which displays all the books from the database), everything works smoothly - the CSS and JS files are located ...

javascriptcssnode.jsexpresshttp

Is it possible to programmatically hide the Textarea and submit button for each row in a PHP-generated database table?

After spending a considerable amount of time on this project, I'm looking to incorporate a JavaScript effect (hide/unhide) into a basic submit form. Although the functionality is successful, it seems to be limited to only one row in the database tabl ...

javascriptphphtmlmysql

Can a javascript code for "Infinite Scroll" be created to manage the back button?

Head over to this website: Experiment with the infinite scroll feature. You may notice that when you click a link and then press "back", there are some glitches. Therefore, I am considering developing my own version of an Infinite Scroll functionality. ...

javascriptjqueryhtmlcsstemplates

I'm facing some issues with my initial attempt at an Angular application and it's

After diving into Angular and setting everything up, I encountered an issue where instead of seeing a name displayed, I was getting {{ name }}: Below is the content of app.component.html: <input type="text" [(ngModel)]="name"> <p>{{ name }}&l ...

htmlangular

Activate the front camera on an Android device using HTML5 or JavaScript

I'm currently working on a web app that needs to access the front camera of Android phones running version 4.0 or higher. After taking a picture, the app should then upload the captured image to my own server. Is there a way to launch the front camer ...

javascriptandroidhtmlandroid-intent

Issue with highlighting when one string overlaps with another

I am facing a challenge with handling a string that contains Lorem Ipsum text. I have JSON data that specifies the start and end offsets of certain sections within the text that I need to highlight. The approach I am currently using involves sorting the JS ...

javascriptjquerycssangularjshtml

displaying information in table cells with jquery

Is there a way to display a table inside a td element with an on-click function without showing all tables in the same column when the function is triggered? I want the table to be shown only for the specific td that was clicked. $(document).ready(funct ...

javascriptphpjqueryhtml

Tips on altering hover effects?

I am having trouble changing the font size and color of the a when hovering over p. I have been trying to figure this out for a while now, but I can't seem to get it to work. If anyone has any simple links related to this topic, I would greatly appre ...

htmlcsshover

Ways to expand the div to fit the width of the text after it has been wrapped

I need a continuous underline to stretch across the remaining width after the text wraps in a table cell. Here is the desired effect: https://i.sstatic.net/XNNyj.png If the text wrapping changes, the underline width should adjust accordingly. This is w ...

htmlcss

The Photoswipe default user interface cannot be located

While attempting to incorporate PhotoSwipe into my website, I encountered an uncaught reference error related to The PhotoswipeUI_Default is not defined at the openPhotoSwipe function Below is the code snippet that I have been working on: <!doctyp ...

javascriptphphtmlcssphotoswipe

Trouble with saving the positioning after drag and drop

I am currently facing an issue with my drag-and-drop script where the coordinates of positioned relative divs are not being saved in the same position when I reload. These divs are contained within a container with specific height and width, restricting t ...

phpjavascriptjqueryhtmlcss

Is full support for CSS 3D transforms (preserve-3d) provided by IE11?

Creating a web app utilizing css 3d transforms, my goal is to have IE11 support if feasible. I am aware that IE10 does not endorse the preserve-3d value for the transform-style css attribute, however, there seems to be conflicting information regarding I ...

htmlcsscss-transformsinternet-explorer-11