What is the technique for placing a div element directly within the href attribute in a shape

I am wondering if it is feasible to include the following divs

<div id="cal1"> [dopbsp id="1"  lang=it]</div>

<div id="cal2"> [dopbsp id="1"  lang=it]</div>

<div id="cal3"> [dopbsp id="1"  lang=it]</div>

directly within the tag href image map linked by different shape areas as shown below

<area shape="circle" coords="160,59,20" href="#">
<area shape="circle" coords="111,58,20" href="#">
<area shape="circle" coords="60,59,20"  href="#">

so that when I click on a shape area, for example 

<area shape="circle" coords="160,59,20" href="#">

then the corresponding div, for example 

<div id="cal1"> [dopbsp id="1"  lang=it]</div>

is displayed under the map image Ps: dopbsp id="1" ... is a calendar booking plugin of wordpress

Thanks

javascriptcssdictionaryshapesarea

Answer №1

It is not possible to nest child elements within the <area> tag. To achieve a similar effect, you can link specific <area> tags with corresponding <div> elements using IDs. By utilizing JavaScript, you can then show or hide the associated <div> when clicking on the respective <area>. Here is an example:

<area shape="circle" coords="160,59,20" href="#id-of-div-1">
<area shape="circle" coords="111,58,20" href="#id-of-div-2">
<area shape="circle" coords="60,59,20"  href="#id-of-div-3">

<div class="divs-to-show-hide">
 <div id="id-of-div-1">some content here</div>
 <div id="id-of-div-2">some content here</div>
 <div id="id-of-div-3">some content here</div>
</div>

Additionally, you can use jQuery to handle the click event and toggle the visibility of the corresponding <div>:

$('area').on('click',function(e) {
 e.preventDefault();
 $(this.href).show().siblings().hide();
});

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

Enhance your bookmarking experience with Vue mixins that allow you to easily customize the color

Looking for a way to efficiently bookmark pages in my application, I have successfully implemented a feature where I can add pages by their name and URL into bookmarks. Upon clicking the bookmark button, it changes color to indicate that the page has been ...

javascriptvue.js

ReactJS state refuses to update

In my FreeCodeCamp leaderboard table, I have implemented functionality where clicking on the highlighted table header calls different URLs based on sorting criteria. The application either calls https://fcctop100.herokuapp.com/api/fccusers/top/recent or ht ...

javascriptreactjs

Modifying the Inactive Tab Color in Material UI

