PDA

View Full Version : Unobtrusive javascript (show/hide layer)



elliot
03-17-2007, 11:01 PM
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

elliot
03-18-2007, 09:28 AM
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