Tips for switching the irregular polygon shape image on click and hoverIf you want to change

I'm looking to create a unique menu with an irregular shape in Adobe Illustrator. I've attempted the following code:

  <div class="body_container">
            <img src="img/sitio_Web.png" alt="" usemap="#sitio_Web_Map" height="787" border="0" width="1430">
            <map name="sitio_Web_Map">
                <area shape="poly" alt="" coords="377,164, 377,135, 305,135, 244,138, 194,145, 194,175, 247,168, 309,165, 377,164" href="#Quienes_Somos">
            </map> 
        </div>

However, I'm unsure of how to proceed in adding mouse-over and click effects to turn it into a functional menu.

For reference, here is an example of the desired effect: https://i.stack.imgur.com/bYmMl.gif

javascriptjquerycsshtmladobe-illustrator

Answer №1

To implement mouseover and click functionality for each section, it is recommended to define each section as an area shape within a map element.

<map name="website_Map">
  <area shape="poly" coords="/*coordinates for first section*/" href="#About_Us1">
  <area shape="poly" coords="/*coordinates for second section*/" href="#About_Us2">
  <area shape="poly" coords="/*coordinates for third section*/" href="#About_Us3">
</map>

By assigning classes to these sections, you can easily apply effects such as mouseover interactions just like you would with any other HTML element.

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

Guide to implementing controllers in vuejs2

Hey there, I recently started using vuejs2 with a project that is based on laravel backend. In my vuejs2 project, I wrote the following code in the file routes.js export default new VueRouter({ routes: [{ path: '/test', component: ...

javascriptvue.jsvuejs2frontend

The webpage contains duplicate ID attribute value "x" that has been identified

In my Angular 7 project, three components (a, b, c) all use an input element with the same id of "x". However, component b has 4 input elements all using the id "x" as well. This poses Accessibility Issues as ids must be unique. The test cases utilize &apo ...

javascripthtmlcssaccessibilityangular7

The concept of "HTML paragraph shifting"

I am looking to implement a feature similar to paragraph sliding, but I am struggling to explain it clearly. For demonstration purposes, I have added it to my website for you to view. Please note that it may take some time to load. The paragraphs slide s ...

javascripthtmljquerycss

Sorting through arrays in JavaScript/React

My search functionality works well, but I'm facing an issue when the item is not found in the array. I attempted using objects.Keys to handle this situation, but it's displaying on render instead of when the book is not found as expected. Should ...

javascriptjsonreactjsfiltering

The functionality of a switch statement relies on the presence of a React-Router

Is there a way to dynamically change the text in a paragraph based on which Route is currently enabled? I tried using a switch statement, but I'm unsure of how to implement it. Any suggestions or ideas? import React from 'react'; import &ap ...

javascripthtmlreactjsreact-router

CSS absolute positioning not functioning as expected

I am experiencing an issue with positioning child elements within a parent element. The parent element is relatively positioned, while the two child elements are absolutely positioned to be in the top left and top right corners. However, despite having exp ...

htmlcss

use jq to unravel complex json data before importing into pandas

While attempting to convert a JSON file into a pandas dataframe, I came across a helpful solution on Stack Overflow. My JSON file contains numerous attributes, making it time-consuming to define rules for each field manually. Is there a way to automatic ...

jquerypythonjsonpandas

Enhancing functionality through interactive buttons: optimizing the performance of this dynamic data code

I am seeking a more efficient way to retrieve names from a database using PHP and MySQL. Currently, I have multiple if isset statements in my code, one for each button that retrieves a specific name. Is there a better approach to achieve the same result ...

phphtmlmysql

What is the best way to align HTML elements in a single row?

I have the following code snippet... <div class="header"> <div class="mainh"> <div class="table"> <ul> <li><a>smth</a></li> ...

htmlcssalignmenthtml-liststext-align

Identify all td inputs within a TR element using jQuery

Is there a way to retrieve all the input values within each table cell (td) of a table row (tr) using jQuery? Suppose I have a tr with multiple td elements, and some of these tds contain inputs or select elements. How can I extract the values from these in ...

javascriptjquery

Only initiate the loading of the iframe within the div upon clicking a specific element

Is there a way to delay loading the content of a div until it's clicked, instead of having all data loaded at once when the page loads? I noticed that removing unnecessary divs made the page load much faster. How can I prevent all data from being loa ...

javascripthtml

Adding Angular Components Dynamically to HTML Using a String, and Initializing with Bootstrap Framework

I am interested in achieving the following: Here is a snippet of code that I have: <body ng-app="MyApp"> <div id="content"><button onclick="addCode()">Add Code</button></div> </body> The function "addCode()" does this ...

phpjqueryangularjstwitter-bootstrap

Converting a Unix timestamp to a formatted date string in Firebase: A step-by-step guide

Is there a way to change a timestamp from 1333699439 to the format 2008-07-17T09:24:17? For now, I have been utilizing Firebase.ServerValue.TIMESTAMP for timestamps in Firebase. ...

javascriptangularjsfirebasefirebasesimpleloginfirebase-hosting

Error caught for the jQuery JavaScript function with an unexecuted reference

I am encountering an issue with the error message Uncaught ReferenceError: downloadCSV is not defined at HTMLAnchorElement.onclick. Can someone please assist me in resolving this error? My intention is to retrieve JSON data and then download it as an Exc ...

jquery

Utilizing identical CSS for both mobile and desktop interfaces, while customizing margins and paddings separately

I am facing a problem on my website where the padding and margins appear differently on different devices. I have compared screenshots of the site on an Android device and my desktop PC: Site displayed on mobile device: Desktop view: Below is the CSS co ...

androidhtmlcssmobile

Issue with iPad Pro displaying Bootstrap 4 Navbar toggle icon

Having trouble with my Bootstrap 4.1.1 navbar on iPadPro. It's not displaying the correct data from the div and it's not collapsing properly. However, it works fine on small devices. Any suggestions on how to fix this issue? Here's the code ...

cssangulartwitter-bootstrap

Different choices for pick component in Bootstrap

Struggling to create an inline label with a select element using Bootstrap, I came across this helpful example on jsfiddle: http://jsfiddle.net/kokilajs/1q53pr6j/ <form id="searchForm" method="get" class="form-horizontal" role="form"> <div class= ...

jqueryhtmlcsstwitter-bootstrap

Utilizing JavaScript variables imported from an external library in Next.js: A Guide

I am currently working on a Next.js with Typescript website and I am in the process of adding advertisements. The ad provider has given me instructions to embed this JavaScript code on my site: <script src="//m.servedby-buysellads.com/monetization. ...

javascriptreactjstypescriptnext.js

Is it possible to assign a Bootstrap class as a variable in a custom CSS declaration?

While trying to make my website responsive, I planned on using media queries to adjust text size and other elements. The issue arises because I rely on bootstrap for setting text sizes. Is there a way to apply bootstrap classes in my CSS file? For instanc ...

cssbootstrap-5

What is the best way to insert hyperlinks within every cell of a table using Angular?

I am currently working on a table created with ng-repeat in Angular. The cells are populated by variables in the scope. <tbody> <tr ng-repeat="item in items" myDirective> <td>{{item.title}}</td> <td>{{item.field}}&l ...

javascripthtmlangularjs