For my application, I have a specific requirement where the active tab needs to be styled in red and the inactive tab in blue. Here is how the styling is set up: newStyle: { backgroundColor: 'red', '&$selected': { b ...

cssreactjsmaterial-ui

Use CSS height:auto for every element except SVG

Is there a way to scale all images on my site while excluding SVG files using native CSS? .myClass img { height: auto; } I have tried the following, but it only targets SVG files: .myClass img[src$=".svg"] {height: auto;} Using != doesn't seem ...

css

Slow execution of Bootstrap v4 modal display

It has come to my attention that the modals in Bootstrap show slower as the page's content increases. When the page is empty, it only takes less than 100ms to show. However, the time it takes significantly increases as more content is added to the pa ...

javascriptbootstrap-4bootstrap-modal

Determine if checkboxes exist on a webpage using jQuery

I am facing a situation where a form is dynamically loaded via ajax. Depending on the parameters passed to retrieve the form, it may or may not contain checkboxes. I am looking for a way to verify the presence of checkboxes on the page and prompt the user ...

javascriptjqueryajaxcheckbox

GTM - monitoring the most recent clicked element's input data

Custom Script function() { var inputs = document.getElementsByTagName("input"), selectedRadios = []; for (var i = 0;i < inputs.length;i++) { if(inputs[i].type==="checkbox" && inputs[i].checked) { selectedRadios.push(inputs[i].value); ...

javascriptjquerygoogle-tag-manager

Horizontal scroll through Bootstrap 4 navigation tabs

I'm currently using the newest Bootstrap 4 nav-tabs feature to create tabs and I'm aiming to keep all the tabs in a single horizontal line that can be scrolled. I've attempted to use various JavaScript plugins, but none of them seem to func ...

htmlcsstabsbootstrap-4

Put the tab in the Shiny tabsetPanel over on the right side

Is it possible to have tabs on both the left and right sides of a tabsetPanel? For example, one tab on the right while others remain on the left, creating a layout like the one below: https://i.sstatic.net/oTZgH.png library(shiny) ui <- fluidPage( ...

cssrshinybootstrap-4

the three.js code runs smoothly on JSfiddle, but it does not seem to be working properly

Check out this basic three.js code snippet for generating custom geometry http://jsfiddle.net/67Lgzjpb/. After attempting to run this code directly in my browser (not via JSFiddle), an error message pops up: TypeError: geom.computeCentroids is not a funct ...

javascriptthree.jsjsfiddle

Troubleshooting: Angular input binding issue with updating

I am currently facing a challenge with connecting a list to an input object in Angular. I was expecting the updated values to reflect in the child component every time I make changes to the list, but strangely, the initial values remain unchanged on the sc ...

javascriptangulartypescript

Encountering weathers.map is not a function error while using React.js with OpenWeatherMap integration

Struggling with React.js for a college project and need some help. The error message I keep encountering is: weathers.map not a function I know it's probably something simple, but for the life of me, I can't figure it out! My project structure f ...

javascriptreactjs

Exploring the features of NodeJS, diving into the world of mapping,

Currently, I am working in a Node.js environment and dealing with an array of IDs. My goal is to filter these IDs based on the response of another API call. Essentially, I need to check if each ID meets certain criteria specified by this external API. Whi ...

javascriptnode.jsexpress

Warning: UnsupportedRepoVersionError: The repository versions are not compatible. Please check the version of IPFS-JS (0.55.3) and Node.js (14.17.0) being used

Recently, I delved into the world of ipfs js and currently have version 0.55.3 installed (https://www.npmjs.com/package/ipfs). Alongside, my setup includes node js version 14.17.0 (LTS) on MacOS BigSur 11.4. However, while following a tutorial at https:// ...

javascriptnode.jsipfsjs-ipfs

A Complication Arises with Browser Functionality When Embedding an Iframe within

I am experiencing a peculiar problem while embedding an iframe with a specific src inside an absolutely positioned div. Here's the basic structure of the webpage: .container { position: relative; overflow: hidden; width: 100%; heigh ...

javascripthtmlcssiframecross-domain

Ensuring Quick Response Times When Incorporating Personalized Text Styles into Twitter Bootstrap

Currently, I am experimenting with incorporating my custom class titled "article-title" which is significantly larger than the default H1 font size in Twitter Bootstrap. Can someone provide guidance on the necessary steps to ensure responsiveness? My goal ...

csstwitter-bootstrapresponsive-design

Unlocking the Power of Observable Objects with Knockout.js

Recently delving into knockoutjs, I came across the Microsoft tutorial showcasing how to integrate knockoutjs with MVC Web API. The tutorial can be found at: https://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part-8. In a particu ...

javascriptajaxmodel-view-controllerasp.net-web-apiknockout.js

What is the best way to insert a tagline above a form?

I'm struggling to figure out where to place a tagline above my form. I want it to be neat and clean, but haven't been successful in finding the right spot. I attempted to insert an <h2> inside the form, but it doesn't look good at al ...

jqueryhtmlcss

Attributes for 'v-bind' directives must have a value specified

Struggling to implement a tree structure in vue.js and encountering an issue with element props. Any assistance would be greatly appreciated. I've attempted using :content="{{tempCont}}" as well as content="{{tempCont}}", but neither approach proved ...

javascriptvue.js

How can TypeORM be used to query a ManyToMany relationship with a string array input in order to locate entities in which all specified strings must be present in the related entity's column?

In my application, I have a User entity that is related to a Profile entity in a OneToOne relationship, and the Profile entity has a ManyToMany relationship with a Category entity. // user.entity.ts @Entity() export class User { @PrimaryGeneratedColumn( ...

javascripttypescriptmany-to-manynestjstypeorm