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.
<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" /> Here we have the code snippet where an image component is being referenced. <template&g ...
Seeking assistance with a unique coding predicament. I've got an HTML file that showcases a JavaScript-powered clock, but now I'm looking to enhance it by incorporating a looped video beneath the time display. Oddly enough, when the clock feature ...
Currently, I have successfully implemented a sticky top navbar. The issue arises when I try to add a 15vw margin to the right side of the logo image, similar to what I have done on the left side. Despite my attempts, it doesn't seem to work and I&apos ...
Trying to troubleshoot the continuous looping and crashing issue in my app caused by passing variables in the dependency array of the useEffect hook. These variables are state variables from the context provider. The goal is to make the useEffect hook run ...
First time asking a question on this platform! I'm attempting to achieve a "pixel perfect" horizontal alignment of two lines of text, with each line having a different font size. <style type="text/css"> * { font-family: sans-serif;} ...
Encountering some issues with Facebook and Firefox. Specifically, the registration popup on Facebook always appears empty when using Firefox. I have tried different approaches to the popup code but so far, nothing seems to be resolving the issue. Is there ...
Utilizing the jQuery nestable plugin in my React App has been a lifesaver for meeting my business needs. Despite being aware of the potential complications that arise from mixing jQuery with React, I couldn't find the exact functionality I required in ...
I'm not very experienced with JavaScript, so please bear with me. I'm attempting to create a fixed header that transitions to 50% opacity when scrolled down and returns to full opacity (opacity: 1.0) when scrolled back to the top. Here is my cur ...
Is there a way to delay the start of a slideshow in JavaScript while keeping the initial background image visible for a set amount of time? I believe I can achieve this by using the setTimeout method, but I'm struggling to implement it correctly. Be ...
How can I display the first chart larger and all subsequent charts together in one window without requiring scrolling? This will eventually be viewed on a larger screen where everything will fit perfectly. Any recommendations on how to achieve this? Here ...
In the table-like container, I have elements with horizontal scrolling. Each element has the same width but potentially different heights. I want to add a button in the top-right corner of each element without it disappearing when scrolling. I came across ...
My goal is to utilize jQuery and ajax to transmit information to a php file. However, I am facing an issue where I can only retrieve the response from ajax in json format and unable to successfully send the data. $.ajax({ url: 'myFile.php' ...
Is there a way to enable slideToggle for all my queries? Currently, it is only working on the first query. Any suggestions on how to resolve this issue? JS code $(document).ready(function(){ $("#SendCopy").click(function(){ $("#users").slideToggle("s ...
I have been developing a DAO (data access object) for the project I am currently working on, which acts as an abstraction of a redis database. Below is the code relevant to my upcoming query: var redis = require("redis"); var _ = require("underscore"); va ...
Take a look at these two images showcasing my website on different devices: Mobile: https://i.sstatic.net/spsYj.png Desktop: https://i.sstatic.net/AvFiN.png I have organized the content using simple ul and li tags. How can I adjust the layout so that ea ...
After successfully calling a PHP function using jQuery, I encountered an issue with the Ajax success function where I am unable to reset the form data upon successful submission. I attempted using the if(data.status == 'success'){ } format as we ...
Trying to align two divs side by side using Obelisk, I referred to this post for guidance on how to do it: How to place div side by side. The solution required declaring classes in CSS. Utilizing the instructions from a tutorial (https://github.com/hansrol ...
Problem Description: I am utilizing Artifactory for my NPM packages. When attempting to install them on "Windows - 7", everything is functioning correctly. However, on "Windows - 10" an error is being displayed and the packages are not installing. Error M ...
I am dealing with an array of objects that may seem a bit complex initially, but I will simplify it as much as possible. Each object in the array has properties like Engineering, Environment, and others, each containing a sub-object called radars. The rada ...
I have a series of TypeScript objects structured like this: interface MyObject { id: string, position: number } My goal is to transform this array into a map format where it shows the relationship between id and position, as needed for a future JSON ...