https://i.sstatic.net/G1uWk.png
I need assistance in creating a feature where users can see short descriptions of individuals in a photo when hovering over them (not like a tooltip). I attempted to use an area map but encountered difficulties in implementing it here. As a beginner, any guidance on how to achieve this would be greatly appreciated. Thank you.
One approach to creating a responsive solution involves measuring the position of each face, as well as the width and height of the overall image. CSS can then be used to place a transparent, hoverable element over each face.
In this example, I simply used a physical ruler on the photo as pixel-perfect accuracy is not necessary.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
--imgW: 21.5;
--imgH: 10.5;
width: 100vw;
height: calc(100vw * (var(--imgH) / var(--imgW)));
background-image: url(https://i.sstatic.net/G1uWk.png);
background-size: 100% auto;
position: relative;
}
.container> :nth-child(n) {
position: absolute;
left: calc(100% * var(--left) / var(--imgW));
top: calc(100% * var(--top) / var(--imgH));
background-color: transparent;
width: calc(100% * (var(--right) - var(--left)) / var(--imgW));
height: calc(100% * (var(--bottom) - var(--top)) / var(--imgH));
z-index: 1;
}
.container> :nth-child(1) {
--left: 4.5;
--right: 6.75;
--top: 2.25;
--bottom: 4.5;
}
.container> :nth-child(2) {
--left: 10.75;
--right: 13.25;
--top: 3;
--bottom: 5.5;
}
.container> :nth-child(n)> :first-child {
display: none;
background: white;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
padding: 1vw;
overflow: auto;
}
.container> :nth-child(n):hover> :first-child {
display: block;
}<div class="container">
<div>
<div>Person 1</div>
</div>
<div>
<div>Person 2</div>
</div>
</div>For information on creating image maps, you can check out the w3schools tutorial at https://www.w3schools.com/html/html_images_imagemap.asp
I experimented with adding hover text to an image map by setting visibility to visible on hover. Below is the code I used. Keep in mind that manual positioning of the text may be necessary.
<!DOCTYPE html>
<html>
<body>
<style>
.coffee-text{
visibility:hidden;
}
.coffee:hover .coffee-text{
visibility:visible;
}
</style>
<h2>Image Maps</h2>
<img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap" class='coffee' >
<area shape="circle" coords="337,300,44" href="coffee.htm" ><span class='coffee-text'>Coffee</span>
</map>
</body>
</html>I am currently working on creating multiple boxes or templates (5 on each row) from a movie API. I have successfully retrieved all the necessary data and do not require a responsive design. https://i.sstatic.net/CNz9R.png The issue arises when I attempt ...
I've been attempting to display a select box with two options side by side in a list format. Struggling to find any libraries that can achieve this functionality. Here is an example: <select> <option x><option y> <optio ...
Is there a way to achieve an Outer Glow effect for a non-standard font like Titillium on a website, even if not everyone has the font installed on their computer? I'm open to using Javascript (including jQuery) and CSS3 to achieve this effect. Any sug ...
the webpage I need help with is (issue with general menu drop down) Hello I recently decided to enhance my menu by incorporating icons. I had successfully implemented a drop-down menu using only HTML and CSS, but when I attempted to add icons next to ea ...
I need help with a script I'm creating to automatically populate Google Forms. I am able to select checkboxes using querySelector, but they don't have a .click() method or similar. How can I go about checking the checkboxes? ...
Is there a way to disable the zoom feature on our website specifically for Android phones/devices without affecting iPhones? Perhaps targeting the Chrome browser on Android would be sufficient, but we should also verify the mobile screen size. ...
After many attempts, I am still struggling to resize my image. Can anyone offer assistance? I want all images to have the same dimensions. Here is the HTML code: <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='sty ...
Is there a way to change the color of the select drop down box arrow part? It needs to be compatible with IE9, Firefox, and other browsers. Currently, the drop down box looks like this: I would like the arrow part to have this appearance: I believe this ...
I am working on an HTML page and need to insert an image. Here is the code I currently have: <img src="../Images/logo.jpg" alt="Logo" height="50"> I chose "../Images/logo.jpg" as the source because my logo.jpg is located two levels up from the curr ...
Is there a way to split a cell in a Material UI table?I am aware that I can create a component to achieve this, but I'm wondering if there is another approach that I may not be aware of. Splitting a cell means having two values separated by a line wit ...
I am currently facing an issue with my webpage where I have 3 images displayed. I have implemented an event listener to detect clicks on the images, and once a click occurs on one of them, I want everything else on the page to become blurred, including the ...
I am having trouble incorporating Angular Material's md-autocomplete into my angular application. I have already customized the CSS being used in my application, but when I add the Angular Material CSS, it messes up the entire page. Even when I tried ...
I set up a heading on my website by using the following HTML code: <div id="question"> <h1>Question Goes Here</h1> </div> The font style is controlled by my CSS and it's set to size h1. The text displayed there is tempora ...
Encountering a problem with displaying the product details page. There are four bootstrap tabs, each containing some Product Items with a Quick View link button. The issue arises when clicking on the link button, as all tab items with the same ID are displ ...
I have included Font Awesome icons within the <span> tags and applied the necessary styles in my CSS file. However, the icon is not being displayed correctly. I am looking for a solution to ensure the correct display of the icons. The HTML code wher ...
GraphStream is a revolutionary graph library created in Java that offers Java developers a simple way to visually represent dynamic graphs either in memory, on screen, or in files. Check out this demo video. With GraphStream, you can effectively handle th ...
I'm a beginner in Python and Scrapy, currently working on my first project to crawl web security information from a website. However, when I try to run it using cmd, I encounter the message "Crawled 0 pages (at 0 pages/min), scraped 0 items (at 0 item ...
Problem persists with the fixed element at the bottom of my mobile device when I scroll. It seems that the height is recalculated each time due to an increase in document height on mobile devices. The issue appears to be related to the address bar fading ...
Is there a way to create a 'div' element in an HTML document and adjust the background transparency using CSS or Javascript/JQuery in order to achieve a look similar to Simple Calendar Widget or Glass Widgets from Android? I have tried using the ...
Check out this incredible jumbatron I want to spruce it up by adding three random emojis on the right side like in this example I created using paint: how it should look Any suggestions on how I can achieve that? Here's a snippet of my CSS: .ju ...