I am interested in developing a webpage featuring a black and white image of 5 individuals. When hovering over each person, I would like them to illuminate and display relevant information in a dialog box next to them.
Do you have any tips on how I can achieve this interactive effect?
Thank you in advance! :)
You have two options to achieve this effect: either use an image map or overlay "invisible" divs on top of each person. Each method has its own advantages and disadvantages, but an Image Map was specifically designed for your needs.
To highlight a person, you can only do so by overlaying a .png image (when hovering over the invisible div) with a transparent background showing a cutout of that individual, which has been edited to appear "highlighted".
Here is the HTML code snippet:
<a href="#" class="highlightit"><img border="0" src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg">
<span> something </span>
</a>
CSS styles for the highlighted image and text:
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.highlightit:hover span{
display:block;
}
.highlightit span{
font-size:20px;
color:white;
background:black;
text-decoration:none;
display:none;
width:100%;
padding:10px;
position:relative;
margin-top:-20px;
}
To see a preview of this effect, visit the following fiddle link: http://jsfiddle.net/wandarkaf/cNC5G/.
Here are a couple of approaches you can use:
Utilize CSS Sprites
Combine the original image with its different hover states into one large image (arranged vertically).
Set this combined image as the background of a DIV that only displays the original image initially.
Position links within the DIV where desired (ensure the container DIV is relatively positioned).
Adjust background position on link hover to display the correct image and reveal hidden text content in a separate element (DIV/SPAN/etc.).
Use Javascript.
I'm currently working on implementing a side nav bar using the code snippet from this link: However, when I integrate this code into my application, the left nav bar only extends to the height of the links, and the content area begins after the left ...
Within a modal, I am showcasing a log inside a read-only <textarea> field that contains data fetched from my MySQL database. Below this, there is a writable <textarea> field where users can input updates to the log, which are then added to the ...
The HTML structure I am working with is as follows: <p> <a href="#"> <span class = "class-for-span"> SOME TEXT HERE </span> </a> </p> Along with the following CSS: p a{ color: grey; text-decora ...
I'm encountering an issue in Next.JS where a component is not recognizing the image source passed through a prop. I am providing the path of an image named "logo.jpg" from the project's public folder. The image successfully displays when used as ...
I have experience using the Jquery date picker (jsfiddle), but now I am interested in creating an AM/PM picker using Jquery. My goal is to have a button that, when clicked, displays the time with the format (12:56:AM) or (01:12:PM). Can anyone provide gu ...
I need help creating a seamless transition between anchor points on a single page, while keeping a fixed navigation menu that highlights the active section. As a novice, I am unsure how to incorporate "( document.body ).animate" or any other necessary code ...
I have noticed that certain libraries like "framer-motion" in react utilize this syntax, for instance to include an animated H1: <motion.h1> where the h1 tag is enhanced with animations specified in the component's props. What confuses me is ho ...
I am attempting to customize a global CSS class (.ant-content) on a per-route basis. I have experimented with importing CSS files that override .ant-content for specific React components loaded in different routes. However, the issue is that these CSS fi ...
Does anyone have recommendations for a JavaScript OCR API that can easily be accessed via JavaScript? I'm searching for an API similar to this: upload an image along with the desired result type (e.g. numbers, objects, text, mixed, etc) and receive t ...
I have a component that displays only the most recent product fetched from an API: const about = ({products}) => { const data = products.attributes console.log(data) return ( <div> <h1>{data.Name}</h1> ...
While there are countless tutorials on developing chat applications using socket.io and node.js, the event-driven advantage of Node is undeniable for building chat apps. However, a recent thought crossed my mind - how can I ensure the sustainability of my ...
I am looking to create a model class with two variables (label and key) that store functions. Each function should take data as an input object. If no specific functions are specified, default functions should be used. The default label function will retur ...
Dear webmasters, I am seeking advice, tools, or guidance to solve a simple problem. I have my own HTTP server that responds to HTTP requests. Example: If I visit the link: http://ip_server/link1, it performs a specific functionality If I visit the lin ...
I have a dynamic table displaying various data, mostly text, but with a few buttons included. Now, I need to figure out how to handle this Here is the current data structure: [ { "BET": 57630343, "CUSTOMER": 181645, "XX_FILL OPEN": true }, { "BET": 57 ...
I've been searching for a solution, but I have come to the conclusion that this question is quite peculiar. How can I convert the following text file using tabs for spacing: parent child child parent child grandchild grand ...
I have developed a unique form (material dialog modal) that allows users to create an account. When the user clicks on the Register button, their created account should appear in a dropdown menu without redirecting or reloading the current page. I am facin ...
Struggling with the z-index issue on a video tag in Windows Mobile, particularly when it comes to my search box. <div portal:substituteby='common/search::search'></div> The goal is for the search box to appear above the video. ...
Recently, I began learning webgl and have been attempting to create triangles with random sizes and positions similar to the image below using javascript. I understand that I need to utilize a for loop within the function initScene() but I'm uncertai ...
I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left. Is there a way to achieve this using ...
I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...