Hi all,

I'm new to this HTML thing. So hopefully someone can help me. I got a photo gallery site with the attached coding. Now I want to be able to move to next and previous image by pressing on the buttons. I found some coding on internet for this. But now the button '<' and '>' are outside the image I would like to have the buttons in the image. How can i accomplish this. The challenge is also that the image can be horizontal or vertical so the position of the buttons should be flexible.

It would be great if someone can help me with this.

Here you find my coding:

[CODE]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<link rel=stylesheet type="text/css" href="dg.css">

<script type="text/javascript">

var stepmin=1;
var stepmax=7
var step=stepmin;

var image1=new Image();
image1.src="img/101.jpg";
var image2=new Image();
image2.src="102.jpg";
var image3=new Image();
image3.src="img/103.jpg";
var image4=new Image();
image4.src="img/104.jpg";
var image5=new Image();
image5.src="img/105.jpg";
var image6=new Image();
image6.src="106.jpg";
var image7=new Image();
image7.src="107.jpg";

// CSS Top Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Please keep this credit intact

startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>

<title>Gallery</title>

</head>
<body>

<div id="image-slider">
<div id="picture-holder">

<table width="690" align="center">
<tr>
<td width="60" nowrap valign="top">
<div align="center">

<img src="img/1px.gif" width="0" height="101" alt="" border="0"><br>
<img src="img/101.jpg" alt="Voorkant" name="photo1" id="photo1" width="30" height="30" border="0" class="mdk" onMouseOver="step=1;document.getElementById('mainphoto').src = this.src; document.getElementById('mainphoto').alt = this.alt;" onError="this.style.display='none';"><br>
<img src="img/1px.gif" width="0" height="19" alt="" border="0"><br>

<img src="img/102.jpg" alt="Voorkant" name="photo1" id="photo1" width="30" height="30" border="0" class="mdk" onMouseOver="step=2;document.getElementById('mainphoto').src = this.src; document.getElementById('mainphoto').alt = this.alt;" onError="this.style.display='none';"><br>
<img src="img/1px.gif" width="0" height="19" alt="" border="0"><br>

<img src="img/103.jpg" alt="Voorkant" name="photo1" id="photo1" width="30" height="30" border="0" class="mdk" onMouseOver="step=3;document.getElementById('mainphoto').src = this.src; document.getElementById('mainphoto').alt = this.alt;" onError="this.style.display='none';"><br>
<img src="img/1px.gif" width="0" height="19" alt="" border="0"><br>

<img src="img/104.jpg" alt="Voorkant" name="photo1" id="photo1" width="30" height="30" border="0" class="mdk" onMouseOver="step=4;document.getElementById('mainphoto').src = this.src; document.getElementById('mainphoto').alt = this.alt;" onError="this.style.display='none';"><br>
<img src="img/1px.gif" width="0" height="19" alt="" border="0"><br>

<img src="img/105.jpg" alt="Voorkant" name="photo1" id="photo1" width="30" height="30" border="0" class="mdk" onMouseOver="step=5;document.getElementById('mainphoto').src = this.src; document.getElementById('mainphoto').alt = this.alt;" onError="this.style.display='none';"><br>
<img src="img/1px.gif" width="0" height="19" alt="" border="0"><br>

<img src="img/106.jpg" alt="Voorkant" name="photo1" id="photo1" width="30" height="30" border="0" class="mdk" onMouseOver="step=6;document.getElementById('mainphoto').src = this.src; document.getElementById('mainphoto').alt = this.alt;" onError="this.style.display='none';"><br>
<img src="img/1px.gif" width="0" height="23" alt="" border="0">

<img src="img/107.jpg" alt="Voorkant" name="photo1" id="photo1" width="30" height="30" border="0" class="mdk" onMouseOver="step=7;document.getElementById('mainphoto').src = this.src; document.getElementById('mainphoto').alt = this.alt;" onError="this.style.display='none';"><br>
<img src="img/1px.gif" width="0" height="23" alt="" border="0">

<a href="javascript:slideright()">
<div class="btn ps_next" id="button">
<img src="http://demo.techglimpse.com/prev-next-buttons/right.png">
</div>
</a>
<a href="javascript:slideleft()">
<div class="btn ps_prev" id="button">
<img src="http://demo.techglimpse.com/prev-next-buttons/left.png">
</div>
</a>
</div>
</div>

<td width="30" nowrap valign="top"><div align="left">&nbsp;</td>
<td width="602" nowrap align="center" valign="top">


