Forum Moderators: open
how can i do this, i presume it can be done by linking the click event to hide all script or sumthing?
this topic is continued from the CSS forum
[webmasterworld.com...]
lots of thanks
Here's a little bit more, which offers something to those with JS disabled:
<!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>
<title>WebmasterWorld css/js popups</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#popup a{display:block}
#popup a:link span,#popup a:visited span {
display: none;
}
#popup a:hover span {
display: block;
}
#image1{width:50px;height:50px;background-color:red;border:1px solid #000;position:absolute;top:0;left:0;z-index:0}
#image2{width:50px;height:50px;background-color:blue;border:1px solid #000;position:absolute;top:0;left:0;z-index:0}
#image3{width:50px;height:50px;background-color:gray;border:1px solid #000;position:absolute;top:0;left:0;z-index:0}
</style>
</head><body>
<div id="popup"><p style="margin-top:120px">
<a onclick="document.getElementById('image1').style.zIndex='3';document.getElementById('image2').style.zIndex='2';document.getElementById('image3').style.zIndex='2'; return false;" href="#">image 1<span><div id="image1" style=""></div></span></a><a onclick="document.getElementById('image1').style.zIndex='2';document.getElementById('image2').style.zIndex='3';document.getElementById('image3').style.zIndex='2'; return false;" href="#">image 2<span><div id="image2" style=""></div>
</span></a><a onclick="document.getElementById('image1').style.zIndex='2';document.getElementById('image2').style.zIndex='2';document.getElementById('image3').style.zIndex='3'; return false;" href="#">image 3<span><div id="image3" style=""></div>
</span></a>
</p>
</div>
</body>
</html>
It's a mix of what Suzy and I wrote. It works great in IE and in Moz, but seems to choke in Opera (on something to do with CSS, I believe).
[edited by: mipapage at 12:28 pm (utc) on Dec. 16, 2003]
but can you show me how, i dont know how to encorporate a new layer into the script,
<style>
#image1 {
width:435px;
height:105px;
background-color:red;
padding:2px;
position:absolute;
margin: 223px 0px 0px 28px;
z-index:3;
}
#image2 {
width:435px;
height:105px;
background-color:blue;
padding:2px;
position:absolute;
margin: 223px 0px 0px 28px;
z-index:2;
}
#image3 {
width:435px;
height:105px;
background-color:gray;
padding:2px;
position:absolute;
margin: 223px 0px 0px 28px;
z-index:2;
}
#image4 {
width:435px;
height:105px;
background-color:#FFF;
padding:2px;
position:absolute;
margin: 210px 0px 0px 28px;
z-index:4;
}
</style>
<div id="image1">
</div>
<div id="image2">
</div>
<div id="image3">
</div>
<a onclick="document.getElementById('image1').style.zIndex='3';
document.getElementById('image2').style.zIndex='2';
document.getElementById('image3').style.zIndex='2';
return false;" href="#">image 1</a>
<a onclick="document.getElementById('image1').style.zIndex='2';
document.getElementById('image2').style.zIndex='3';
document.getElementById('image3').style.zIndex='2';
return false;" href="#">image 2</a>
<a onclick="document.getElementById('image1').style.zIndex='2';
document.getElementById('image2').style.zIndex='2';
document.getElementById('image3').style.zIndex='3';
return false;" href="#">image 3</a>
please! :)
<div id="image4">to the html!
</div>
Dan
Have a look at the code - you start out with image4 having a z-index of 1, all of the others 0 (after you do the change above).
When you click on one of the links, the js changes the z-indexes 'on the fly'. The clicked link gets the highest z-index while the other two get bumped down.
If you are concerned with accessibility or people with JS off, you may want to build a page with the three images and their information, and place that url in the href of the links - in that way nobody loses, and you get an extra page with your content in the se's.
