No replies
Charred
Charred's picture
Offline
Regular
Last seen: 10 years 16 weeks ago
Timezone: GMT-5
Joined: 2011-04-10
Posts: 22
Points: 35

Hi, I'm not going to be able to use javascript for this function, so I'm trying to replicate it in CSS. I've done some searching and haven't seen this sort of thing. I want three different words listed side-by-side and when the user rolls over that word, I want the relevant area in the picture "highlighted". I accomplished that in javascript by having 4 images and switching out the images with the rollover. My attempts with CSS have failed partially.

What happens is that the words "pads" "shank" and "gaff" hide behind the hover image. I want the words to constantly be on top...even better would be for the words to be out of the picture area, but I couldn't get that to work.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<link href="../../Scripts/Apprenticeship_layout.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/Menu_layout.css" rel="stylesheet" type="text/css" />
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
	visibility: visible;
	top: 2em;
	left: -11em; /*position where enlarged image should offset horizontally */
}
</style>
 
<title>AELC1421: Equipment - Climbers</title>
 
</head>
 
<body id="page4">
 
<h2>Identifying the Equipment</h2>
 
 
 
              <div class="centralbox">
                <p class="boxtext">Roll cursor over each word below to highlight the image</p>
 
 
               <div class="roll3">
               <ul>
               <li><a class="pad"href="#thumb">pads<span>This is the pad</span></a></li>
				<li><a class="shank" href="#thumb">shank<span>This is the shank.</span></a></li>
				<li><a class="gaff" href="#thumb">gaff<span>This is the gaff.</span></a></li></ul>               </div> 
 
 
</body>
</html>

*** EDIT ****

I just tried this CSS instead and was able to get it to work, but I tinkered with it so much that I'm not sure why it works. I added some information for the UL code but then I had to tinker with the top of the ".roll3 span". I'm not sure whether or not this is a stable fix. Would you mind helping me to clean up the code if I have pieces that are fighting each other?

/*popup text box with image*/
.roll3 {
	position: relative;
	z-index: 0;
	border: 1px solid gray;
	height: 456px;
	width: 400px;
	background-image: url(../Media/Images/Climbing_Equipment/climber_rollover_default.jpg);
	visibility: visible;
	background-repeat: no-repeat;
	margin-top: 50px;
	}
 
.roll3 li {
	background-color: #999999;
	display: inline-block;
	padding: 5px;
	border: thin dotted #333333;
	z-index: 60;
	visibility: visible;
	top: 0px;
	position: static;
}
 
.roll3 ul {
	z-index: 100;
	top: -50px;
	position: relative;
}
 
.roll3 a {
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
 
.roll3 span {
	position: absolute;
	height: 460px;
	width: 400px;
	top: 34px;
	right: 0%;  /* need this if changing the a value, but a value messes up everything else */
	z-index: 40;
	visibility: hidden;
	background-repeat: no-repeat;
}
 
/*.roll3 p {
	bottom: 10px;
	left: 50%;
	color: #FF0000;
	}*/
 
.roll3 li a.pad:hover span{ /*CSS for popup image on hover*/
	visibility: visible;
	z-index: 50;
	background-image: url(../Media/Images/Climbing_Equipment/climber_rollover_pads.jpg);
}
.roll3 a.shank:hover span{ /*CSS for popup image on hover*/
	visibility: visible;
	z-index: 50;
	background-image: url(../Media/Images/Climbing_Equipment/climber_rollover_shank.jpg);
 
}
.roll3 a.gaff:hover span{ /*CSS for popup image on hover*/
	visibility: visible;
	z-index: 50;
	background-image: url(../Media/Images/Climbing_Equipment/climber_rollover_gaff.jpg);
 
}
/*End of thumbnail code*/

CSS:

@charset "utf-8";
.centralbox {
	margin-right: auto;
	margin-left: auto;
	width: 70%;
	border: thin dashed #0060A9;
	padding: 1em;
	min-height: 10em;
	display: block;
	vertical-align: middle;
}
p.boxtext {
 text-align: center 
}
 
.roll3 {
	position: relative;
	z-index: 0;
	border: 1px dashed gray;
	height: 500px;
	width: 400px;
	background-image: url(../Media/Images/Climbing_Equipment/climber_rollover_default.jpg);
	visibility: visible;
	background-repeat: no-repeat;
	margin-top: 50px;
	}
 
.roll3 li {
	background-color: #999999;
	display: inline-block;
	padding: 5px;
	border: thin dotted #333333;
	z-index: 100;
	visibility: visible;
	top: 0px;
	position: static;
}
 
.roll3 a {
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
 
.roll3 span {
	position: absolute;
	height: 460px;
	width: 400px;
	top: 0%;
	right: 0%;  /* need this if changing the a value, but a value messes up everything else */
	z-index: 40;
	visibility: hidden;
	background-repeat: no-repeat;
}
 
/*.roll3 p {
	bottom: 10px;
	left: 50%;
	color: #FF0000;
	}*/
 
.roll3 li a.pad:hover span{ /*CSS for popup image on hover*/
	visibility: visible;
	z-index: 50;
	background-image: url(../Media/Images/Climbing_Equipment/climber_rollover_pads.jpg);
}
.roll3 a.shank:hover span{ /*CSS for popup image on hover*/
	visibility: visible;
	z-index: 50;
	background-image: url(../Media/Images/Climbing_Equipment/climber_rollover_shank.jpg);
 
}
.roll3 a.gaff:hover span{ /*CSS for popup image on hover*/
	visibility: visible;
	z-index: 50;
	background-image: url(../Media/Images/Climbing_Equipment/climber_rollover_gaff.jpg);
 
}