<!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" xml:lang="en" lang="en">
<head>
<title>Some Site | Your Account </title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" type="image/x-icon" href="favicon2.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="navbar.css" />
<link rel="stylesheet" type="text/css" media="screen" href="navbar2.css" />
<style type="text/css">
<!--
#wrapper {
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #424851;
}
.background {
height: 662px;
width: 950px;
background-color: #2C2E37;
}
.navigation {
height: 475px;
width: 188px;
background-color: #000;
}
#navigation {
position:absolute;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
/*<![CDATA[*/
.tstparent {
position:relative;left:25px;top:20px;width:900px;height:622px;
}
.tstparent IMG {
position:absolute;left:1px;top:311px;z-index:101;cursor:pointer;
}
#tst {
position:relative;left:0px;top:0px;width:900px;height:622px;
}
#tst IMG{
position:absolute;left:0px;top:50px;width:900px;height:622px;border-Width:0px;
}
/*]]>*/
-->
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// **** Functional Code(1.52K) - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype={
animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},
cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},
apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
}
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
</head>
<body>
<div id="wrapper"><a title="some site" href=""><img alt="some site" src="logo.png" /></a>
<div id="navBarContainer">
<ul id="navBar">
<li id="navBarListings"><a href="#">Listings</a> </li>
<li id="navBarSearch"><a href="#">Search</a> </li>
<li id="navBarSellyourpiece"><a href="#">Sell your piece</a> </li>
<li id="navBarOpenyourownshop"><a href="#">Open your own shop</a> </li>
<li id="navBarYouraccount"><a href="#">Your account </a></li><li id="navBarThemoodboard"><a href="#">The moodboard</a> </li></ul><div class="background">
<div class="tstparent" >
<div id="tst" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" usemap="#tstmap"/>
</div>
<img id="back" src="backbutton.png" alt="next" style="left:0px;" onmouseup="M1.Next(1);" /><img id="next" src="forwardbutton.png" alt="previous" style="left:864px;" onmouseup="M1.Next(-1);" /></div>
<map id="map1" name="tstmap">
</map>
http://www.dynamicdrive.com/forums/showthread.php?t=63296
<script type="text/javascript">
/*<![CDATA[*/
// Image Map Slide Show (10-April-2011) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
function zxcMapSlideShow(o){
var oop=this,obj=document.getElementById(o.SlideShowID),map=document.getElementById(o.ImageMapID),mapimg=obj.getElementsByTagName('IMG')[0],iary=o.ImageArray,z0=0,z0a,img,ary=[],ms=o.SlideSpeed,but;
obj.style.overflow='hidden';
mapimg.style.zIndex='10';
for (;z0<iary.length;z0++){
img=document.createElement('IMG');
img.src=iary[z0][0];
img.style.position='absolute';
img.style.zIndex=z0>0?'0':'1';
img.style.left='0px';
img.style.top='0px';
img.style.width='100%';
img.style.height='100%';
obj.appendChild(img);
ary[z0]=[new zxcAnimate('left',img),[]];
for (z0a=0;z0a<iary[z0][1].length;z0a++){
ary[z0][1].push(iary[z0][1][z0a]);;
}
}
this.sz=obj.offsetWidth+5;
this.ary=ary;
this.pre=ary[0];
this.lst=ary[0];
this.cnt=0;
this.ms=typeof(ms)=='number'?ms:1000;
this.map=map;
this.area(0);
but=document.getElementById(o.NextButton);
if (but){
this.next=but;
}
but=document.getElementById(o.BackButton);
if (but){
this.back=but;
but.style.visibility='hidden';
}
}
zxcMapSlideShow.prototype={
Next:function(ud){
var ary=this.ary,cnt=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1),lgth=ary.length-1
cnt=cnt<0?lgth:cnt>lgth?0:cnt;
if (this.back&&cnt>0){
this.back.style.visibility='visible';
}
this.pre[0].obj.style.zIndex='0';
this.lst[0].obj.style.zIndex='1';
this.pre=this.lst;
ary[cnt][0].obj.style.zIndex='2';
ary[cnt][0].animate(this.sz*-ud,0,this.ms,[0,this.sz]);
this.lst=ary[cnt];
this.cnt=cnt;
this.area(cnt);
},
area:function(nu){
var ary=this.ary[nu],map=this.map,z0=0,area,lgth;
while (map.firstChild){
map.removeChild(map.firstChild);
}
for (;z0<ary[1].length;z0++){
area=document.createElement('AREA');
lgth=ary[1][z0][0].length;
area.shape=lgth==3?'circle':lgth==4?'rect':'poly';
area.coords=ary[1][z0][0];
if (ary[1][z0][1]){
area.href=ary[1][z0][1];
}
if (ary[1][z0][2]){
area.alt=ary[1][z0][2];
}
map.appendChild(area);
}
}
}
M1=new zxcMapSlideShow({
SlideShowID:'tst', // the unique ID name of the slide show parent node. (string)
ImageMapID:'map1', // the unique ID name of the image MAP. (string)
ImageArray:[ // an array defining the slide show images and image map data. (array)
// field 0 = the image src. (string)
// field 1 = an array of arrays defining the image map data. (array)
// field 0 = the image map area coordinates. (array)
// field 1 = the image map area link href. (string)
// field 2 = the image map area alt attribute value. (string)
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',[[[241,195,21],'#','area4'],[[85,86,131,120],'#','area5']]],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',[[[241,195,21],'#','area6'],[[85,86,131,120],'#','area7']]]
],
NextButton:'next',
BackButton:'back',
SlideSpeed:500 //(optional) the animation speed in milli seconds. (number, default = 1000)
});
/*]]>*/
</script>
</div>
<div id="navBarContainer2">
<ul id="navBar2">
<li id="navBarContactus"><a href="#">Contact us</a> </li>
<li id="navBarAboutus"><a href="#">About us</a> </li>
<li id="navBarHelp"><a href="#">Help</a> </li>
<li id="navBarFAQ"><a href="#">FAQ</a> </li>
<li id="navBarTC"><a href="#">Terms and Conditions </a></li>
<li id="navBarAuthenticity"><a href="#">Authenticity</a> </li>
<li id="navBarFeedback"><a href="#">Feedback</a> </li></ul><div id="email"> <form id="email" method="post" name="email" action="email.php"><div class="copyrightdiv">Copyright © 2011 some site. All rights reserved. </div>
</form>
</div></div></div></div>
</body>
</html>