Klikbar billede i slide show
Jeg er ved at lave en hjemmeside hvor der skal være et billede galleri (slide) som kan køre ved at man trykker på "frem" og "tilbage", og det fungere via javascipt. Jeg vil gerne have at man skal kun trykke på billedet og det så kommer op i en større størrelse nedenunder. Altså skal der flettes en javascript kode ind i den allerede eksisterende javascriptkode, som styre billedeslidegalleriet. Og hvordan gør man det, og hvordan ser en sådan kode ud, og hvor skal den placeres???På følgende link kan du se hvad jeg roder med: http://www.gourmetchefen.dk/madgalleri.asp
Jeg har sat et dummie billede ind nedenunder for at vise hvor det er jeg gerne vil have det store billede til at komme frem når man trykker på det lille
Her er koden jeg har brugt:
<html>
<head>
<title>Gourmetchefen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/default.css" rel="stylesheet" type="text/css">
<SCRIPT language=javascript>
var path = "../Gallery/galleri/" // Sti hen til mappe med billeder
var pics = new Array( "21820CCF.jpg", "21821CCF.jpg", "21829CCF.jpg", "21830CCF.jpg", "21841CCF.jpg", "21842CCF.jpg", "21844CCF.jpg", "21845CCF.jpg", "21852CCF.jpg", "21873CCF.jpg", "21888CCF.jpg", "21889CCF.jpg", "21897CCF.jpg", "21898CCF.jpg", "21905CCF.jpg", "21907CCF.jpg", "21922CCF.jpg", "21925CCF.jpg", "21926CCF.jpg", "21938CCF.jpg", "21941CCF.jpg", "21971CCF.jpg", "FD001152.jpg", "FD001170.jpg" );
holder = new Array( );
for (var i=0; pics.length > i; i++) { // start prefetch af billederne
holder[i] = new Image();
holder[i].src = "" +path +pics[i];
};
mbnr = 0 // mummer på nuvaerende billede.
function visPic(step) { // laver 'slideshow' med billederne i holder[]
mbnr = mbnr +step;
if ( mbnr >= holder.length ) mbnr = 0;
if ( 0 > mbnr ) mbnr = holder.length-1;
document.images.form.src = holder[mbnr].src
}; //slut vis billede
// --></script>
</head>
<body topmargin="0" >
<table align="center" width="768" border="0" background="../Grafik/Bg.gif" height="100%" class="nobordertop" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="250"><br>
<table width="56%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="12%"> </td>
<td width="88%"><div align="center"><img src="../Grafik/Logo.jpg" width="190" height="142"></div></td>
</tr>
<tr>
<td> </td>
<td><p><A HREF="default.asp" class="menu"><br>
<br>
<br>
<br>
<br>
<br>
» Forside</A><br>
<A HREF="../Firmaprofil.asp" class="menu">» Firmaprofil</A><br>
<A HREF="../menuer.asp" class="menu">» Menuer</A><br>
<A HREF="../referencer.asp" class="menu">» Kunde referencer</A><br>
<A HREF="../madgalleri.asp" class="menu">» Madgaleri</A><br>
<A HREF="../risogros.asp" class="menu">» Ris & ros</A><br>
<A HREF="../kontakt.asp" class="menu">» Kontakt</A><br>
<br>
</p>
</td>
</tr>
</table>
<br>
<br>
<br>
<table width="219" border="0" align="left" background="../Grafik/Bg.gif" bgcolor="#FFFFFF">
<tr>
<td width="178"><font color="#CCCCCC"><a class="menu" href="../alacarte.asp">A`la Carte menu</a></font></td>
</tr>
<tr>
<td><font color="#CCCCCC"><a class="menu" href="../buffet.asp">Buffeter</a></font></td>
</tr>
<tr>
</tr>
<tr>
<td>
<p><font color="#CCCCCC"><a class="menu" href="../foraar.asp">Forårsbuffet</a></font></p>
</td>
</tr>
<tr>
<td><font color="#CCCCCC"><a class="menu" href="../season.asp">Sæsonbuffet</a></font></td>
</tr>
<tr>
<td><font color="#CCCCCC"><a class="menu" href="../frokost.asp">Frokostbuffet</a></font></td>
</tr>
<tr>
<td><font color="#CCCCCC"><a class="menu" href="../gastronomi.asp">Buffet Gastronomique</a></font></td>
</tr>
<tr>
<td><font color="#CCCCCC"><a class="menu" href="../special.asp">GourmetChefens special Buffet</a></font></td>
</tr>
<tr>
<td><font color="#CCCCCC"><a class="menu" href="../gourmet.asp">Gourmetbuffet</a></font></td>
</tr>
<tr>
<td><font color="#CCCCCC"><a class="menu" href="../fisk.asp">Fiske skaldyrs buffet</a></font></td>
</tr>
<tr>
<td><font color="#CCCCCC"><a class="menu" href="../vegetar.asp">Vegetar buffet</a></font></td>
</tr>
<tr>
<td><div align="left">
<p> </p>
<p> </p>
<p><img src="../Grafik/visit1.jpg" width="200" height="24"> <font size="1"><br>
<font color="#999999">Ranunkelvej 231 - 8471 Sabro<br>
Tlf: +45 61 30 30 10<br>
<a href="mailto:info@gourmetchefen.dk"><font color="#DA8238">info@gourmetchefen.dk</font></a></font></font><br>
<font size="1">Privat <br>
<font color="#999999"><a href="mailto:ole_poulsen@gourmetchefen.dk"><font color="#DA8238">ole_poulsen@gourmetchefen.dk</font></a><br>
Privat tlf: 86122138<br>
Mobil: +45 61 30 30 10</font></font>
</p>
</p>
</div>
</font></td>
</tr>
</table>
<!-- det skal være her det billede -->
</td>
<td width="1" background="/border.gif"></td>
<td >
<!-- her starter main siden her skal teksten være haha -->
<div align="center"></div>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr><p><div align="center"><br>
<h5>Madgalleri</h5>
</div><br>
<FORM ACTION="java script:return false" name=marm method=post onsubmit="return false;">
<p align="center"><img src="Grafik/Web pics/fro.jpg" name='form' width=200 height=150 border=0 align=bottom></p><!-- her peges på det billede som ses først -->
<p align="center">
<input type="button" name="tilbage" onClick='visPic(+1)' value='<' class="knap">
<input type="button" name="fremad" onClick='visPic(-1)' value='>' class="knap">
</p>
</FORM>
<td><div align="center">
<div align="center">
<div align="center"><br><br><img src="Grafik/Web pics/fro.jpg" alt="" width="400" height="300" border="0"></div><br><br><br><br>
</p>
</div>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
