I attempted to utilize the <map> tag in creating a circular image that functions as a hyperlink, but unfortunately, it is not functioning correctly

I've been trying to create a round button using the code below, but something seems to be wrong with it. The issue I'm facing is that the area around the image is also clickable, even though I have used border-radius. Can someone please take a look at my code and point out any mistakes? Keep in mind that I am new to programming.

<a href="#">
  <div class="hotel">
    <img src="http://www.litorehotel.com/web/en/images/placeholders/1920x1200-0.jpg" height="400" width="400" alt="Our hotels and resorts" usemap="#hotel">
    <p class="hotimg">Our hotels and resorts</p>
  </div>
</a>

<map name="hotel">
  <area shape="circle" coords="961, 603, 819" href="#" />
</map>
htmlcssimagemap

Answer №1

By pressing the tab key, you'll reveal the outline of your shape, which appears to be oversized and located off-center.

I concur with the notion of utilizing CSS rather than a map as suggested.

https://i.sstatic.net/wOFYN.png

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

Encountering a 404 error while trying to use the autolinker

I have been struggling with this issue for the past day and can't seem to solve it on my own. Essentially, I am attempting to use Autolinker.js to automatically convert URLs into clickable hyperlinks in my chat application. However, every time I try ...

javascripthtmlnode.js

Pass a variable between popup.js and background.js in a Chrome Extension

Despite finding some answers to similar questions, none of them provide a complete solution. The information in the answers lacks necessary documents that were not included in the original question. My goal is to create a scaffold for Chrome extensions wh ...

javascripthtmlgoogle-chromegoogle-chrome-extension

What is the process for designing a dropdown box that showcases text details?

I am in the process of building an FAQ page and I am looking to incorporate a dropdown menu that lists all the frequently asked questions. When a user clicks on a question, I want the corresponding answer to be displayed without redirecting to a new page. ...

phpjqueryhtmlcssajax

Take a snapshot of an element using fixed element positioning

When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...

javajqueryhtmlcssselenium

Modifying the Placeholder Color in a Material UI Autocomplete: Tips and Tricks

In my team, we are working on two projects that both utilize an internal library with a header containing a search box. In one project, the placeholder text "Search" displays normally. https://i.stack.imgur.com/lhL5V.png However, in the second project wh ...

htmlcssreactjsmaterial-ui

Incorporating Content-Disposition headers to enable the file to be both downloaded and opened

I'm having trouble allowing users to both view and download files on a web page. I've tried setting headers and using JavaScript, but can't seem to get it right. My goal is to have an HTML page with two links for each file - one to open in ...

javascripthtmlhttp-headerscontent-disposition

react-datepicker displaying error message "Preventing default action not possible within a passive event listener invocation"

I've integrated the react-datepicker library in portal mode. While it functions well on browsers, I encounter an error when using mobile browser mode. An issue arises stating: "Unable to preventDefault inside passive event listener invocation" Des ...

javascriptcsshtmlreactjsreact-datepicker

The div in Bootstrap is not becoming scrollable despite using "overflow: auto"

I have a unique setup with two divs nested inside another div. The first div contains a table, while the second div holds buttons. I'm trying to make the table div scrollable by using overflow-auto, but it's not working as expected. I suspect tha ...

htmlcsstwitter-bootstrapbootstrap-4

Content that can be scrolled within a React.Box container

I am struggling with a particular view. The columnBox I have can potentially hold a large number of items, but for some reason it's not scrolling in the view. I've already tried setting overflowY to auto, but since I don't know the exact hei ...

htmlreactjsmaterial-ui

How can I eliminate padding from events in FullCalendar's timeGrid view?

Is there a way to remove the padding from an event when the calendar is in 'timegridview'? Users are taking advantage of the empty space created, allowing them to bypass a blocked time slot. I currently have it set so that clicking on an event d ...

htmlcssfullcalendar

Adjust the carousel width on slide in Bootstrap 4

Having an issue with my Bootstrap Carousel where the width changes as it slides. The carousel starts off fine, But when it slides, I want the carousel to stay centered and maintain a fixed width. Setting a fixed width for carousel-inner works, but it n ...

cssbootstrap-4

Using the ol tag in Google Chrome browser

I'm dealing with an issue regarding a simple ol list in a div: <div class="one">Title<hr width="200px"> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </div> Here's the CSS ...

htmlcssgoogle-chrome

Using *ngIf together with fxFlex.lg and fxFlex.xl is causing compatibility issues

One of the challenges I faced involved a div element with a conditional *ngIf statement and responsive layout values set using fxFlex.lg="30" fxFlex.xl="50": <div class="project-test__element" *ngIf="myCondition()" ...

htmlcssangular

What is the best way to align my progress bar to the bottom of a button?

I've encountered a small issue that I'm struggling to resolve. My goal is to create a button with a Bootstrap progress bar at the bottom, but I can't seem to make it work as intended. Here's the current setup: https://jsfiddle.net/bob ...

htmlcssbootstrap-4vertical-alignment

Encountering a database deletion error with Spring Boot Thymeleaf

I'm currently facing an issue where I am attempting to remove an entry from my database. However, when I try to delete it on my html page, I end up being redirected to an error page instead of the intended destination. The entry I am trying to delete ...

javahtmlspring-bootthymeleafcrud

What is causing the discrepancy between the appearance of my fiddle and my page?

Hey there, I encountered an issue while working on a page using jsFiddle - it seems to be behaving differently when viewed on the actual website! If you want to take a look: http://jsfiddle.net/8Hpmj/8/ http://ktaadn.me/about/ The example at ktaadn.me do ...

htmlcssjsfiddle

Using Flexbox for laying out content in both columns and rows

Hey there, I'm looking for a little help. It's been quite some time since I last built a website from scratch and I want to keep things simple this time around. I've used breakpoints before, but I'm curious if Flexbox could be a better ...

htmlcssflexboxmultiple-columns

Detecting a click event within a hidden div located behind another visible div

I am facing an issue with triggering ng-click in a div that is covered by another div. The current scenario I have is as follows: https://i.sstatic.net/SfM5y.jpg Basically, I need to activate ng-click on the yellow circle when it is clicked. However, the ...

htmlangularjs

Is there a way to prevent the node modules folder from being uploaded when deploying a React app on Github Pages?

Struggling with the lengthy upload time of my React app on Github Pages. Every attempt to upload the node modules folder feels like an eternity due to its numerous dependencies. I've considered uploading just the build folder (minified version), but i ...

javahtmlreactjsgithubnpm

Invoking a nested function within an array

I need to trigger a function with a button click. The function I want to call is nested within another function, which is part of an array. demo = { volej: function(param) { (new initChartist).users(param); }, initPickColor: function(){ ...

javascripthtml