<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls dot com | menu - two step </title>
<meta name="Author" content="Stu Nicholls" />
<!-- <link rel="stylesheet" media="all" type="text/css" href="two_step/two_step.css" /> -->
<!-- <script src="two_step/two_step.js" type="text/javascript"></script> -->
<style>
#gallery {font:11px verdana,arial,sans-serif; width:750px; padding:0; line-height:15px; height:33px;}
#gallery div.off {color:#000; height:33px; margin-right:2px; line-height:33px; padding:0 20px; float:right; background:url('two_step/tabs_0.gif') repeat-x left bottom; border:1px solid #ddd; cursor:pointer; position:relative; z-index:20;}
#gallery div.on {color:#c00; padding:0 20px; margin-right:2px; float:right; background:url('two_step/tabs_2.gif') repeat-x left bottom; cursor:pointer; height:33px; line-height:32px; border:1px solid #ddd; position:relative; z-index:100;}
div.hide {display:none; width:0; overflow:hidden;}
div.show {clear:left; background:#fff; width:127px; margin-top:20px; position:relative; z-index:50; font:11px verdana, arial, sans-serif; line-height:18px;}
div.show ul {margin:0; padding:0; list-style:none; width:127px; position:relative;}
div.show ul li {width:127px; height:30px; background:url('two_step/side_1.gif'); margin:1px 0 0 0;}
div.show ul li a, div.show ul li a:visited {display:block; width:127px; height:30px; line-height:27px; background:url('two_step/side_0.gif'); color:#000; text-align:center; text-decoration:none;}
div.show ul li a:hover {background:transparent; color:#c00; white-space:nowrap; line-height:29px;}
div.show ul li a span {display:none;}
div.show ul li a:hover span {display:block; position:absolute; left:200px; top:0;}
div.show ul li a:hover span img {border:1px solid #000;}
.clear {clear:both;}
</style>
<script type="text/javascript">
<!--
onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
if (e.className == 'on' || e.className == 'off') {
e.onclick = function () {
var getEls = document.getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
getEls[z].className=getEls[z].className.replace('on', 'off');
}
this.className = 'on';
var max = this.getAttribute('title');
document.getElementById(max).className = "show";
}
}
}
}
//-->
</script>
</head>
<body>
<div id="gallery">
<div class="off" title="Constable"><span>John Constable</span></div>
<div class="off" title="Monet"><span>Claude Monet</span></div>
<div class="off" title="Vincent"><span>Vincent Van Gogh</span></div>
<div class="off" title="Chagall"><span>Marc Chagall</span></div>
<div class="on" title="Picasso"><span>Pablo Picasso</span></div>
</div>
<div id="Constable" class="hide">
<ul>
<li><a href="#nogo">Constable #1<span><img src="two_step/constable.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #2<span><img src="two_step/constable1.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #3<span><img src="two_step/constable2.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #4<span><img src="two_step/constable3.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #5<span><img src="two_step/constable4.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #6<span><img src="two_step/constable5.jpg" alt="constable painting" /></span></a></li>
</ul>
</div>
<div id="Monet" class="hide">
<ul>
<li><a href="#nogo">Monet #1<span><img src="two_step/monet.jpg" alt="monet painting" /></span></a></li>
<li><a href="#nogo">Monet #2<span><img src="two_step/monet1.jpg" alt="monet painting" /></span></a></li>
<li><a href="#nogo">Monet #3<span><img src="two_step/monet2.jpg" alt="monet painting" /></span></a></li>
<li><a href="#nogo">Monet #4<span><img src="two_step/monet3.jpg" alt="monet painting" /></span></a></li>
<li><a href="#nogo">Monet #5<span><img src="two_step/monet4.jpg" alt="monet painting" /></span></a></li>
</ul>
</div>
<div id="Vincent" class="hide">
<ul>
<li><a href="#nogo">Van Gogh #1<span><img src="two_step/vincent.jpg" alt="vincent van gogh painting" /></span></a></li>
<li><a href="#nogo">Van Gogh #2<span><img src="two_step/vincent1.jpg" alt="vincent van gogh painting" /></span></a></li>
<li><a href="#nogo">Van Gogh #3<span><img src="two_step/vincent2.jpg" alt="vincent van gogh painting" /></span></a></li>
<li><a href="#nogo">Van Gogh #4<span><img src="two_step/vincent3.jpg" alt="vincent van gogh painting" /></span></a></li>
</ul>
</div>
<div id="Chagall" class="hide">
<ul>
<li><a href="#nogo">Chagall #1<span><img src="two_step/chagall.jpg" alt="chagall painting" /></span></a></li>
<li><a href="#nogo">Chagall #2<span><img src="two_step/chagall1.jpg" alt="chagall painting" /></span></a></li>
<li><a href="#nogo">Chagall #3<span><img src="two_step/chagall2.jpg" alt="chagall painting" /></span></a></li>
<li><a href="#nogo">Chagall #4<span><img src="two_step/chagall3.jpg" alt="chagall painting" /></span></a></li>
<li><a href="#nogo">Chagall #5<span><img src="two_step/chagall4.jpg" alt="chagall painting" /></span></a></li>
</ul>
</div>
<div id="Picasso" class="show">
<ul>
<li><a href="#nogo">Picasso #1<span><img src="two_step/picasso.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #2<span><img src="two_step/picasso1.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #3<span><img src="two_step/picasso2.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #4<span><img src="two_step/picasso3.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #5<span><img src="two_step/picasso4.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #6<span><img src="two_step/picasso5.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #7<span><img src="two_step/picasso6.jpg" alt="picasso painting" /></span></a></li>
</ul>
</div>
<p>© 2007 stunicholls.com</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls dot com | menu - two step </title>
<meta name="Author" content="Stu Nicholls" />
<!-- <link rel="stylesheet" media="all" type="text/css" href="two_step/two_step.css" /> -->
<!-- <script src="two_step/two_step.js" type="text/javascript"></script> -->
<style>
#gallery {font:11px verdana,arial,sans-serif; width:750px; padding:0; line-height:15px; height:33px;}
#gallery div.off {color:#000; height:33px; margin-right:2px; line-height:33px; padding:0 20px; float:right; background:url('two_step/tabs_0.gif') repeat-x left bottom; border:1px solid #ddd; cursor:pointer; position:relative; z-index:20;}
#gallery div.on {color:#c00; padding:0 20px; margin-right:2px; float:right; background:url('two_step/tabs_2.gif') repeat-x left bottom; cursor:pointer; height:33px; line-height:32px; border:1px solid #ddd; position:relative; z-index:100;}
div.hide {display:none; width:0; overflow:hidden;}
div.show {clear:left; background:#fff; width:127px; margin-top:20px; position:relative; z-index:50; font:11px verdana, arial, sans-serif; line-height:18px;}
div.show ul {margin:0; padding:0; list-style:none; width:127px; position:relative;}
div.show ul li {width:127px; height:30px; background:url('two_step/side_1.gif'); margin:1px 0 0 0;}
div.show ul li a, div.show ul li a:visited {display:block; width:127px; height:30px; line-height:27px; background:url('two_step/side_0.gif'); color:#000; text-align:center; text-decoration:none;}
div.show ul li a:hover {background:transparent; color:#c00; white-space:nowrap; line-height:29px;}
div.show ul li a span {display:none;}
div.show ul li a:hover span {display:block; position:absolute; left:200px; top:0;}
div.show ul li a:hover span img {border:1px solid #000;}
.clear {clear:both;}
</style>
<script type="text/javascript">
<!--
onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
if (e.className == 'on' || e.className == 'off') {
e.onclick = function () {
var getEls = document.getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
getEls[z].className=getEls[z].className.replace('on', 'off');
}
this.className = 'on';
var max = this.getAttribute('title');
document.getElementById(max).className = "show";
}
}
}
}
//-->
</script>
</head>
<body>
<div id="gallery">
<div class="off" title="Constable"><span>John Constable</span></div>
<div class="off" title="Monet"><span>Claude Monet</span></div>
<div class="off" title="Vincent"><span>Vincent Van Gogh</span></div>
<div class="off" title="Chagall"><span>Marc Chagall</span></div>
<div class="on" title="Picasso"><span>Pablo Picasso</span></div>
</div>
<div id="Constable" class="hide">
<ul>
<li><a href="#nogo">Constable #1<span><img src="two_step/constable.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #2<span><img src="two_step/constable1.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #3<span><img src="two_step/constable2.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #4<span><img src="two_step/constable3.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #5<span><img src="two_step/constable4.jpg" alt="constable painting" /></span></a></li>
<li><a href="#nogo">Constable #6<span><img src="two_step/constable5.jpg" alt="constable painting" /></span></a></li>
</ul>
</div>
<div id="Monet" class="hide">
<ul>
<li><a href="#nogo">Monet #1<span><img src="two_step/monet.jpg" alt="monet painting" /></span></a></li>
<li><a href="#nogo">Monet #2<span><img src="two_step/monet1.jpg" alt="monet painting" /></span></a></li>
<li><a href="#nogo">Monet #3<span><img src="two_step/monet2.jpg" alt="monet painting" /></span></a></li>
<li><a href="#nogo">Monet #4<span><img src="two_step/monet3.jpg" alt="monet painting" /></span></a></li>
<li><a href="#nogo">Monet #5<span><img src="two_step/monet4.jpg" alt="monet painting" /></span></a></li>
</ul>
</div>
<div id="Vincent" class="hide">
<ul>
<li><a href="#nogo">Van Gogh #1<span><img src="two_step/vincent.jpg" alt="vincent van gogh painting" /></span></a></li>
<li><a href="#nogo">Van Gogh #2<span><img src="two_step/vincent1.jpg" alt="vincent van gogh painting" /></span></a></li>
<li><a href="#nogo">Van Gogh #3<span><img src="two_step/vincent2.jpg" alt="vincent van gogh painting" /></span></a></li>
<li><a href="#nogo">Van Gogh #4<span><img src="two_step/vincent3.jpg" alt="vincent van gogh painting" /></span></a></li>
</ul>
</div>
<div id="Chagall" class="hide">
<ul>
<li><a href="#nogo">Chagall #1<span><img src="two_step/chagall.jpg" alt="chagall painting" /></span></a></li>
<li><a href="#nogo">Chagall #2<span><img src="two_step/chagall1.jpg" alt="chagall painting" /></span></a></li>
<li><a href="#nogo">Chagall #3<span><img src="two_step/chagall2.jpg" alt="chagall painting" /></span></a></li>
<li><a href="#nogo">Chagall #4<span><img src="two_step/chagall3.jpg" alt="chagall painting" /></span></a></li>
<li><a href="#nogo">Chagall #5<span><img src="two_step/chagall4.jpg" alt="chagall painting" /></span></a></li>
</ul>
</div>
<div id="Picasso" class="show">
<ul>
<li><a href="#nogo">Picasso #1<span><img src="two_step/picasso.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #2<span><img src="two_step/picasso1.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #3<span><img src="two_step/picasso2.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #4<span><img src="two_step/picasso3.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #5<span><img src="two_step/picasso4.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #6<span><img src="two_step/picasso5.jpg" alt="picasso painting" /></span></a></li>
<li><a href="#nogo">Picasso #7<span><img src="two_step/picasso6.jpg" alt="picasso painting" /></span></a></li>
</ul>
</div>
<p>© 2007 stunicholls.com</p>
</body>
</html>