Can an image map be utilized within an <a> element?

I am attempting to implement an image map within an <a> tag. It seems to be functioning correctly in Chrome, but I am encountering issues with it not working in Internet Explorer. Is it acceptable to use an image map in an <a> tag?

Below is the code I am using:

<div class="planner_banner">
        <a href="xxx">
            <img src="xxx" usemap="#planner_banner_map" border="0">
            <map name="planner_banner_map">
                <area shape="rect" coords="243, 1, 272, 30" 
                onclick="$('.planner_banner').hide();return false;"/>
            </map>
        </a>
    </div>
javascripthtmlcss

Answer №1

Is it acceptable to utilize an image map within the <a> tag?

No, according to the specifications:

The a element … Content model: Transparent, but there should not be any interactive content or a element descendants.

Furthermore, interactive content refers to:

a (if the href attribute is present) audio (if the controls attribute is present) button details embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the Hidden state) label select textarea video (if the controls attribute is present)

Answer №2

Include a # in front of the map name

<map name="#planner_banner_map">
  <area shape="rect" coords="243, 1, 272, 30" 
  onclick="$('.planner_banner').hide();return false;"/>
</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

Is there a reason why angularJS doesn't provide the exact error location directly, opting instead to just offer a link to their website that provides a generic explanation?

Why does AngularJS not provide the specific error location directly, such as which file the error is in, instead of just giving a link to their website with a generic explanation? This makes debugging very challenging! Whenever there is an error, it becom ...

javascriptangularjsdebuggingerror-handling

Transform specific data binding values into JSON format using Knockout.js

Just dipping my toes into the world of knockoutjs, I've got this viewmodel set up: var Testing = function(){ this.Username = ko.observable(""); this.Password = ko.observable(""); this.email = ko.observable(""); } I'm tasked with ...

javascriptjsonknockout.js

struggling to remove the jquery DataTable

I am trying to implement a functionality where a Button, when clicked, clears a data table and reloads it with fresh data. However, I am facing an issue where the data table is not getting cleared upon clicking the button. Below is the code snippet that I ...

jqueryhtmldatatables

Having trouble muting the audio on my Vue audio player

I'm facing some challenges with muting the audio within my vue app. I have a list of songs that can be played, paused, shuffled, etc., but I can't seem to get the mute function working. Here's what I have in the JavaScript: mute() ...

javascriptvue.jshtml5-audio

Is there a way to export a modified OBJ geometry from a Three.js scene?

Every time I make changes and export my Three.js scene with a SkinnedMesh model, the original imported model gets saved instead of the updated version. Despite rotating bones and adjusting morph targets, the exported model remains unchanged. Even though t ...

javascriptthree.jsgeometryexport

Live search bar feature with jQuery更新

I am currently working on creating a dynamic search bar that updates a list of items from the database based on the input value. Below is the code I have developed for this search bar: $(document).ready(function(){ $('#search').keyup(function ...

javascriptjqueryjquery-events

I encounter an issue with the ng-repeat in my code

It appears that the rendering is not working properly. http://plnkr.co/edit/IoymnpSUtsleH1pXgwFj app.controller('MainCtrl', function($scope) { $scope.lists = [ {"name": "apple"}, { "name": "banana"}, {"name" :"carrot"} ]; }); ...

javascriptangularjs

React's input onChange event does not trigger for the second time. It only works the first time

Recently, I developed a React JS application to import images from external sources and process them. To handle the user's onChange event, I utilized the onChange attribute to execute my handleChange function. However, I encountered an issue where it ...

javascripthtmlreactjs

Modify a property of an object using the useState Hook, where the property name is dynamically retrieved from a variable

const [fee, setFee] = useState({newPatient:'',establishedPatient:''}) const field1='newPatient' const field2='establishedPatient' To modify the fee object properties, I am looking to dynamically assign ...

javascriptreactjsreact-nativeobject

Cease the progress of a Sequelize promise within an Express.js application

Exploring the realm of promises is a new adventure for me, and I'm still trying to grasp their full potential in certain situations. It's refreshing to see Sequelize now supporting promises, as it greatly enhances the readability of my code. One ...

javascriptnode.jsexpresssequelize.js

Sending data to mongodb using the fetch API and FormData method is a simple process that involves constructing

I have been trying to send data to mongoDB using the fetch API along with FormData, but encountering an error: POST https://xxxxxxxxxxxxxxxxxxxxxxxx/upload 500 (Internal Server Error) The form data in my EJS file appears as follows: <div id=" ...

javascriptfetchform-data

Node.js captures the Promise and provides detailed feedback

As I embark on my journey with Node.js + Express, currently in the process of structuring my HTTP APIs, I have a controller that utilizes a specific pattern: my_controller.js 'use strict'; var AppApiFactory = function (express, appService) { ...

javascriptnode.jsexpresspromise

What is the best way to include an image link in an HTML page generated with golang?

I am a beginner in Go and web apps, and I am working on creating an app that retrieves menu items from a database and sends the item description along with a related picture link through an HTML page for a browser. The app will be running on a local networ ...

htmlimagegosrc

Ensuring that a group of items adhere to a specific guideline using JavaScript promises

I need to search through a series of titles that follow the format: <div class='items'> * Some | Text * </div> or <div class='items'> * Some more | Text * </div> There are multiple blocks on the page wit ...

javascriptseleniumwebdriverpromisechai

The Card Component from Core UI fails to appear in the Print Preview feature

I'm currently experimenting with the Card Component from the Core UI framework. However, I'm facing an issue where the color of the Card component and its associated icon do not appear in the Preview when trying to print the page. I attempted to ...

cssvue.jscore-ui

Is it possible for browsers to handle PUT requests using multipart/form data?

Is it common for HTML forms to not support HTTP PUT requests when submitted from certain browsers like Google Chrome? <form id="#main-form" action="http://localhost:8080/resource/1" method="put" enctype=" ...

javascripthtmlformsrest

Python automation with selenium - capturing webpage content

I am utilizing selenium to scrape multiple pages while refraining from using other frameworks such as scrapy due to the abundance of ajax action. My predicament lies in the fact that the content refreshes automatically nearly every second, especially finan ...

javascriptpythonselenium

Issue with AngularJs: $http post only posting single item to collection inside a for loop

I have a collection that requires me to post multiple items in a for loop. Below is the code snippet: for(i = 0; i < 28; i++) { var request = $http({ method: "post", url: "/students", ...

javascriptangularjshttppost

Looking for help combining HTML5 Canvas and JavaScript to showcase images. Can anyone lend a hand?

I am currently in the process of developing an Android game using HTML5 and Javascript. I have managed to make some progress, but I have encountered a problem that has left me puzzled. Initially, my JS file and Html file were functioning well together for ...

javascriptandroidhtmlhtml5-canvas

I am attempting to retrieve the initial three results from my MySQL database using Node.js, but I keep encountering an error

Below is the code I am currently using: con.query('SELECT * FROM tables', function(err, results) { if (err) throw err console.log(results[0].rawname) for(var i= 0; i <= 3; i++) { ...

javascriptnode.jsexpress