Kan skicka hela koden komplett med PHP- kod här också:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/stilmall.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/meny.css">
<script type="text/javascript" language="JavaScript">
function Göm() {
document.getElementById('BV').style.display = "none";
document.getElementById('overlay').style.display = "none";
}
function Visa(fid) {
changeSelected(fid);
document.getElementById('BV').style.display = "block";
document.getElementById('overlay').style.display = "block";
}
</script>
<script language="javascript">
function changeSelected(fid)
{
var list = document.getElementById('optionlist');
var bild = fid;
var id = document.getElementById(bild);
list.selectedIndex = id.index;
changeImage();
}
function changeImage()
{
var list = document.getElementById('optionlist');
document.mainimage.src = list.options[list.selectedIndex].value;
}
function prevImage()
{
var list = document.getElementById('optionlist');
if(list.selectedIndex == 0)
{
*list.selectedIndex = list.options.length-1;
}
else
{
*list.selectedIndex--;
}
changeImage();
}
function nextImage()
{
var list = document.getElementById('optionlist');
if(list.selectedIndex == list.options.length-1)
{
*list.selectedIndex = 0;
}
else
{
*list.selectedIndex++;
}
changeImage();
}
</script>
<title>Nordanstigs Kristna Center : Fotoalbum</title>
<style type="text/css">
img.miniatyr
{
border: 1px #CCCCCC;
}
body
{
text-align: center;
}
.center
{
position: relative;
margin: 0 auto;
text-align: left;
width: 743px;
}
.bildvisarn
{
width: 700px;
height: auto;
margin-top: 20px;
position: absolute;
left: 0;
top: 0;
padding: 20px;
z-index: 99;
display: none;
background-color: #FFFFFF;
border: solid #000000 1px;
}
#overlay
{
z-index: 98;
width: 100%;
height: 100%;
background-color:#000000;
position: absolute;
background: transparent #000000;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
display: none;
}
</style>
</head>
<body>
<div id="overlay"></div>
<!-- BILDVISARN START -->
<div class="center">
<div id="BV" class="bildvisarn">
<table width="100%" align="center" border="0">
<tr>
<td align="left"><input type="button" value="<- Förra" onClick="javascript:prevImage()"></td>
<td align="center">
<?php
include "mysql/config.php";
include "mysql/connect_database.php";
$result = mysql_query("SELECT * FROM Foton ORDER BY fid DESC");
echo "<select id='optionlist' onChange='javascript:changeImage()'>\n";
while($row = mysql_fetch_array( $result )) {
*
*if (substr($row['fid'], -2) == 99) {
*
* echo "<optgroup label='" . $row['beskrivning'] . "'>\n";
*
*} else {
*
* echo "<option id='" . $row['fid'] . "' value='foton/" . $row['filnamn'] . "'>" . $row['beskrivning'] . "</option>\n";
*
*}
}
echo "</select>";
mysql_close($opendb);
?>
</td>
<td align="right"><input type="button" value="Nästa->" onClick="javascript:nextImage()"></td>
</tr>
<tr>
<td colspan="3" align="center"><a href="#" onClick="Göm()"><img name="mainimage" border="0" style="border: 1px solid #333333"></a></td>
</tr>
</table>
</div>
</div>
<!-- BILDVISARN SLUT -->
<div id="container">
<?php include('include/grafik.php') ?>
<div style="height: 140px;"></div> <!-- Tomt mellanrum -->
<div id="menycontainer"><?php
/* Bestäm vad ett menyobjekts ID ska vara */ *
$fotoalbum = "current";
include('include/meny.php'); ?></div>
*<div id="innehall">
*
<br><h1>FOTOALBUM:</h1><p><br>
<?php
include "include/mysql.php";
$result = mysql_query("SELECT * FROM Foton ORDER BY fid DESC");
while($row = mysql_fetch_array( $result )) {
if (substr($row['fid'], -2) == 99) {
*echo "<br><br><b>" . $row['beskrivning'] . "</b><p>";
*
} else {
*
*echo "<a href='#' onClick='Visa(" . $row['fid'] . ")'><img title='" . $row['beskrivning'] . "' src='foton/mini/" . $row['filnamn'] . "' class='miniatyr'></a> ";
*
}
}
mysql_close($opendb);
?>
</div><br class="clearfloat" /> *
</div><div id="bottom"></div>
</body>
</html>