<span style="color:#000000; font-size:70%;"><br>p&nbsp&nbsp&nbsp&nbsp h&nbsp&nbsp&nbsp&nbsp o&nbsp&nbsp&nbsp&nbsp t&nbsp&nbsp&nbsp&nbsp o&nbsp&nbsp&nbsp&nbsp g&nbsp&nbsp&nbsp&nbsp r&nbsp&nbsp&nbsp&nbsp a&nbsp&nbsp&nbsp&nbsp p&nbsp&nbsp&nbsp&nbsp h&nbsp&nbsp&nbsp&nbsp&nbsp y</span>
</strong></p>


<table align="center"><tr><td>
<font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size="-2"><ul id="csstopmenu">
<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="index.html">Home</a></div>

</li>

<li class="mainitems">
<div class="headerlinks"><a href="gallery001.html">Gallery</a></div>
<ul class="submenus" style="width: 75px">
<li><a href="gallery001.html">Motion</a></li>
<li><a href="gallery101.html">Still life</a></li>
<li><a href="gallery201.html">Locations</a></li>
<li><a href="gallery301.html">Shapes</a></li>
<li><a href="gallery501.html">Objects</a></li>
<li><a href="gallery601.html">People</a></li>
<li><a href="gallery401.html">Projects</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="slideshow.html">Slideshow</a></div>

</li>

<li class="mainitems">
<div class="headerlinks"><a href="contact.html">Contact</a></div>

</li>

</ul></font>
<div id="clearmenu" style="clear: left"></div>
</td></tr></table>

<img src="img/1px.gif" width="0" height="30" alt="" border="0"><br>
<img src="img/101.jpg" alt="" name="mainphoto" id="mainphoto" border="0" class="mdk" onError="this.style.display='none';"></div>

</td>
</tr>

</table>

<script>

function slideright()
{
//if browser does not support the image object, exit.
if (!document.images)
return;

if (step<stepmax)
step++;
else
step=stepmin;

document.images.mainphoto.src=eval("image"+step+".src");
}

function slideleft()
{
//if browser does not support the image object, exit.
if (!document.images)
return;

if (step>stepmin)
step--;
else
step=stepmax;

document.images.mainphoto.src=eval("image"+step+".src");
}
</script>
</body>
</html>

[Code]

and also the css coding:

[CODE]
#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
font-size: 10px;-
}

#csstopmenu li{
float: left;
position: relative;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 1px solid #657383;
border-left-width: 0;
height: 14px;
background-color: #ffffff;
position: absolute;
width: 75px;
}


.headerlinks a{
display: block;
height: 14px;
text-indent: 3px;
width: 100%;
}
.headerlinks a:link {
color: #657383;
}
.headerlinks a:hover{
background-color: #657383;
color: #ffffff;
}

.headerlinks a:active{
background-color: #ffffff;
color: #800000;
}

.submenus{
display: none;
position: absolute;
left: 0;
background-color: #ffffff;
border: 1px solid #657383;

}

.submenus li{
width: 75px;
height: 16px;
}

.submenus li a{
display: block;
width: 100%;
height: 16px;
text-indent: 3px;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: #657383;
color: #ffffff;
}

.submenus li a:active{
background-color: #657383;
color: #800000;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}
.csstopmenu {
color: #800000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style5 {
color: #800000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
a:link {
color: #657383;
}
a:visited {
color: #657383;
}
a:hover {
color: #000000;
}
a:active {
color: #800000;
}

#picture-holder {
text-align: center;
}
#picture-holder:hover .btn{
display:block;
}
#image-slider{
position:relative;
margin:0 auto;
overflow:hidden;
width:100%;
}
.ps_prev, .ps_next{
width:40px;
height:40px;
position:absolute;
z-index:100;
top:180px;
line-height:40px;
text-align:center;
display:none;
cursorointer;
}
.ps_prev{
background:#FFF;
padding:15px 10px 4px 12px;
opacity: 0.8;
left:00px;

}
.ps_next{
background:#FFF;
padding:15px 10px 4px 12px;
opacity: 0.8;
right:00px;
}
.ps_next img {
width:20px;
}
.ps_prev img {
width:20px;
}
#button {
font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
color: #686868;
font-size: 2px;
font-weight: normal;
border: 1px solid #AFAFAF;
-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.text {
margin-left: 200px;
margin-top: 20px;
font-weight:normal;
color:black;
font-size:0.8em;
}



[CODE]
Many thanks in advance
Hazy