Buttons and links with intricate geometries

I am currently developing a web application using Java/JSF and I am interested in finding out about technologies that would allow me to define intricate shapes as clickable buttons or links. Right now, my only option is to split an image into smaller transparent images and use those as links, even though users can click on the whole picture area, including the transparent parts.

For instance, let's say I have an image of a person and I want to make their leg clickable. The clickable area should correspond to the silhouette of the leg in the picture. How can this be achieved?

javascriptjqueryhtmlcssjsf

Answer №1

In the following illustration, you can observe how specific parts of images can be clickable once their coordinates are defined.

HTML

<img src="img.png" width="145" height="126" usemap="#picture-map">

<map name="picture-map">
  <area shape="rect" coords="0,0,82,126" alt="Leg" href="legs.htm">
</map>

Now, you can click on the image to be redirected to another page, and if desired, it can potentially be linked to a JavaScript function.

Best of luck!

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

How to display the name of the parent object using JavaScript's prototypal inheritance

I've been delving into JavaScript prototypal inheritance and the prototype property, and I decided to create a fiddle to gain a deeper understanding. However, I'm struggling to comprehend why my example isn't functioning as expected. In the ...

javascriptprototypeprototypal-inheritance

How can I integrate vue-cli output into a PHP project?

One benefit of using vue-cli is that it automatically sets up a local server for you. I'm curious, can I utilize the output from vue-cli in a PHP project (such as app.js )? Another question I have is related to the local network - How does it suppo ...

javascriptphplaravelvue.jsvue-cli

What is the formula for determining the size of an image using JavaScript, jQuery, or Java?

I'm looking to determine the dimensions of an image. I have both the image src and base64 data available. My goal is to display the current size of the image. I am working with Java and JavaScript. Is there a way for me to calculate the image size usi ...

javajavascriptjqueryimage

What is the most effective method to avoid duplicating elements in the DOM tree?

Seeking a solution for appending a span element to the DOM. if (check something...) { const newSpan = createElement('span'); newSpan.id = '_span'; const container = document.getElementById('container'); conta ...

javascriptdom

The challenge of vertically aligning text in a dynamically generated div

Currently, I am in the process of developing a straightforward application that allows for the dynamic addition of students and teachers. I am dynamically adding divs with a click function. To these dynamically created divs, I have assigned the class "us ...

javascripthtmlcss

An issue has been identified with the functionality of an Ajax request within a partial view that is loaded through another Ajax request specifically in

Here is the current scenario within my ASP.NET MVC application: The parent page consists of 3 tabs, and the following javascript code has been implemented to handle the click events for each tab: Each function triggers a controller action (specified in t ...

javascriptjqueryajaxasp.net-mvcinternet-explorer

Utilizing setColumns() function within Google Charts for JSON data tables

Is there a feature in the Google Charts API that functions similar to setColumns() for working with JSON data? I'm aiming to reduce PHP calls by consolidating my data into a single array and then specifying which columns Google Charts should utilize. ...

javascriptphpjsongoogle-visualization

Identifying the FireOS version using JavaScript

Can JavaScript be used to determine the version of FireOS that a Kindle device is running when accessing your website? ...

javascriptkindle-fire

AJAX - Implementing a delay in displaying AJAX results

My search function uses AJAX to retrieve data from the web-server, and I am trying to implement a fade-in animation for each search result. I want the results to load and fade in one by one with a slight delay between them. Currently, it seems like all th ...

javascriptjqueryhtmlcssajax

Searching Firebase by using comparison operators on various fields

const FindFiis = async () => { const data: any[] = []; // Firebase query with inequalities on different fields to retrieve docs. // Objective: Select documents where dividendYield is between 8 and 20 and pvp is less than or equal to 1. ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Enclose every line of the paragraph within a <span> element

My <div> element is configured to display a paragraph without any line breaks, similar to the example below: <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dum ...

javascriptjqueryhtml

What is the best way to add margins to the elements in a row without disrupting the row layout?

I'm trying to figure out how to add margin between elements in my code snippet without breaking the row. You can view the fiddle here. Although a similar question has been asked on Stack Overflow here, I wasn't able to find a solution that works ...

cssbootstrap-4

Prevent typing in text box when drawer is activated by pressing a button

update 1 : After removing unnecessary files, I need assistance with https://codesandbox.io/s/0pk0z5prqn I am attempting to disable a textbox. When clicking the advanced sports search button, a drawer opens where I want to display a textbox. The toggleDra ...

javascripthtmlreactjsreduxmaterial-ui

What is the best way to line up changing column values with changing row values in an HTML table?

In its current state, the data appears as follows without alignment: https://i.sstatic.net/o5OLu.jpg The data columns are housed within a single variable due to the presence of multiple excel tabs with varying columns. Within the tr tag, rows are checked ...

htmlcssangularhtml-table

How can we incorporate Django template tags into our jQuery/JavaScript code?

Is it possible to incorporate Django's template tags within JavaScript code? For example, utilizing {% form.as_p %} in jQuery to dynamically inject forms onto the webpage. ...

javascriptjquerydjangodjango-templates

JavaScript code that deletes text from a document - Script eradication

I am trying to display the message "Todays Beer Style is: "Beer Style". However, when I add the javascript code, the "Todays Beer Style is:" text disappears. I'm not sure why this is happening. Below is the HTML code for reference. HTML Code <!DO ...

javascripthtml

Manipulate the control type property using jQuery

On my webpage, I have 5 grids and a single button. My goal is to enable users to click the button and resize the text within the grids. Can someone provide guidance on how this can be achieved using jQuery? ...

jquery

Creating an AJAX URL in an external JavaScript file within a Django project

How can I verify if a student user's email exists in the database using keyup event in a registration form, and prevent form submission if the email is already registered? Below are the relevant files for achieving this: urls.py urlpatterns = [ ...

javascriptpythonjquerydjangoajax

Performing an AJAX request to the database when a change occurs, prior to submitting the

In my user setup/create form, I am including a field for the users' license/certification number which needs to be validated and returned to a specific DIV Onchange before the form is submitted. I have heard that using AJAX POST is the way to achieve ...

javascriptphpajax

When scrolling the page, the Circle Mouse Follow feature will dynamically move with your cursor

Hey everyone! I'm currently working on implementing a mouse follow effect, but I'm facing an issue where the circle I've created moves along with the page when scrolling, instead of staying fixed to the mouse. Any suggestions or tips would b ...

javascriptjqueryhtmlcss