Prøv dette
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>
www.layouter.dk/arbejdseksempler</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"><LINK
href="pix/main.css" type=text/css rel=stylesheet>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
</style>
<link href="pix/main.css" rel="stylesheet" type="text/css">
<META content="MSHTML 6.00.2800.1170" name=GENERATOR></HEAD>
<BODY bgcolor="#999999" style="MARGIN: 0px; BGCOLOR=#999999 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 leftMargin=0 topMargin=0 >
<table width=" dir="ltr" lang="da"100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/side2.gif" alt="" width="807" height="410" border="0" usemap="#main">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50"><img src="images/bgr.jpg" width="50" height="1"></td>
<td width="250"><font color="#FFFFFF" size="-2" face="Helvetica, Arial"><a href="index.htm" target="_self" class="select">Tilbage
til forsiden</a></font></td>
</tr>
</table></td>
</tr>
</table>
<div id="commodity" style="position:absolute; left:345px; top:226px; width:463px; height:358px; z-index:12; visibility: hidden;">
<table width="463" border="0" cellpadding="0" cellspacing="0" id="commodity1">
<tr>
<td width="183" valign="bottom" class="aar_brodtekst">Studie ophold, Massachusetts,
Boston. <br>
Undergrunds musikbladet The Commodity.<br>
Design og layout.</td>
<td><img src="pix/commodity2.jpg" width="273" height="355"></td>
</tr>
</table>
</div>
<div id="commodity03" style="position:absolute; left:345px; top:226px; width:463px; height:358px; z-index:13; visibility: hidden;">
<table width="463" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="183" valign="bottom" class="aar_brodtekst">Studie ophold, Massachusetts,
Boston. <br>
Undergrunds musikbladet The Commodity.<br>
Design og layout.</td>
<td><img src="pix/commodity3.jpg" width="273" height="355"></td>
</tr>
</table>
</div>
<div id="commodity5" style="position:absolute; left:345px; top:226; width:463; height:358; z-index:14; visibility: hidden;">
<table width="463" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="183" valign="bottom" class="aar_brodtekst">Studie ophold, Massachusetts,
Boston. <br>
Undergrunds musikbladet The Commodity.<br>
Design og layout.</td>
<td><img src="pix/commodity5.jpg" width="273" height="355"></td>
</tr>
</table>
</div>
<div id="idler1" style="position:absolute; left:345px; top:226; width:463; height:358; z-index:15; visibility: hidden;">
<table width="463" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="183" valign="bottom"><span class="aar_brodtekst">Studieophold,
Massachusetts, Boston.<br>
Litteraturbladet The Idler.<br>
Design og layout</span></td>
<td><img src="pix/idler1.jpg" width="273" height="355"></td>
</tr>
</table>
</div>
<div id="idler3" style="position:absolute; left:345; top:226; width:463; height:358; z-index:16; visibility: hidden;">
<table width="463" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="183" valign="bottom"><span class="aar_brodtekst">Studieophold,
Massachusetts, Boston.<br>
Litteraturbladet The Idler.<br>
Design og layout</span></td>
<td><img src="pix/idler3.jpg" width="273" height="355"></td>
</tr>
</table>
</div>
<div id="idler4" style="position:absolute; left:431px; top:234px; width:370px; height:292px; z-index:17; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="95%" valign="bottom"><img src="pix/idler4.jpg" width="370" height="243"></td>
</tr>
<tr>
<td valign="bottom"><span class="aar_brodtekst"><br>
Studieophold, Massachusetts, Boston.<br>
Litteraturbladet The Idler.<br>
Design og layout.</span></td>
</tr>
</table>
</div>
<div id="idler5" style="position:absolute; left:431px; top:234px; width:370px; height:279px; z-index:18; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/idler5.jpg" width="370" height="243"></td>
</tr>
<tr>
<td valign="bottom"><span class="aar_brodtekst"><br>
Studieophold, Massachusetts, Boston.<br>
Litteraturbladet The Idler.<br>
Design og layout.</span></td>
</tr>
</table>
</div>
<div id="vilsoe1" style="position:absolute; left:345px; top:226; width:446px; height:355px; z-index:19; visibility: hidden;">
<table width="463" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="183" valign="bottom"><span class="aar_brodtekst">Vilsøe
Boligadvokater.<br>
Design og layout af<br>
informations og rådgivnings brochurer.<br>
Samt Design og layout<br>
af div. annonce materiale</span><br></td>
<td><img src="pix/vilsoe1.jpg" width="273" height="355"></td>
</tr>
</table>
</div>
<div id="indhold" style="position:absolute; left:345px; top:226; width:463px; height:354px; z-index:20; visibility: hidden;">
<table width="463" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="183" valign="bottom"><span class="aar_brodtekst">Berlingske Tidendes
Nyhedsmagasin.<br>
Ansat på nedsat tid, som layouter.<br>
Lavede i 1999 en gennemgribende<br>
redesign af bladet i samarbejde med<br>
daværende layoutchef.</span><br></td>
<td><img src="pix/mobel1.jpg" width="273" height="355"></td>
</tr>
</table>
</div>
<div id="pp" style="position:absolute; left:345px; top:226; width:463px; height:356px; z-index:0; visibility: hidden;">
<table width="463" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="183" valign="bottom"><span class="aar_brodtekst">Private Penge
(pilot projekt udgivet <br>
af Berlingske Tidende i 2002)<br>
Design og layout.</span><br></td>
<td><img src="pix/pp.jpg" width="273" height="355"></td>
</tr>
</table>
</div>
<div id="vilsow2" style="position:absolute; left:431; top:234; width:370px; height:292px; z-index:1; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/vilsoe1_1.jpg" width="370" height="243"></td>
</tr>
<tr>
<td><span class="layer"><br>
</span><span class="aar_brodtekst">Vilsøe Boligadvokater.<br>
Design og layout af informations og rådgivnings brochurer.<br>
Samt Design og layout af div. annonce materiale.</span></td>
</tr>
</table>
</div>
<div id="vilsoe3" style="position:absolute; left:431; top:234; width:370px; height:290px; z-index:2; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/vilsoe2.jpg" width="370" height="243"></td>
</tr>
<tr>
<td><span class="layer"><br>
</span><span class="aar_brodtekst">Vilsøe Boligadvokater.<br>
Design og layout af informations og rådgivnings brochurer.<br>
Samt Design og layout af div. annonce materiale.</span></td>
</tr>
</table>
</div>
<div id="thereson2" style="position:absolute; left:431; top:234; width:370px; height:217px; z-index:3; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/thermeson2.jpg" width="370" height="181"></td>
</tr>
<tr>
<td class="layer"><span class="aar_brodtekst"><br>
Studieophold, Massachusetts, Boston.<br>
Udstillingsbrochure til The Thermersons kunst udstilling. <br>
Design og layout.</span></td>
</tr>
</table>
</div>
<div id="thermeson3" style="position:absolute; left:431; top:234; width:370px; height:230px; z-index:4; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/thermeson3.jpg" width="370" height="181"></td>
</tr>
<tr>
<td class="aar_brodtekst"><br>
Studieophold, Massachusetts, Boston.<br>
Udstillingsbrochure til The Thermersons kunst udstilling. <br>
Design og layout<font color="#FFFFFF" size="-2" face="Helvetica, Arial">.</font></td>
</tr>
</table>
</div>
<div id="thermeson4" style="position:absolute; left:431; top:234; width:370px; height:230px; z-index:5; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/thermeson4.jpg" width="370" height="181"></td>
</tr>
<tr>
<td class="layer"><span class="aar_brodtekst"><font color="#FFFFFF"><br>
Studieophold, Massachusetts, Boston.<br>
Udstillingsbrochure til The Thermersons kunst udstilling. <br>
Design og layout.</font></span></td>
</tr>
</table>
</div>
<div id="thermeson" style="position:absolute; left:431; top:234; width:371px; height:292px; z-index:6; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><img src="pix/thermeson1.jpg" width="370" height="243"></td>
</tr>
<tr>
<td width="121" class="layer"><br>
</td>
<td width="250" class="layer"><br>
<span class="aar_brodtekst">Studieophold, Massachusetts, Boston.<br>
Udstillingsbrochure til The Thermersons <br>
kunst udstilling. <br>
Design og layout.</span></td>
</tr>
</table>
</div>
<div id="bny1" style="position:absolute; left:431; top:234; width:370px; height:301px; z-index:7; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/bny_opslag.jpg" width="370" height="243"></td>
</tr>
<tr>
<td class="layer"><br>
<span class="aar_brodtekst">Berlingske Tidendes Nyhedsmagasin.<br>
Ansat på nedsat tid, som layouter.<br>
Lavede i 1999 en gennemgribende redesign af bladet <br>
i samarbejde med daværende layoutchef.</span></td>
</tr>
</table>
</div>
<div id="bny2" style="position:absolute; left:431; top:234; width:370px; height:302px; z-index:8; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/bny_port.jpg" width="370" height="243"></td>
</tr>
<tr>
<td class="layer"><br>
<span class="aar_brodtekst">Berlingske Tidendes Nyhedsmagasin.<br>
Ansat på nedsat tid, som layouter.<br>
Lavede i 1999 en gennemgribende redesign af bladet <br>
i samarbejde med daværende layoutchef.</span></td>
</tr>
</table>
</div>
<div id="mobel1" style="position:absolute; left:431; top:234; width:370px; height:280px; z-index:9; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/mobel1_1.jpg" width="370" height="243"></td>
</tr>
<tr>
<td class="layer"><br>
<span class="aar_brodtekst">Private Penge (pilot projekt udgivet af Berlingske
Tidende i 2002)<br>
Design og layout</span><font color="#FFFFFF" size="-2" face="Helvetica, Arial">.</font></td>
</tr>
</table>
</div>
<div id="mobel2" style="position:absolute; left:431; top:234; width:370px; height:279px; z-index:10; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="pix/mobel2.jpg" width="370" height="243"></td>
</tr>
<tr>
<td class="layer"><br>
<span class="aar_brodtekst">Private Penge (pilot projekt udgivet af Berlingske
Tidende i 2002)<br>
Design og layout</span><font color="#FFFFFF" size="-2" face="Helvetica, Arial">.</font></td>
</tr>
</table>
</div>
<div id="mobel3" style="position:absolute; left:407px; top:226; width:401px; height:356px; z-index:11; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="183" valign="bottom" class="aar_brodtekst">Private Penge (pilot projekt
udgivet af Berlingske Tidende i 2002)<br>
Design og layout.</td>
<td><img src="pix/mobel3.jpg" width="273" height="355"></td>
</tr>
</table>
</div>
<br>
<map name="main" id="main">
<area shape="rect" coords="46,47,104,119" href="#" alt="" onMouseOver="MM_showHideLayers('commodity','','show')" onMouseOut="MM_showHideLayers('commodity','','hide')" onfocus=this.blur() >
<area shape="rect" coords="105,48,161,119" href="#" alt="" onMouseOver="MM_showHideLayers('commodity03','','show')" onMouseOut="MM_showHideLayers('commodity03','','hide')" onfocus=this.blur() >
<area shape="rect" coords="163,47,219,120" href="#" alt="" onMouseOver="MM_showHideLayers('commodity5','','show')" onMouseOut="MM_showHideLayers('commodity5','','hide')" onfocus=this.blur() >
<area shape="rect" coords="241,48,297,120" href="#" alt="" onMouseOver="MM_showHideLayers('idler1','','show')" onMouseOut="MM_showHideLayers('idler1','','hide')" onfocus=this.blur() >
<area shape="rect" coords="300,47,356,119" href="#" alt="" onMouseOver="MM_showHideLayers('idler3','','show')" onMouseOut="MM_showHideLayers('idler3','','hide')" onfocus=this.blur() >
<area shape="rect" coords="359,48,468,120" href="#" alt="" onMouseOver="MM_showHideLayers('idler4','','show')" onMouseOut="MM_showHideLayers('idler4','','hide')" onfocus=this.blur() >
<area shape="rect" coords="473,48,583,120" href="#" alt="" onMouseOver="MM_showHideLayers('idler5','','show')" onMouseOut="MM_showHideLayers('idler5','','hide')" onfocus=this.blur() >
<area shape="rect" coords="618,46,671,120" href="#" alt="" onMouseOver="MM_showHideLayers('vilsoe1','','show')" onMouseOut="MM_showHideLayers('vilsoe1','','hide')" onfocus=this.blur() >
<area shape="rect" coords="680,47,786,121" href="#" alt="" onMouseOver="MM_showHideLayers('vilsow2','','show')" onMouseOut="MM_showHideLayers('vilsow2','','hide')" onfocus=this.blur() >
<area shape="rect" coords="617,137,721,211" href="#" alt="" onMouseOver="MM_showHideLayers('vilsoe3','','show')" onMouseOut="MM_showHideLayers('vilsoe3','','hide')" onfocus=this.blur() >
<area shape="rect" coords="437,135,585,210" href="#" alt="" onMouseOver="MM_showHideLayers('thermeson4','','show')" onMouseOut="MM_showHideLayers('thermeson4','','hide')" onfocus=this.blur() >
<area shape="rect" coords="282,136,432,210" href="#" alt="" onMouseOver="MM_showHideLayers('thermeson3','','show')" onMouseOut="MM_showHideLayers('thermeson3','','hide')" onfocus=this.blur() >
<area shape="rect" coords="126,137,277,209" href="#" alt="" onMouseOver="MM_showHideLayers('thereson2','','show')" onMouseOut="MM_showHideLayers('thereson2','','hide')" onfocus=this.blur() >
<area shape="rect" coords="46,136,122,210" href="#" alt="" onMouseOver="MM_showHideLayers('thermeson','','show')" onMouseOut="MM_showHideLayers('thermeson','','hide')" onfocus=this.blur() >
<area shape="rect" coords="115,227,170,299" href="#" alt="" onMouseOver="MM_showHideLayers('indhold','','show')" onMouseOut="MM_showHideLayers('indhold','','hide')" onfocus=this.blur() >
<area shape="rect" coords="175,225,284,300" href="#" alt="" onMouseOver="MM_showHideLayers('bny1','','show')" onMouseOut="MM_showHideLayers('bny1','','hide')" onfocus=this.blur() >
<area shape="rect" coords="289,225,393,303" href="#" alt="" onMouseOver="MM_showHideLayers('bny2','','show')" onMouseOut="MM_showHideLayers('bny2','','hide')" onfocus=this.blur() >
<area shape="rect" coords="47,319,104,395" href="#" alt="" onMouseOver="MM_showHideLayers('pp','','show')" onMouseOut="MM_showHideLayers('pp','','hide')" onfocus=this.blur() >
<area shape="rect" coords="109,320,218,395" href="#" alt="" onMouseOver="MM_showHideLayers('mobel1','','show')" onMouseOut="MM_showHideLayers('mobel1','','hide')" onfocus=this.blur() >
<area shape="rect" coords="223,320,334,393" href="#" alt="" onMouseOver="MM_showHideLayers('mobel2','','show')" onMouseOut="MM_showHideLayers('mobel2','','hide')" onfocus=this.blur() >
<area shape="rect" coords="336,319,393,394" href="#" alt="" onMouseOver="MM_showHideLayers('mobel3','','show')" onMouseOut="MM_showHideLayers('mobel3','','hide')" onfocus=this.blur() >
</map>
</BODY>
<script language="JavaScript">
<!--
window.open = SymRealWinOpen;
//-->
</script>
</HTML>