Hej!
Var längesedan jag satt och pillade med hemsidor, men nu håller jag på att bygga upp en hemsida för ett projekt. Jag har använt mig av ett Script som jag hittat på nätet http://www.phpportalen.net/viewtopic.php?p=685879&sid=1d87305c7da68064b620edc68d1faa15 .
Scriptet laddar olika bilder och fadar ut till nästa bild inom en vald intervall. Jag skulle vilja att varje bild länkar till en speciell hemsida på min sida men jag får inte riktigt till det. Sen undrar jag även om det går att bygga in någon funktion så att man kan bläddra fram och tillbaka i bildspelet?
Tacksam för konkreta tips på kod eller hemsidor/forum som diskuterar det här, hittar tyvärr ingenting om det och jag är inte så insatt i java.
Så här ser min HTML kod ut just nu.
<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.Mitten {
text-align: center;
}
.Mitten {
text-align: center;
}
.Mitten {
text-align: center;
}
</style>
</head>
<BODY>
<script type="text/javascript">
// Browser Slide-Show script. With image cross fade effect for those browsers
// that support it.
// Script copyright (C) 2004-2010 https://www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
var FadeDurationMS=1000;
function SetOpacity(object,opacityPct)
{
// IE.
object.style.filter = 'alpha(opacity=' + opacityPct + ')';
// Old mozilla and firefox
object.style.MozOpacity = opacityPct/100;
// Everything else.
object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
var element=document.getElementById(id);
var msNow = (new Date()).getTime();
var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
if (opacity>=100)
{
SetOpacity(element,100);
element.timer = undefined;
}
else if (opacity<=0)
{
SetOpacity(element,0);
element.timer = undefined;
}
else
{
SetOpacity(element,opacity);
element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);
}
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
var foreground=document.getElementById(foregroundID);
if (foreground.timer) window.clearTimeout(foreground.timer);
if (backgroundID)
{
var background=document.getElementById(backgroundID);
if (background)
{
if (background.src)
{
foreground.src = background.src;
SetOpacity(foreground,100);
}
background.src = newImage;
background.style.backgroundImage = 'url(' + newImage + ')';
background.style.backgroundRepeat = 'no-repeat';
var startMS = (new Date()).getTime();
foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);
}
} else {
foreground.src = newImage;
}
}
var slideCache = new Array();
function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)
{
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);
if (slideCache[nextImage] && slideCache[nextImage].loaded)
{
FadeInImage(pictureID,nextImage,backgroundID);
var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)
+ ';' + nextImage;
setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",
displaySecs*1000);
// Identify the next image to cache.
imageSeparator = futureImages.indexOf(";");
nextImage = futureImages.substring(0,imageSeparator);
} else {
setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+imageFiles+"',"+displaySecs+")",
250);
}
// Cache the next image to improve performance.
if (slideCache[nextImage] == null)
{
slideCache[nextImage] = new Image;
slideCache[nextImage].loaded = false;
slideCache[nextImage].onload = function(){this.loaded=true};
slideCache[nextImage].src = nextImage;
}
}
</script>
<table width="100%" border="0">
<tr>
<td width="219" height="65"> </td>
<td width="534" class="Mitten">LOGGA</td>
<td width="218"> </td>
</tr>
</table>
<table width="100%" border="0">
<tr>
<td width="289" height="342"><p class="Mitten">B</p>
<p class="Mitten">A</p>
<p class="Mitten">N</p>
<p class="Mitten">N</p>
<p class="Mitten">E</p>
<p class="Mitten">R</p></td>
<td width="515">
<div id="Frontbilderbakgrund">
<img src="Bilder/_DSC0588.JPG" alt="slide show" width="515" height="342"id="Frontbilder">
</div>
<script type="text/javascript">RunSlideShow("Frontbilder","Frontbilderbakgrund",
"Bilder/_DSC0588.JPG;Bilder/_DSC0786.JPG;Bilder/_DSC0840.JPG;Bilder/_DSC0894.JPG",5);
</script>
</td>
<td width="167"100%" border="0"><p class="Mitten">B</p>
<p class="Mitten">A</p>
<p class="Mitten">N</p>
<p class="Mitten">N</p>
<p class="Mitten">E</p>
<p class="Mitten">R</p>
<p> </p>
<tr>
<td width="289"> </td>
<td width="515"> </td>
<td width="167"> </td>
</tr>
</table>
</body>
</html>