Menu
I have a body system feature I'd like to implement. When the user hovers over a body part, it highlights and shows information on that specific body part. I've coded the CSS the way I want it, but I don't know anything about JavaScript to get the information to stick when the body part is clicked or the mouse leaves the hover state.
I've searched the forum and found similar issues and have spent hours trying to figure this out myself from others' javascript solutions - I'm at the point where I need to ask for help.
Here is a flash prototype I made of my desired effect:
http://inwavemedia.com/temp/proto/Main.html
Here is the live HTML if you want to take a look at what I have now:
http://inwavemedia.com/temp/excretory.html
Here is my code:
<style type="text/css">
#bodysystem-excretory {
width: 618px;
height: 504px;
background: url(excretory.png) no-repeat;
margin: 10px auto; padding: 0;
position: relative;
border: 1px solid #999;
}
#bodysystem-excretory li {
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bodysystem-excretory a {
display: block;
/* text-indent: -9999px;*/
text-decoration: none;
}
#esoph {
left: 85px;
top: 41px;
width: 46px;
height: 94px;
z-index: 10;
}
#lungs {
left: 76px;
top: 84px;
width: 84px;
height: 68px;
z-index: 20;
}
#bladder {
left: 87px;
top: 148px;
width: 64px;
height: 104px;
z-index: 30;
}
#esoph a {
height: 94px;
}
#lungs a {
height: 67px;
}
#bladder a {
height: 104px;
}
#esoph a:hover {
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -25px -561px;
}
#lungs a:hover {
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -105px -523px;
}
#bladder a:hover {
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -114px -618px;
}
.info span{
display: none
}
.info{
position:relative;
z-index:1124;
color:#000;
}
.info:hover{
z-index:1125;
}
.info:hover span{
display:block;
position:absolute;
top:-30px;
left:155px;
width:370px;
color:#000;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<ul id="bodysystem-excretory">
<li id="esoph">
<a href="#" class="info"><span id="esoph-info"><h3>Esophagus</h3><p>This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. </p></span></a>
</li>
<li id="lungs"><a href="#" class="info"><span id="lungs-info"><h3>Lungs</h3></span></a></li>
<li id="bladder"><a href="#" class="info"><span id="bladder-info"><h3>Bladder</h3></span></a></li>
</ul>
262
You can't permanently stay as hover state using CSS as it merely defines the rules on styling the tags, classes, IDs, pseudo-classes, and states. So unfortunately, you need Javascript to solve the problem.
You can use Jquery to set a class when the mouse is hovered. Then the class will remain set even after the mouse moves away.
The typical use case for pausing a slideshow on a hover event is to pause when the mouse is over the slideshow. This is accomplished by setting the data-cycle-pause-on-hover attribute value to true .
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
Below is the required changes you would require to do:
<head>
<title>Untitled Page</title>
<style type="text/css">
#bodysystem-excretory
{
width: 618px;
height: 504px;
background: url(excretory.png) no-repeat;
margin: 10px auto;
padding: 0;
position: relative;
border: 1px solid #999;
}
#bodysystem-excretory li
{
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bodysystem-excretory a
{
display: block; /* text-indent: -9999px;*/
text-decoration: none;
}
#esoph
{
left: 85px;
top: 41px;
width: 46px;
height: 94px;
z-index: 10;
}
#lungs
{
left: 76px;
top: 84px;
width: 84px;
height: 68px;
z-index: 20;
}
#bladder
{
left: 87px;
top: 148px;
width: 64px;
height: 104px;
z-index: 30;
}
#esoph a
{
height: 94px;
}
#lungs a
{
height: 67px;
}
#bladder a
{
height: 104px;
}
#esoph a:hover
{
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -25px -561px;
}
#lungs a:hover
{
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -105px -523px;
}
#bladder a:hover
{
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -114px -618px;
}
.info span
{
display: none;
}
.info
{
position: relative;
z-index: 1000;
color: #000;
}
#bodysystem-excretory li[selected='true'] .info
{
z-index:1200;
}
#bodysystem-excretory li[selected='true'] .info span
{
display: block;
position: absolute;
top: -30px;
left: 155px;
width: 370px;
color: #000;
background-color: #FFFFFF;
}
.info:hover
{
z-index: 1125;
}
.info:hover span
{
display: block;
position: absolute;
top: -30px;
left: 155px;
width: 370px;
color: #000;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function SelectOrgan(obj)
{
var parentObj = obj.parentNode;
var organs = document.getElementById("bodysystem-excretory").getElementsByTagName("li");
for (var i = 0, len = organs.length; i < len; i++)
{
organs[i].setAttribute("selected", "false");
}
parentObj.setAttribute("selected", "true");
}
</script>
</head>
<body>
<ul id="bodysystem-excretory">
<li id="esoph" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="esoph-info">
<h3>
Esophagus</h3>
<p>
This is esophagus information. This is esophagus information. This is esophagus
information. This is esophagus information. This is esophagus information. This
is esophagus information. This is esophagus information.
</p>
</span></a></li>
<li id="lungs" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="lungs-info">
<h3>
Lungs</h3>
</span></a></li>
<li id="bladder" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="bladder-info">
<h3>
Bladder</h3>
</span></a></li>
</ul>
</body>
</html>
Note that each of the organs have been assigned an absolute position with different positions in the space. If you keep all of them the same with same left, top, width, and height, then you would achieve what you require.
64
I don't think either of the previous answers quite do what you were looking for. This is my suggestion. Note that the CSS is altered as well as javascript added at the end.
<html>
<head><style type="text/css">
#bodysystem-excretory {
width: 618px; height: 504px;
background: url("excretory.png") no-repeat;
margin: 10px auto; padding: 0;
position: relative;
border: 1px solid #999;
}
#bodysystem-excretory li {
margin: 0; padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bodysystem-excretory a {
display: block;
/* text-indent: -9999px;*/
text-decoration: none;
}
#esoph {
left: 85px; top: 41px;
width: 46px; height: 94px;
z-index: 10;
}
#lungs {
left: 76px; top: 84px;
width: 84px; height: 68px;
z-index: 20;
}
#bladder {
left: 87px; top: 148px;
width: 64px; height: 104px;
z-index: 30;
}
#esoph a {
height: 94px;
}
#lungs a {
height: 67px;
}
#bladder a {
height: 104px;
}
#esoph:hover, #esoph.selected {
background-image: url("excretory.png") no-repeat -25px -561px;
}
#lungs:hover, #lungs.selected {
background-image: url("excretory.png") no-repeat -105px -523px;
}
#bladder:hover, #bladder.selected {
background-image: url("excretory.png") no-repeat -114px -618px;
}
.info span{
display: none
}
.info{
position:relative;
z-index:1124;
color:#000;
}
.selected .info{
z-index:1125;
}
.selected .info span {
display:block; position:absolute;
top:-30px; left:155px;
width:370px;
color:#000; background-color:#FFFFFF;
}</style></head>
<body>
<ul id="bodysystem-excretory">
<li id="esoph">
<a href="#" class="info">
<span id="esoph-info"><h3>Esophagus</h3>
<p>
This is esophagus information. This is esophagus information.
This is esophagus information. This is esophagus information.
This is esophagus information. This is esophagus information.
This is esophagus information. </p></span></a>
</li>
<li id="lungs"><a href="#" class="info">
<span id="lungs-info"><h3>Lungs</h3></span></a>
</li>
<li id="bladder"><a href="#" class="info">
<span id="bladder-info"><h3>Bladder</h3>
</span></a></li>
</ul><script type="text/javascript">
// Get the <li> elements as a list called 'parts'
var parts =
document.getElementById('bodysystem-excretory').getElementsByTagName('li');
function getClickFunction(part) {
return function() {
// This is the function that will be called when one of the <li>s is clicked
if (part.className == 'selected') { // if the body part is already selected
part.className = ''; // ... then deselect it
}
else { // otherwise,
// first deselect all of the body parts
for (var i = 0; i < parts.length; i++) {
parts[i].className = '';
}
// then select the one that's been clicked
part.className = 'selected';
}
}
}
// Now, attach this function to all of the <li> elements representing body parts
for (var i = 0; i < parts.length; i++) {
parts[i].onclick = getClickFunction(parts[i]);
}
</script></body></html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
