<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- over het doctype http://www.w3.org/TR/html401/sgml/dtd.html -->
<html>
<head>
<title>
Onr Page content site
</title>
<!--This page created on Monday, July 16, 2001 13:37:54 -->
<META name="description" content="starting with arachnophilia the html editor">
<META name="keywords" content="arachno, html, updat, email, content, starting, homepage">
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="Author" content="Peter Vazed">
<META name="robots" content="index, follow">
<META name="revisit" content="7 days">
<STYLE TYPE="text/css">
<!--
A:link { text-decoration: none; color: #000000 }
A:visited { text-decoration: none; color: #990000 }
A:active { text-decoration: none; color: #0000FF }
A:hover { text-decoration: underline; color: #FF0000 }
.klgrn {background-color: #669999;}
.klgl {background color: #FFCC00;}
.info {font-family:verdana, tahoma, arial, ms sans serif;font-size:29;}
BODY { scrollbar-3d-light-color:#FFFFFF;
scrollbar-arrow-color:#FFFF33;
scrollbar-base-color:#e39be3;
scrollbar-dark-shadow-color:#333333;
scrollbar-face-color:#a40616;
scrollbar-highlight-color:#999999;
scrollbar-shadow-color:#cec553}
-->
</STYLE>
<STYLE TYPE="text/css">
.tab_hover {
background-color:blue;
color:white;
cursor:pointer;
width:137px;
height:25px;
background-image:url(./images/ltab_blue.gif);
border:1px solid #ffff00;
text-align:center;
font-family:verdana;
font-size:13px;
font-weight:bold;
padding:3px;
}
.tab {
background-color:#0000a0;
color:#ffffff;
cursor:pointer;
width:137px;
height:20px;
background-image:url(./images/ltab_blue2.gif);
border:1px solid #ffff00;
text-align:center;
font-family:verdana;
font-size:13px;
font-weight:none;
padding:3px;
}
.data_tab {
border:1px solid #ff0000;
width:680px;
height:100px;
text-align:left;
font-family:verdana;
font-size:12px;
padding:20px;
}
</STYLE>
<script type="text/javascript" language="JavaScript">
<!--
last_tab = 'tab1';
function show(layerName) {
document.getElementById(layerName).style.display = '';
}
function hide(layerName) {
document.getElementById(layerName).style.display = 'none';
}
function show_next(tab_name) {
document.getElementById(last_tab).className = 'tab';
var curr = document.getElementById(tab_name);
curr.className='tab_hover';
hide(last_tab+'_data');
show(tab_name+'_data');
last_tab=tab_name;
}//-->
</script>
</HEAD>
<BODY>
<table width="95%" align="center">
<tr><td valign="top" width="200">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td id="tab1" class="tab_hover" onclick="javascript:show_next('tab1')">
escort rsi </td></tr><tr> <td id="tab2" class="tab" onclick="javascript:show_next('tab2')">
escort cabrio XR3i
</td></tr><tr>
<td id="tab3" class="tab" onclick="javascript:show_next('tab3')">
Volkswagenbus T3
</td>
</tr>
</table>
</td><td valign="top">
<table width="50%" border="0" cellspacing="0" cellpadding="0" class="data_tab">
<tr>
<td valign="top" width="100%" >
<div id=tab1_data>
ESCORT RS 1987
CVH motor
<BR>
<img src="http://people.zeelandnet.nl/vazed/vwbus/esc-rsi-re2-kl.jpg" width="600" height="350" alt="">
<br>Met Bosch KE-Jetronics injectiesysteem
</div>
<div id=tab2_data style='display:none'>
Escort XR3
<i>
i
</i>
Cabrio 1988
<br>
120 PK
<BR>
<img src="http://people.zeelandnet.nl/vazed/vwbus/esc-cab-zijkant-kl.jpg" width="600" height="350" alt="">
<BR>
</div>
<div id=tab3_data style='display:none'>
Volkswagenbus type T3
<BR>
<img src="http://people.zeelandnet.nl/vazed/vwbus/vw-t3-1984-kl.jpg" width="600" height="350" alt=""><br>
<br>
Bouwjaar 1984
<BR>
</div>
</td>
</tr>
</table>
</td></tr></table>
Dit script komt van <a href="http://www.aliroman.com/article/how-to-create-web-tabs-with-javascript-show-hide-layers-34-1.html">hier</a>, aanpassen naar wens.<br>
Kan dus in een tabel als hier getoond,<br>
Maar het kan ook met buttons aangestuurd worden<br>
<input type=button onclick="javascript:show_next('tab1')" value='Escort RSi'>
<input type=button onclick="javascript:show_next('tab2')" value='Escort XR3i'>
<input type=button onclick="javascript:show_next('tab3')" value='Volkswagenbus'>
</BODY>
</HTML>