Looking for a solution where I have 2 images - one inactive and the other active. I want the inactive part of the image to change to active when someone hovers over it. Here are the pictures:
I was able to achieve this using mapster, but it's not responsive. Are there any other ways to accomplish this?
Here is a simple method that may provide you with some insights
HTML
<div class="layer">
<img src="http://i.imgur.com/hrG46JH.png" alt="tablet" width="380" height="563" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="34,87,182,199" href="#" id="idOne">
<area shape="rect" coords="200,83,352,207" href="#" id="idtwo">
<area shape="rect" coords="33,228,182,348" href="#" id="idthree">
<area shape="rect" coords="33,381,183,497" href="#" id="idfive">
<area shape="rect" coords="201,380,352,498" href="#" id="idsix">
<area shape="rect" coords="202,233,350,345" href="#" id="idfour">
</map>
<div class="id-1"></div>
<div class="id-2"></div>
<div class="id-3"></div>
<div class="id-4"></div>
<div class="id-5"></div>
<div class="id-6"></div>
</div>
CSS
.layer {
position:relative;
width:380px;
height:563px;
}
.id-1, .id-2, .id-3, .id-4, .id-5, .id-6 {
background:url(http://i.imgur.com/nboEjPb.png);
overflow: hidden;
position: absolute;
display:none;
}
.id-1 {
width: 180px;
height: 205px;
left: 0px;
top: 0px;
background-position: 0px 564px;
}
.id-2 {
width: 180px;
height: 205px;
right: 0px;
top: 0px;
background-position: -200px 564px;
}
.id-3 {
width: 180px;
height: 129px;
left: 0px;
top: 224px;
background-position:0px 340px;
}
.id-4 {
width: 180px;
height: 129px;
right: 0px;
top: 224px;
background-position:-200px 340px;
}
.id-5 {
width: 180px;
height: 129px;
left: 0px;
top: 377px;
background-position:0px 187px;
}
.id-6 {
width: 180px;
height: 129px;
right: 0px;
top: 377px;
background-position:-200px 187px;
}
Javascript
$(document).ready(function() {
$("#idOne, .id-1").mouseover(function() {
$('.id-1').show();
});
$("#idOne, .id-1").mouseout(function() {
$('.id-1').hide()
});
$("#idtwo, .id-2").mouseover(function() {
$('.id-2').show();
});
$("#idtwo, .id-2").mouseout(function() {
$('.id-2').hide()
});
$("#idthree, .id-3").mouseover(function() {
$('.id-3').show();
});
$("#idthree, .id-3").mouseout(function() {
$('.id-3').hide()
});
$("#idfour, .id-4").mouseover(function() {
$('.id-4').show();
});
$("#idfour, .id-4").mouseout(function() {
$('.id-4').hide()
});
$("#idfive, .id-5").mouseover(function() {
$('.id-5').show();
});
$("#idfour, .id-5").mouseout(function() {
$('.id-5').hide()
});
$("#idsix, .id-6").mouseover(function() {
$('.id-6').show();
});
$("#idfour, .id-6").mouseout(function() {
$('.id-6').hide()
});
});
Have you ever wondered why people emphasize the minification of web assets like CSS and JavaScript, yet rarely mention doing the same for markup? It's interesting to note that CSS and JavaScript are often reused across multiple pages, whereas markup i ...
Looking for a solution, I'm trying to include a side menu (navbar) on my page by using position: fixed. However, I am facing an issue where all the HTML elements I attempt to add are ignoring it. Check out the positioning problem here. ...
Trying to design a grid layout with 3 columns of content, alongside an .overlay div featuring a particles.js canvas. Having trouble? See my Codepen here: https://codepen.io/radzak/pen/MVQVPQ The goal is for the grid to always occupy 100% of the screen, t ...
Here is the HTML snippet I am working with: <pre> <span class="cm-string">"userId"</span> ":" <span class="cm-string">"abc"</span> "," </pre> My goal is to extract the text "abc" from the "userId" tag, which changes fr ...
Despite having all the static files in place, only the plain HTML loads without any styles for some unknown reason. I've attempted using collectstatic and even setting up a new project, but to no avail. STATIC_URL is also properly specified along with ...
Sample Scenario: While a user is entering information into a field, I would like to restrict the ability to delete or clear out the value, such as keeping "Friend" intact. Can this be accomplished using CSS or JavaScript? ...
Consider using CSS code like the following in some cases: input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border:1px solid #fff; background-color:#f3f4f5; } <div><input type="text" name="alpha" /&g ...
Seeking assistance with creating a social media icon/link list for the first time on this platform. Any help is appreciated! <div class="social-links"> <ul> <li class="m-link"> <a href="&q ...
When attempting to print in letter size and landscape orientation, the two divs fail to align properly. However, when using "@size a4 landscape" for printing, the alignment issue is resolved. What could be missing from my print CSS that would allow them to ...
I am struggling to figure out how this dashboard will function as it is not a live website, but rather a tool that pulls data from a chemical analysis program and displays it in a browser view. My main issue is aligning two tables at the top of the page ...
Recently, while I was experimenting with a jQuery tutorial, I encountered an issue where iframes were not working as expected. Surprisingly, only the iframes from w3schools seemed to work fine, leaving me confused about what could be causing the problem. & ...
I'm feeling a bit lost when it comes to DOM nodes and all the terminology surrounding them. Initially, I believed that the DOM consisted solely of what I could see in my inspector - nothing more, nothing less. However, I've come across functions ...
onclick="HandleAction(\'playnow\');HandleAction(\'stop\');" This element performs two functions simultaneously. However, it only executes the actions \playnow\ and then \stop\ immediately after. ...
I'm having an issue with applying a new id to the next button in a Bootstrap tour template. I added the id to the button, but it only seems to work for the first stage and not the subsequent ones. Can anyone provide insight into why this might be happ ...
Looking to analyze a webpage (where the same product price is compared on different stores - each store has a block with its logo, price...) I want to separate each store into a different array element using preg_match_all I am trying to skip the advert ...
Currently, I am working on an HTML code that involves memory for an Iframe. Interestingly, whenever I use the append function, it not only executes the code but also carries out its intended task. html = $(parser.parseFromString($("#EHtml").val(), "text/h ...
When the button is pressed, I'd like to change the color. When the same button is pressed again, I want it to revert back to its original color. Currently, when the button is clicked, all rows change color. Sample Code Snippet: <table> & ...
I'm currently working on a solution to detect when a path within an SVG file on a canvas has been clicked. The code I've written functions correctly in Firefox, but I'm encountering issues with Chromium browsers. When I surround the code wit ...
(Please find the code link at the bottom of this question) I have been working on a radial menu for a web project. However, I've encountered an issue that has me stuck for hours now. No matter what I try, I can't seem to get any response from th ...
I am looking to dynamically create tables based on the items inside the 'counts' array below. The number of tables and their contents can change. Here is my divContainer, where the innerHTML will be appended: <div id="divContainer" style="pa ...