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

Use jQuery to display the first 5 rows of a table

I recently posted a query on show hide jquery table rows for imported xml data regarding how to toggle visibility of specific table rows using jQuery. Now, I am seeking advice on how to make the first 5 elements always visible within the same context. Belo ...

javascriptjqueryhtmlxmlshow-hide

The background image is failing to display

I am currently working on a subpage for my website that includes a navigation bar and footer. I am looking to add a background image behind the navigation bar, similar to this design. https://i.stack.imgur.com/j6fDZ.jpg After trying various methods, I at ...

htmlcsstwitter-bootstrap-3

Having trouble dynamically adding HTML elements in JQuery

I am dynamically adding HTML elements during runtime using an AJAX call from a JavaScript file. Currently, I am attempting to use a combo box drop-down element to display a list of data. Here is how I am trying to achieve this in my script: $("#myList") ...

javascriptjqueryhtml

Display words on screen and then alter hue using HTML and CSS

Is there a way to dynamically change the color of text inside <a> tags from black to red after a specific time interval and keep it permanently red? do { document.getElementById("code").innerHTML +="<a>Hello World</a><br>"; awa ...

javascripthtmlcsstextcolors

Animation issue in Material UI autocomplete label feature

Hello, I am currently delving into the world of React and Material UI. I have been working on implementing the Material UI auto complete feature with chip functionality. You can see my progress here: https://codesandbox.io/s/runh6. Everything seems to be w ...

javascriptcssreactjsautocompletematerial-ui

Tips for creating responsive designs with specific media queries for various device sizes

I am looking to create a responsive website using media queries and have already created different media queries for mobile, tablets, and desktops. However, I am unsure if I should be writing the same CSS code multiple times for various device sizes, such ...

htmlcssmedia-queries

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...

javascriptjquerycsswordpress-theming

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly ...

javascriptjqueryhtmlcssweb

The switch statement is not functioning properly when the button is pressed

I am trying to trigger an alert inside a switch statement when I click a button, but for some reason, it is not working. Even if I simply have an alert in the previous function, there is no output on my website. What could be causing this issue? Here is ...

javascripthtml

Ensure that the control button is pressed during the JavaScript onclick event function

I am looking to create a JavaScript function that checks if the CTRL button is pressed. Here is my PHP code: <tr class="clickable" onclick="gotolink('<?= base_url() . invoices/createinvoice/' . $customer->Id; ?>')"> And here ...

javascriptphphtmlfunction

Expanding div that adjusts to content size and expands to fit entire page

Appreciate your help. I'm currently facing an issue with the "content" and "footer" sections within the "wrapper" element. Below are the styles for these elements: #content { width: 100%; min-height: 100%; position: relative; background- ...

css

Trying to reduce the cursor box area within an A link containing a div box

My communication skills are lacking, so I have included an image to better illustrate my issue. Here is the problem .body { text-align: center; display: flex; flex-direction: column; align-items: center; } .flex-container { display: flex; ...

htmlcss

"Utilizing Bootstrap Tour for Easy Navigation: Automatically Scroll Back to the Top with

I have a Bootstrap tour set up with code that is meant to capture the user pressing the end tour button and scroll them back to the top of the screen. However, currently the code runs when a new popover loads instead of when the end tour button is clicke ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-tour

What is the best way to determine the size of the URLs for images stored in an array using JavaScript?

I am working on a project where I need to surround an image with a specific sized 'div' based on the image's dimensions. The images that will be used are stored in an array and I need to extract the height and width of each image before disp ...

javascripthtmlcssarrays

Internal VS External Stylesheets: What you need to know

I'm currently in the process of developing a website and I have started utilizing the style tag at the beginning: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

htmlcssstyles

"Troubleshooting: Why is my Bootstrap modal window only printing a

I've encountered an issue with printing the content of a Bootstrap modal window. Previously, the code I had was working fine but now it seems to be malfunctioning. Content is dynamically added to the form using appendChild() in a separate function. Ho ...

javascriptjqueryhtmlcssbootstrap-4

Encountering issues with CSS Modules in Next.JS app while using app/about/layout.tsx

Currently, I am delving into the world of Next.js and encountering some challenges with locally scoped CSS modules. In my project, I have an about directory which contains a layout component. Strangely, the styles applied to the layout component are not b ...

javascripthtmlcsswebnext.js

Incorporating HTML variables into a Django template without the need for escaping

I have encoded text in HTML format that looks like this: RT <a href="http://twitter.com/freuter">@freuter</a>... I would like to display this as formatted HTML, but I am unsure if there is a filter available to convert the encoded text back t ...

pythonhtmldjangoencoding

Ensuring Proper Highlighting for HTML Select Options

I am working on a project involving an HTML Drop-down menu. Check out the code I have so far: http://jsfiddle.net/dineshk/u47xjqLv/ HTML Code <select> <option class="first" style="display:none;">HH</option> <option class= ...

htmlcss

What advantages does the use of $(e).attr(name,value) offer compared to using e.setAttribute(name,value)?

Scenario: The variable "e" represents an element of type "HtmlElement" and not a "css selector" I am referring to any attribute, not just the standard allowed ones like "atom-type" or "data-atom-type". Regardless of the attribute name, will it function wi ...

javascriptjqueryhtmlcss