Imagine creating an interactive group photo with two mouseover effects:
I am inspired by this example (Map #2) - I want the group photo to have a darkened effect when the page loads, highlighting each person / showing an alternate colored image on mouseover.
The imagemap with tooltips is already set up (please note that the areas may not be accurate here due to using a different image).
Check out this cool interactive map on CodePen.
I managed to create a solution for an interactive map without using any JavaScript. Even though the example with <dl> and <dd> elements seemed a bit unclear, I worked through it successfully. I believe that using more specific elements like <figure> could make the process even smoother. Each element you hover over should have a distinct "hover" image to handle overlaps in the rectangles effectively.
HTML
<dl class="map">
<dd>
<figcaption>
<p>Man 1</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 2</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 3</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 4</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 5</p>
</figcaption>
</dd>
</dl>
CSS
.map {
display: block;
margin: 50px 0px 0px 40px;
padding: 0px;
position: relative;
background: url('map_silhouette_black.png');
width: 600px;
height: 400px;
}
.map dd {
display: block;
margin: 0px;
padding: 0px;
position: absolute;
cursor: pointer;
}
.map dd figcaption {
display: none;
margin: -50px 0px 0px -60px;
padding: 10px;
position: relative;
background: #333;
color: #FFF;
font: 14px sans-serif;
text-align: center;
border-radius: 100%;
width: 120px;
box-sizing: border-box;
}
.map dd figcaption:before {
content: '';
display: block;
position: absolute;
bottom: -15px;
left: 50%;
border: 10px #333 solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
.map dd:hover figcaption {
display: block;
}
.map dd:nth-child(1) {
top: 20px;
left: 20px;
background-position: -20px -20px;
width: 115px;
height: 335px;
}
.map dd:nth-child(2) {
top: 20px;
left: 135px;
background-position: -135px -20px;
width: 115px;
height: 345px;
}
.map dd:nth-child(3) {
top: 5px;
left: 250px;
background-position: -250px -5px;
width: 125px;
height: 385px;
}
.map dd:nth-child(4) {
top: 25px;
left: 360px;
background-position: -360px -25px;
width: 120px;
height: 350px;
}
.map dd:nth-child(5) {
top: 25px;
left: 470px;
background-position: -470px -25px;
width: 110px;
height: 330px;
}
.map dd:nth-child(1):hover {
background-image: url('map_silhouette_color1.png');
}
.map dd:nth-child(2):hover {
background-image: url('map_silhouette_color2.png');
}
.map dd:nth-child(3):hover {
background-image: url('map_silhouette_color3.png');
}
.map dd:nth-child(4):hover {
background-image: url('map_silhouette_color4.png');
}
.map dd:nth-child(5):hover {
background-image: url('map_silhouette_color5.png');
}
Give this code a try:
$(document).ready(function(e) {
$('.wrapper area').each(function () {
// Adding functionality to the mouseover event
$(this).mouseover(function (e) {
$('.popup').show();
});
// Adding functionality to the mouseout event
$(this).mouseout(function (e) {
$('.popup').hide();
});
});
});
On my ASP.NET page (WebForm1), I use a modal dialog WebForm2 (via the OpenForm2() JavaScript function) for additional processing. After closing the dialog, I update the UpdatePanel using JavaScript. However, I encounter an issue where the UI is not blocked ...
I'm facing an issue with a sliding carousel where the overflow-x property is set to hidden. The carousel displays 4 items at a time, and each item contains a button that triggers a pop-out menu positioned relative to its parent item. The problem arise ...
When the Contact button is clicked, how can I move the Close button below #panel? It's currently fixed in position. Here's my demonstration: https://jsfiddle.net/25u78gff/ https://i.sstatic.net/qDad9.png jQuery('.sub-menu').addClass( ...
Exploring the world of HTML, running smoothly with a static IP address 192.168.56.152 using apache on the host computer. <!DOCTYPE html> <html > <head> <title>OnlinePage</title> <meta charset="utf-8"& ...
I have been working on jQuery code that looks like this: function submitFormData() { $('#myform').attr('action', "./filterData.action"); $('#myform').submit(); } Here is the form being referenced: <form name="myf ...
I have a notification component that is displayed as a child component in the parent component after a button click. It automatically hides after a certain number of seconds. Here is the code I have developed: MyCode Parent component: <button (click)= ...
I need help customizing the background color of required input fields that are left empty when a user submits a form. Some of the fields are optional, but I want only the required ones to be highlighted in red. Specifically, the required fields have been ...
I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet: *'width' : width - seems to be causing issues for me / ...
I am attempting to customize the code found at this link so that the box slides to the left side instead of the right. I thought changing right: 0; to right: 100%; in the .overlay class would achieve this, but it is not working as expected. I want it to l ...
In my web application, I have a feature that eliminates specific elements from a webpage. After the initial filtering, I am looking to remove all divs that previously held content but no longer do. For instance, after the first pass, an element may appear ...
Currently working on a small chat application using Node.js, Express.js, and Socket.IO. However, I'm encountering an issue with formatting. Instead of displaying the message content within <span> tags as intended, it is printing out the actual t ...
Implementing jQ UI Autocomplete with multiple values Below is how my function is structured: mailto_input.bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) { ...
I am looking for a way to use jQuery to remove all items from a list that is contained within a div. The challenge lies in the fact that the ul element does not have a specific class or id, but the surrounding div does have an id attribute. <div id="m ...
Currently, I am faced with the challenge of updating values on my page in real-time without the need for constant webpage refreshing. To illustrate, consider a scenario where a user filters a real estate website by location and receives results showing the ...
Hey there! I'm showcasing my portfolio using lightbox, but I've run into a little issue. When the browser height is full, everything looks great - you can see the entire image, along with the paragraph and buttons. https://i.stack.imgur.com/UCJG ...
I'm trying to create a button that mimics the design in the code snippet. Is this method the most effective way, or is there a simpler approach I should consider? It seems like a lot of work just to achieve rounded corners. #p1,#p2{ height:25px; ...
Is there a way to automatically adjust the spacing between content boxes without disrupting the layout? I've tried using spacing, padding, and margin properties, but they end up messing up my design. Is there a solution that mimics the column-gap and ...
I have a website with jQuery and JavaScript functionality. I am including the necessary libraries in the head section of my HTML page: <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" ...
I utilize border-radius.htc to create rounded corners on older versions of Internet Explorer that do not support the border-radius CSS property. I follow the instructions provided in the documentation to implement it properly. It works perfectly on a simpl ...
I have a set of HTML codes containing multiple buttons. <div class="main"> <div class="button hide">1</div> <div class="button hide">2</div> <div class="button hide">3</div> <div class="button h ...