I'm currently working on creating an interactive image for my website where clicking on points A, B, C, ... N will reveal bubbles with images and text inside them.
Would anyone be able to provide guidance on how to achieve this? Or direct me to resources that could help?
If you're looking to create an image map, consider using Gimp as suggested by Badacadabra. Alternatively, you can explore online tools like image-maps.com.
To identify each area within the map, assign unique IDs:
<img id="myImage" src="https://i.sstatic.net/ErRo2.png" usemap="#myMap" alt="" />
<map name="myMap" id="myMap">
<area id="node-a" shape="rect" coords="731,159,757,188"/>
<area id="node-b" shape="rect" coords="685,139,713,168"/>
<area id="node-c" shape="rect" coords="597,142,625,171"/>
<!-- ... -->
</map>
The challenge with image maps lies in their non-responsive nature. To overcome this issue in modern times, consider using a plugin such as Image Map Resizer by David Bradshaw. Simply enable it with this snippet:
imageMapResize();
An ideal approach to associating content with each node is by utilizing an Object:
var myData = {
"node-a": {
"title": "This point A",
"image": "image-a.jpg",
"description": "Lorem ipsum A dolor sin amet."
},
/* Add more nodes and their details here */
};
If crafting popups isn't your forte, various plugins offer ready-made solutions. For customization, try creating a simple div element that can be toggled:
<div id="myBubble">
<div id="myBubbleContent"></div>
<div id="myBubbleCloseButton">✕</div>
</div>
Add CSS styling and JavaScript functionality to enhance its visual appeal and interactivity:
// Script referencing DOM elements
// Use Array.from() instead of getElementsByTagName('area')
var areas = Array.from(document.getElementsByTagName('area')),
bubble = document.getElementById('myBubble'),
bubbleContent = document.getElementById('myBubbleContent'),
bubbleClose = document.getElementById('myBubbleCloseButton');
// Trigger popup on area click
areas.forEach(function(area) {
area.addEventListener('click', openBubble, false);
});
// Close popup on close button click
bubbleClose.addEventListener('click', closeBubble, false);
function openBubble() {
var content = myData[this.id];
bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
+ '<img src="' + content.image + '" alt="" />'
+ '<p>' + content.description + '</p>';
bubble.classList.add('shown'); // Using classList method
}
function closeBubble() {
bubble.classList.remove('shown'); // Utilize classList for better handling
}
Test out the functionalities by expanding the code snippet provided below:
Utilize the software GIMP to create your map element...
Below is a simple example that works without the need for JavaScript (HTML only):
<map name="map">
<area shape="circle" coords="46,441,12" title="N">
<area shape="circle" coords="168,374,11" title="M">
<area shape="circle" coords="217,347,11" title="L">
<area shape="circle" coords="238,339,10" title="K">
<area shape="circle" coords="260,323,11" title="J">
<area shape="circle" coords="299,306,10" title="I">
<area shape="circle" coords="348,296,12" title="H">
<area shape="circle" coords="399,308,12" title="G">
<area shape="circle" coords="490,286,10" title="F">
<area shape="circle" coords="537,220,12" title="E">
<area shape="circle" coords="550,195,10" title="D">
<area shape="circle" coords="610,156,10" title="C">
<area shape="circle" coords="699,152,11" title="B">
<area shape="circle" coords="745,174,11" title="A">
</map>
<img src="https://i.sstatic.net/ErRo2.png" usemap="#map">I'm currently facing an issue with a function that is designed to populate a field in the parent window when clicked. Specifically, it is meant to fill in a text field with a name. The challenge I am encountering arises when the field contains a sing ...
I am seeking assistance on implementing FluentWait using nightwatch.js. How can I achieve this? Within my project, I have a global.js file that includes: waitForConditionPollInterval : 300, waitForConditionTimeout : 5000, However, it seems like this ...
Whenever we employ the echo function in PHP, the content within the quotes is considered as HTML. In certain HTML editors that I have tried, they simply highlight all of the HTML code in one single color, which can be a bit perplexing. Does anyone know o ...
I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...
Recently, I have been working with vue-cli and vuex to implement a specific functionality. Here is the code snippet that showcases my current progress: methods: { filtered() { let vol = this.$store.state.data[1].data.filter(i => i.type === 'vol& ...
Here is my Express program designed to capture M-SEARCH requests: router['m-search']('/', function(req, res, next) { res.send('Received an M-SEARCH request\n'); }); This code specifically responds to the following r ...
I encountered a challenge: I have an array of integers nums and an integer target. My goal is to find the indices of two numbers in the array that add up to the specified target. Example 1: Input: nums = [2,7,11,15], target = 9 Output: [0,1] Output: Thi ...
I am currently working on a file uploader that needs to support various file types, such as images and videos. My goal is to apply different maximum file sizes for images (10MB) and videos (100MB) using a single instance of Multer, a middleware designed fo ...
I am currently working on implementing a live search feature in Laravel 7. Everything is functioning correctly, however, I am facing an issue where I am unable to add a (href a tag) to the result list. The results are being displayed in a select option usi ...
After updating my React/Next.js App, I encountered the following issue: Upon investigation, React is indicating that the isDisabled prop is not recognized on a DOM element. To resolve this, you can either specify it as lowercase isdisabled if you want it ...
Can someone please explain to me the difference between using session["user"].name and session["user:name"]? // I don't understand why we have to put the user session into the JavaScript global space :( var session = { user: { "Id":"d675c ...
Is there a way to retrieve the value from the span tag using this code snippet? var error = driver.findElement(webdriver.By.id('error-container-text')).getAttribute('innerHTML'); When I run the above code, I get a response that looks ...
configurations.py INSTALLED_APPS = [ ... 'myapp', 'django_bootstrap_icons', ] ... STATIC_URL = '/static/' MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR,'static,'media') STATIC_ ...
Here's a button I'm working with: <button class="glyphicon glyphicon-option-horizontal" (click)="myFuncion()"></button> Recently, I updated my bootstrap library from version 3 to 4.2.1 and now the icon is no longer visible. I' ...
Check out how my desktop page looks: Desktop version If you want to see how it should appear on mobile, click here: Mobile Version This is the HTML/CSS code for the desktop version, and everything seems to be working fine. .skills { width: 80%; ba ...
Currently, I am retrieving data from the server side using AJAX. My goal is to populate data from a list of objects into divs but I am facing an issue where I cannot create the div while inside the foreach loop. $(document).ready(function () { var ...
I'm in the process of developing an application that is able to function both in kiosk mode and regular mode (such as opening from a Chrome browser). However, I need certain features to be restricted to kiosk mode only. How can I determine if the appl ...
I've been attempting to set up a debugger for some JavaScript files that I'm working on in IntelliJ (version 2020.1.4). Following the guidelines provided here Debug with JetBrains Chrome extension, I believe I have successfully completed all the ...
I have implemented a LocalStorage feature to create a favorite list, but it only adds one item each time the page is reloaded. The items are retrieved from a JSON file. For a demonstration of how my code functions, check out this link: const [ storageIte ...
Here is my scenario: cols = [{field="product.productId"},{field="product.productPrice"}]; data = {products:[{product:{productId:1,productPrice:10}, {product:{productId:2, productPrice:15}}]} This is what I want to achieve: <div ng-repeat="product in ...