Tips for creating sections of an image that appear to glow when hovered over

I have a client who is affiliated with a local legion and specializes in restoring military regiment photos. He wants me to create a website where users can hover over each person in the photo, causing their outline to glow while displaying a tool tip with their name or linking to more details further down the page.

I've previously used image mapping via poly mapping on a website like www.image-maps.com, which would require outlining each person in the photo individually. While I am willing to do this, I wonder if it might be easier to achieve using Photoshop to create a map where hovering over a person triggers a glow effect on the corresponding area of the image.

My research has led me to examples like a US map that showcases similar behavior:

However, I'm unsure how to adapt these examples into a custom solution for my specific project rather than sticking to a plain US map demonstration.

If anyone has recommendations or suggestions on the best approach to save time and effort, I would greatly appreciate it.

Thank you!

Answer №1

If you're looking to create interactive image maps, I recommend checking out the following:

http://www.example.com/image-maps

This website offers a great tool for easily creating HTML map areas and is compatible with Adobe Photoshop. By using both tools together, you can effortlessly create paths in Photoshop and extract the coordinates for your HTML map.

I have personally had great success utilizing these resources and was able to achieve impressive results in a short amount of time.

Give them a try and see how they work for you!

Answer №2

For this unique effect, create a personalized image for each individual where they are glowing. Utilize CSS transitions to smoothly fade between images and HTML map areas to dictate which regions trigger the corresponding highlighted image.

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

Is there a method available that would allow me to display my HTML code within a frame using Selenium WebDriver and Java?

Currently, I am in the process of automating an Application that includes several embedded iframes. I am wondering if there is a method to view my HTML source code within these frames. ...

Encountering an undefined value from state when implementing useEffect and useState

One issue I am facing is that the state of my projects sometimes returns as undefined. It's puzzling to me why this happens. In the useEffect hook, I have a function that fetches project data from an API call to the backend server. This should return ...

Is React capable of storing and recognizing images within its system?

As a junior developer, I find this aspect confusing. Specifically, does reusing the same image on multiple routes in React result in the user downloading it more than once in the browser? I am striving to understand whether using the same image repeatedly ...

What is the best way to search for a specific item in Express.js?

I recently got the Leaderboard API issue fixed, but now I'm encountering a new problem with express Querying. Specifically, I'm attempting to search for a specific Discord ID using quick.db as my database. I've included an excerpt of my expr ...

What is the process of enabling a concealed input feature?

I have a straightforward script that enables users to input a value into a form. These values are then combined to create a URL, which is used to load a page within an iframe. Everything works fine... but I'm having trouble figuring out how to hide t ...

What is the method for including a placeholder with sequential numbering?

When I click on the "Add String" button, it clones the first table row with an input in the table and adds it to the table. I also need to add a +1 number in the placeholder of the copied element. How can I determine the last placeholder before copying and ...

The initial JavaScript load shared by all users is quite large in the next.js framework

Currently working on a project using the Next.js framework and facing an issue where the First Load JS shared by all pages is quite heavy. I am looking for advice on possible strategies to reduce the weight of the JS file, and also wondering if there ...

Encountering issues with basic login functionality using Node.js and MongoDB - receiving a "Cannot

I'm experiencing some difficulties trying to set up a login for my website. I have a user registered in my database with the email: [email protected] and password 123. The issue arises when I attempt to use the POST method, as it returns the fo ...

Angular2 does not load Js twice

I specified the path to my JS file in angular.cli. It loaded successfully during the initialization of the Angular app, but when navigating back to the component, it failed to load. Any suggestions on how to fix this issue would be greatly appreciated. Th ...

open a new window with a reference based on the name

In order to obtain a reference to the currently open window, I utilize the following code: var refWindow = window.open("mypage1", "name_mypage"); If I wish to close the window, I simply use this command: refWindow.close(); When I refresh the screen (by ...

How to dynamically load bootstrap-multiselect within a loop in a vueJs application

I am attempting to dynamically load bootstrap-multiselect in a loop using VueJs. My desired implementation looks something like this: <div class="col-xs-6 col-sm-4 mb-1" v-for="params in param"> <select class="mult" multiple="multiple"> ...

Asynchronous loading of HTML templates using JQuery/JavaScript

Currently, I am in the process of creating a webpage that includes code snippets loaded from txt files. The paths and locations of these txt files are stored in a json file. First, the json file is loaded in, and it looks something like this: [ {"root":"n ...

Highlighting table rows using jQuery on click and restoring them on change by toggling between alternating

Hey there, I'm a newbie to jQuery and this is my first post. Spent some time searching but couldn't find exactly what I needed. I'm trying to have alternating row colors in a table; one class as NULL/empty and the other as alt. My jQuery sc ...

What is the most efficient way to organize these arrays?

I've been racking my brain trying to figure out a sorting logic for some arrays, but I'm stumped. Maybe you have an idea? Imagine we have an array of objects structured like this: let obj = {day:'2', month:'6', year:'19 ...

Utilize JavaScript when sharing on social media to avoid the possibility of embedding the entire

This javascript code snippet is extracted from www.twitter.com (simply click to view the source code). I have reformatted it for better readability: if (window.top !== window.self) { document.write = ""; window.top.location = window.self.location; s ...

Sorting elements in an array using jQuery is a common task that can be easily accomplished

Query: I am faced with a challenge in handling a table where rows are dynamically added upon button clicks. To allow users to rearrange the rows, I have incorporated the jquery-ui sortable() function for sorting purposes. Consider the following scenario: ...

Methods for dynamically adjusting pixel coordinates in HTML5 Canvas

My latest project involves an innovative HTML5 drawing application that leverages the power of the HTML5 Canvas element. I've successfully implemented code to create stunning sketches on the Canvas. Initially, my Canvas was set at a size of 500px x 5 ...

Positioning the dropdown under the search input in Ngbootstrap

Currently, I am referencing this specific documentation as I am interested in constructing a search bar similar to Gmail's layout. The search bar will consist of an input field along with a dropdown button that will display filter options. Regrettabl ...

Is there a way to use code to target a mesh in a three.js scene when a button is clicked?

When a button is clicked, I want a Three.js Mesh to be focused based on the button. For example, when the "view top" button is clicked, the mesh should be focused from the top. Is there an inbuilt method in three.js to focus a mesh or how can I calculate ...

What is the process for adding JSON data to a dropdown menu using PHP AJAX?

I am trying to populate a select html element with data from a list of JSON results. Here is the code I have attempted: JSON output: jquery loop on Json data using $.each {"Eua":"Eua","Ha'apai":"Ha'apai",& ...