My goal is to create hotspots on different areas of an image that is displayed on an HTML page. The challenge I face is that the dimensions of the image change depending on the size of the display screen:
<img height="100%" width="100%" src="img.png"/>
I'm trying to figure out how to hotspot it effectively. One idea I had was to use a function that can map the original coordinates to those of the resized image.
To create interactive hotspots on an image, you can nest the image and hotspots within a relatively positioned container and then absolutely position the hotspots using percentages:
Style with CSS:
.hotspotted {
position: relative;
}
.hotspot {
display: block;
position: absolute;
}
#hotspot1 {
height: 81%;
left: 9%;
top: 16%;
width: 45%;
}
#hotspot2 {
height: 18%;
right: 11%;
top: 20%;
width: 11%;
}
Markup with HTML:
<div class="hotspotted">
<img height="100%" width="100%" src="img.png"/>
<a href="#" id="hotspot1" class="hotspot"></a>
<a href="#" id="hotspot2" class="hotspot"></a>
</div>
Additional Tip:
If utilizing a map, it's recommended to calculate new coordinates rather than rely solely on percentages. This calculation can be achieved by using the following formula:
new_x = (original_x / original_image_width) * new_image_width
new_y = (original_y / original_image_height) * new_image_height
To calculate the position of coordinates (x,y) as a percentage, follow these steps:
For example, if your image is 200px wide and 200px high, and your coordinates are x=50px, y=100px, you can convert them as follows:
x = 50/200*100 = 25%
y = 100/200*100 = 50%
This means that your coordinates are always 25% from the left side of the screen and 50% from the top, assuming the image takes up the entire screen. Does this answer your question? :)
Hey everyone, I've been attempting to center my text using Bootstrap, but for some reason it's not working. Can someone help me figure out what's going on? <footer class="row p-1 mt-3 bg-primary text-white"> <p class= ...
I am working on creating a guest return funnel that will display the number of guests and the percentage of prior visits for three categories of consumers: 1 Visit, 2 Visits, and 3+ Visits. $(function () { var dataEx = [ ['1 Vis ...
I'm working on incorporating a logo into my MVC 4 website. When the logo is clicked, it should navigate to the home screen. In order to achieve this, I've added the following code snippet in the _Layout.cshtml file. <a href='<%= Url.A ...
I have encountered an issue with my code where a simple HTML jQuery slider works fine in a standalone file, but when I integrate it into WordPress, it no longer functions properly. The slider is being added to the index.php file by hardcoding the script li ...
Trying to incorporate a trackCues.vtt file stored in my solution into my view has been a challenge. I attempted to load this resource following this code: <video style="margin-top:30px;margin-bottom:30px" width="800" height="600" controls> <s ...
Alright, so I've got this world map on one of my WordPress pages and here's an example of the code: <area onmousedown="modifyImage('world_map_01', './images/map/asia.jpg')" onmouseout="modifyImage('world_map_01', ...
How come the menus look different in Firefox compared to Chrome, Safari, and IE? I've tried adjusting the CSS but can't seem to get it just right. Any suggestions on how to fix this? In Firefox, there's an overlapping part at the bottom of ...
I recently integrated a jquery plugin into my project to develop a wysiwyg text editor. I set up a textarea element to contain the text editor: <textarea class="editor" rows="3" name="textEditor" id="textEditor&quo ...
Is there a way to extract the values of prName and prQty from the 2D array? html <h1 v-for="item2 in productListAlaCarte" :key="item2"> <td>{{item2.prName}} {{item2.prQty}}</td> ...
I am trying to determine the file size limit for my file upload control. Below is the HTML code snippet: <input id="uplTheFile" style="WIDTH: 318px; HEIGHT: 22px" type="file" size="80" name="uplTheFile" runat="server"> I have checked the code but ...
Currently, I am developing an Android app that incorporates swipe screen functionality. To achieve this, I followed a tutorial which can be found at the following link: http://developer.android.com/training/animation/screen-slide.html#fragment My goal is ...
How can I enlarge the image to fully occupy the space available in an element block, similar to the following image: (the black box represents the element box and the grey area is supposed to be the image.) https://i.sstatic.net/F0E82.png In the current c ...
https://i.sstatic.net/Tu9QM.pngCurrently, the title has a fixed background color which may widen if the resolution is smaller than the original size. My aim is to create a dynamic background color that adjusts based on the resolution. Regardless of wheth ...
Is there a way to prevent pinch zoom in an electron app? I've tried different methods, such as using event.preventDefault() on touchmove/mousemove events in JavaScript, adding meta viewport tags in HTML, adjusting -webkit-text-size-adjust in CSS, and ...
I'm completely new to Javascript and I've been trying to move all elements with a specific class inside a particular div. After doing some research, I found a solution that worked using IDs. However, when I tried to adapt it to work with classNam ...
I am working with a group of ToggleButtons in my app and I want to customize their background colors. Currently, all the buttons have a gradient defined by <.untoggled-button> class, with an added blue overlay for unselected buttons. However, I am fa ...
My customized navigation bar is using the <View> element. https://i.sstatic.net/QA8Ad.png Is it possible to add a bottom shadow similar to the default react-navigation bar (refer to the image below)? https://i.sstatic.net/ORD8J.png I find it chal ...
I recently started exploring OWASP ESAPI for preventing XSS and integrating the JavaScript version into my application. As per Rule #2 in the XSS prevention cheat sheet, it is recommended to "Attribute Escape" before inserting untrusted data into attribut ...
I have designed a confirmation dialog using Bootstrap 4 with the following code snippet: <div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;"> <div class="modal-dialog"> <div class="modal-co ...
Is there a way for me to use CSS to access the numbers (1 and 2 in this example) at the end of the paragraph's class attribute? <p class="cooking-step-1"><br> <!-- Second step ... --><br> </p> <p class="cooking-s ...