Forum Moderators: not2easy
i have just removed the JS which set the text of a div on the rollover of an image, i have now set the image to rollover using :hover but also want to swap the text at the same time.
4 separate columns, each changing the text in the navigation div.
current code:
#navigation {
font-size: 10px;
float: center;
width: 644px;
color: #333;
text-align: left;
border: 0px, 0px, 1px, 0px, #333;
margin: 5px 0px 5px 0px;
padding-left: 5px;
background: #ffffff;
}
#leftcolumn {
height: 452px;
width: 161px;
color: #333;
margin: 0px 2px 5px 2px;
float: left;
background-image : url(1.jpg);
}
#leftcolumn:hover {
background-image : url(1_pic.jpg);
}
i want to set the text of the navigation div.
It's a bit more tricky in real world cases as triggering a redraw on hover might pull the browser in a loop of redrawing between being in hover and not being in hover mode.
many examples for CSS picture galleries use such techniques.
having limited knowledge of both CSS and JS makes it a bit more difficult. In the end ive gone with CSS to swap the images out and JS to set the text on over and re-set on out.
As expected I built a few blinking lights (removing what you hover over makes you not hover, hence the hovered over part blinks in and out of existence.
I've only tested it in Firefox, might behave badly in other browsers, but it's valid code, ...
Making it work in IE left as an exercise to the reader ;-)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
* {margin:0;padding:0}
.fixedheight {
height:1em;
}
#demo .normal {
display:block;
background:red;
width:10em;
}
#demo .hover {
display:block;
position:absolute;
left:-5000px;
}
#demo:hover .hover {
background:green;
left:0px;
width:10em;
}
#demo:hover .normal {
position:absolute;
left:-5000px;
}
</style>
</head>
<body>
<p>ipso lorum</p>
<div class="fixedheight">
<a id="demo"><span class="normal">main</span><span class="hover">hover</span></a>
</div>
<p>ipso lorum</p>
</body>
</html>
the fixed position implied here is critical in getting it to work
I've also played a bit with text-indent:-5000px and think it still holds value but I couldn't shake the blinking there all that easy.
Another avenue that might be interesting would be to play with z-index.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#navwrap {
width: 660px;
margin: 0 auto;
overflow: hidden; /* contain floats */
border: 1px solid #000;
position: relative;
padding-bottom: 30px; /* space for nav text */
}.column {
height: 200px;
width: 165px;
color: #333;
float: left;
}
.c1:hover {background : #dad;}
.c2:hover {background : #dda;}
.c3:hover {background : #add;}
.c4:hover {background : #ada;}.column span {
position: absolute;
bottom: 0;
left: -9999px; /* hide span till hovered on */
width: 660px;
height: 30px;
cursor: pointer; /* for IE */
}.c1 span {background: #cff;}
.c2 span {background: #ccf;}
.c3 span {background: #fcc;}
.c4 span {background: #fcf;}.column:hover span {left: 0;}
</style>
</head>
<body>
<div id="navwrap">
<a class="column c1" href="#">col 1<span>nav text for column 1</span></a>
<a class="column c2" href="#">col 2<span>nav text for column 2</span></a>
<a class="column c3" href="#">col 3<span>nav text for column 3</span></a>
<a class="column c4" href="#">col 4<span>nav text for column 4</span></a>
</div>
</body>
</html>
