Udskift billede ved tryk.
Jeg vil lave en side, der udskifter et billede ved tryk på en frem og en tilbage-knap. Man skal kun kunne trykke frem/tilbage hvis der er nogen billeder at vise. Billedet der skal indsættes kommer fra en mySQL database.Jeg kan dog ikke få det til at virke. Jeg har prøvet med forskellige metoder (<a href="java script:clickFunction('back');"> og <a href="#" onclick="clickFunction('forward')">) men jeg ved ikke hvilken der er bedst, hvorfor ingen af dem virker eller om man skal gøre det på en helt anden måde. Jeg har vedlagt kildekoden. Er der nogen der kan hjælpe?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<base target="main" />
<script>
<?php
$con = mysql_connect("mydb3.surftown.dk","Mozil_admin","xbox360");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("Mozil_uploads", $con);
$result = mysql_query("SELECT fileName FROM pictures ORDER BY myDate");
$pictureList = "";
while ($row = mysql_fetch_array($result)) {
$pictureList = $pictureList . '"' . $row['fileName'] . '", ';
}
mysql_close($con);
if (strcasecmp($pictureList, "") != 0) {
$pictureList = $pictureList . ",,,";
$pictureListArray = explode(", ,,,", $pictureList);
$picArray = "pictureArray = new array{" . $pictureListArray[0] . "};";
} else {
$picArray = "pictureArray = new array{};";
}
echo $picArray;
?>
var currentPic = 0;
var backButton = new image();
var backButtonInactive = new image();
var forwardButton = new image();
var forwardButtonInactive = new image();
window.onload = function() {
backButton.src = "images/knappiltilbage.jpg";
backButtonInactive.src = "images/knappiltilbage_ia.jpg";
forwardButton.src = "images/knappilfrem.jpg";
forwardButtonInactive.src = "images/knappilfrem_ia.jpg";
setButtons();
document.mainpic.src = "pictures/" + pictureArray[currentPic];
}
function setButtons() {
if (currentPic == 0) {
document.backButton.src = backButtonInactive.src;
} else {
document.backButton.src = backButton.src;
}
if (currentPic == pictureArray.length-1) {
document.forwardButton.src = forwardButtonInactive.src;
} else {
document.forwardButton.src = forwardButton.src;
}
}
function clickFunction(direction) {
switch(direction) {
case 'back':
if (currentPic > 0) {
currentPic--;
document.mainpic.src = pictureArray[currentPic];
setButtons();
}
break;
case 'forward':
if (currentPic < pictureArray.length) {
currentPic++;
document.mainpic.src = pictureArray[currentPic];
setButtons();
}
}
}
</script>
</head>
<body bgcolor="#CECCCD">
<a href="java script:clickFunction('back');"><img src="../images/knappiltilbage_ia.jpg" name="backButton"/></a>
<a href="#" onclick="clickFunction('forward')"><img src="../images/knappilfrem.jpg" name="forwardButton"/></a>
<img src="pictures/default.jpg" name="mainpic" />
</body>
</html>
