-
Unobtrusive javascript (show/hide layer)
Hi there,
Basically what I'd like todo is make a div with a background image of a map. I'd like to have a country selectable where when you roll over it some text is revealed below the div holding the background image. I've found lots of examples of show/hide techniques though none using javascript that would be accessible.
I need a screen reader to be able to read the code, and if someone has javacscript disabled for it to degrade gracefully.
Hope i've kinda made sense, many thanks for reading through,
elliot
Last edited by elliot; 03-17-2007 at 11:09 PM.
-
-
Hi again,
i've been trying and have got this far.....
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<head>
<script language="javascript">
<!--
var state = 'hidden';
function showhide(layer_ref) {
if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}
//-->
</script>
<style>
* {margin:0; padding:0;}
h2 {
font-size:1.0em;
margin:5px 0;
padding:0;
}
.wrapper {
position:relative;
margin:10px;
width:320px;
height:350px;
}
.map {
border:1px solid black;
background: red ;
height:300px;
width:300px;
}
.map .country1 {
border:1px solid blue;
position:absolute;
top:200px;
left:190px
}
.map a {
text-decoration:none;
color:blue;
}
#europe {
background:blue;
width:200px;
padding:5px
}
</style>
</head>
<body>
<div class="wrapper">
<div class="map">
<p class="country1"><a href="javascript://" onclick="showhide('europe');">Europe</a></p>
</div><!--map container end -->
<div id="europe" style="position:absolute; top:303px; left:0px;
visibility:hidden;">
<h2>Title</h2>
<p>some text</p>
</div><!--hide europe end -->
</div><!--wrapper end -->
</body>
</html>
Please could you tell me how to change it so that when I roll over the link for europe the hidden div reveals, then hides when I roll out. Also do you know how I can get the info from the hidden div to show if a user has javascript disabled?
many thanks,
elliot
Last edited by elliot; 03-18-2007 at 09:49 AM.
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Reply With Quote
Bookmarks