Currently working on a game project that involves layering multiple images (tiles) on top of each other to create a sense of depth. However, I have encountered an issue when attempting to click on these overlapping tiles. Due to their transparency, clicking on one tile often triggers the event for another image. How can I prevent clicks on transparent areas of an image?
I attempted to replicate a specific scenario using the map feature.
var spool = document.querySelectorAll('.clicked');
spool.forEach(item => {
item.addEventListener('click', event => {
alert(event.currentTarget.getAttribute('alt'));
})
});
var mapo = document.querySelector('.map');
mapo.addEventListener('click', event => {
var searching = event.target.parentNode;
while (true) {
if (searching.id == 'trigerme') {
alert(searching.getAttribute('alt'));
break;
}
searching= searching.previousSibling;
}
})<img src="https://www.w3schools.com/html/workplace.jpg" alt="something else yes" width="400" height="379" class='clicked' id="trigerme">
<img src="https://www.w3schools.com/html/frenchfood3.jpg" alt="something else no" style="position:relative; margin-top:-379px;" usemap="#workmap" width="400" height="379" class='clicked' >
<map name="workmap" class="map">
<area shape="rect" style="background-color:red;" coords="34,44,270,350" alt="Computer" >
</map>Working with react and material ui, I am facing an issue in positioning a divider close to the bottom of the webpage along with a logo. In my jsx file, I have a functional component utilizing material UI drawer on the left side of the browser, where I have ...
Ever since implementing the load function to load content into a DIV upon document ready, I've noticed that all associated functions are firing multiple times (often twice, and sometimes endlessly). The scripts included in the head tag of all pages a ...
I need help with this issue: The image loses its reflection during the transition until it returns at the end. Any suggestions are appreciated! Thank you! .specials-box { width: 330px; margin: 50px 0; height: 500px; position: relative; ...
Check out my website at: This section discusses: https://i.sstatic.net/WTTxJ.gif At the bottom of the image, a 'gap' appears. Instead of using standard HTML img tags, I used Next.js Image like this: <Image src="https://ticket- ...
Is there an alternative to using multiple modals? I require the ability to have multiple instances of modals. Upon clicking "Open modal" on the main page, a form modal (Modal-A) should open, with a link inside Modal-A that can open another modal (Modal-B) ...
https://i.stack.imgur.com/EVQVF.pngAre there alternative methods to select classes with the same name but in different table rows? Currently, I am using html class="className + id" and then in jquery to select $('.className'+id)... some code. Is ...
Hello, I'm attempting to create a function where clicking on one button changes its border color to blue and changes the border color of all other buttons to orange. However, I'm encountering an issue where the border color for the other buttons ...
My webpage contains a single table where I want to showcase an image in row1 along with its details. As each image is displayed, its corresponding details are added to a list. There are a total of 27 images spread across 9 rows in the table. Once all the ...
Each item in my list (ProjectActivityList) has an Edit button which, when clicked, should open a modal for editing that specific item. The modal requires an ID to identify the item being edited. var ProjectActivities = React.createClass({ onEditItem: ...
My UI dashboard contains multiple forms like "edit title" and "edit description", each with just one input element. I am looking to streamline database updates and server actions in next js 14, utilizing useFormState on the front end. While I have achieve ...
Apologies for the confusion in my previous question. I am not looking to alter the user's browser settings but rather focus on optimizing my website layout for the most common resolution size. Ideally, I want my page to adjust and zoom in if the user& ...
Currently, I am working on developing a real-time chat application using Node.js, React, and Socket.io. The chat functionality is operational in theory, but there seems to be an issue where the sender's message only appears on the recipient's scr ...
Is there a way to generate the video element in Next JS using TypeScript on-the-fly? When I attempt to create the video element with React.createElement('video'), it only returns a type of HTMLElement. However, I need it to be of type HTMLVideoEl ...
I have created a function in jQuery that uses $.post to send data to a PHP file. The query in the PHP file is working fine and returning the data back successfully. JavaScript code: function send_agenda_data(cidade_data){ var data = {'cidade_dat ...
I am working on a project that involves multiple ng-repeat lists with several filters. Currently, I am using (ex:A.value) if (ex:B.value), but I would like to implement multiple filters. The filters I want to incorporate are recommend_search, skill_searc ...
I am currently implementing the jquery.ime editor in my project, which allows for multi-language editing capabilities. The library I am using can be found here. By default, the language JSON files are loaded on "change" events. However, I would like this f ...
I am attempting to create a schedule table using vue.js. Each row represents an activity (in this example, only one is hardcoded), and each column represents a time period. The cells contain the names of users if they are scheduled during that time. https ...
I'm having some trouble using the rgb function in Material Box. How can I achieve this successfully? The current method I am using is not working as expected. Original Code: <Box width={24} style={{ background: `rgb(${appoi ...
Issue with capacitor app input Correct input in chrome app I'm facing a problem related to regional settings in my mobile application, developed using CapacitorJS and Vue.js 2. The datetime-local control is appearing in a language that isn't the ...
After upgrading my website to Wordpress 3.4, I encountered a major issue that caused significant damage to my site. It seems that half of my posts were not accessible and resulted in a 404 error. Additionally, pages 3 and 4 of my posts also showed a 404 er ...