znalazlem fajną rzecz - przesuwana galeria:
- Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<script type="text/javascript"><!--
var w=235;
var h=295;
var l=screen.width-(w+15);
var features='left='+l+',top=0,width='+w+',height='+h+',resizable=yes';
function pop(url) {
window.open(url,'',features);
}
// -->
</script>
<script type="text/javascript"><!--
//<![CDATA[
//* preload rollover
var roll = new Image()
roll.src = 'spiraalmetman3opt.jpg'
var speed = 1;
var intervalVal = "";
var prevPos = 0;
var currPos = 0;
function arrowCenter()
{
var posLeft = document.getElementById("arrow").style.pixelLeft;
var pixelWidth = document.getElementById("arrow").style.pixelWidth;
return posLeft + (pixelWidth / 2);
}
function scrollIt(objImg)
{
var imgWidth = objImg.offsetWidth;
var iDivEdgeToImgCenter = objImg.offsetLeft + (imgWidth / 2);
var iDivEdgeToArrowCenter = arrowCenter() - currPos;
var iAmountToMove = iDivEdgeToArrowCenter - iDivEdgeToImgCenter + 26;
clearInterval(intervalVal);
if(iAmountToMove > 0)
intervalVal = setInterval("doRight(" + objImg.id + ")", speed);
else if(iAmountToMove < 0)
intervalVal = setInterval("doLeft(" + objImg.id + ")", speed);
}
function doRight(objImg)
{
var imgWidth = objImg.offsetWidth;
var iDivEdgeToImgCenter = objImg.offsetLeft + Math.round((imgWidth / 2));
var iDivEdgeToArrowCenter = arrowCenter() - currPos;
currPos = document.getElementById("container").style.posLeft;
if((iDivEdgeToArrowCenter - iDivEdgeToImgCenter + 26) == 0)
{
clearInterval(intervalVal);
return;
}
currPos++;
document.getElementById("container").style.posLeft = currPos;
}
function doLeft(objImg)
{
var imgWidth = objImg.offsetWidth;
var iDivEdgeToImgCenter = objImg.offsetLeft + Math.round((imgWidth / 2));
var iDivEdgeToArrowCenter = arrowCenter() - currPos;
currPos = document.getElementById("container").style.posLeft;
if((iDivEdgeToArrowCenter - iDivEdgeToImgCenter + 26) == 0)
{
clearInterval(intervalVal);
return;
}
currPos--;
document.getElementById("container").style.posLeft = currPos;
}
//]]>
// -->
</script>
<link href="http://www.inspiration-company.nl/layout2.css" rel="stylesheet" type="text/css">
<style type="text/css"><!--
#container { border: solid 0px #6699cc; position: absolute; top: 100px; left: 0px; width: 5788px; visibility: visible; #: absolute; }
#middle { position: absolute; top: 95px; left: 0px; width: 950px; height: 350px; overflow: hidden; visibility: visible }
.images { float: left; border: none; position: relative; }
body { background-color: #ffffff; overflow: hidden; }-->
</style>
</head>
<body>
<div id="middle">
<div id="container">
<table>
<tr>
<td>
<div class="kop">
<img border="0" src="dotwhite.gif" height="1" width="52"> Image1
<img border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="155">Image 2
<img border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="135">Image 3
<img border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="145">Image 4
<img border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="145">Image 5
<img border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="145">Image 6</div>
</td>
</tr>
<tr>
<td>
<a href="(Empty Reference!)" target="_self"><img ID="LinkA" class="images" border="0" src="http://www.inspiration-company.nl/intromanopschommelopt.jpg"></a>
<img class="images" border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="40">
<a href="(Empty Reference!)" target="_self"><img ID="LinkB" class="images" border="0" src="http://www.inspiration-company.nl/introgatinluchtopt.jpg"></a>
<img class="images" border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="40">
<a href="(Empty Reference!)" target="_self"><img ID="LinkC" class="images" border="0" src="http://www.inspiration-company.nl/introvogelsincirkelopt.jpg"></a>
<img class="images" border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="40">
<a href="(Empty Reference!)" target="_self"><img ID="LinkD" class="images" border="0" src="http://www.inspiration-company.nl/intromanopschommelopt.jpg"></a>
<img class="images" border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="40">
<a href="(Empty Reference!)" target="_self"><img ID="LinkE" class="images" border="0" src="http://www.inspiration-company.nl/intromanopschommelopt.jpg"></a>
<img class="images" border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="40">
<a href="(Empty Reference!)" target="_self"><img ID="LinkF" class="images" border="0" src="http://www.inspiration-company.nl/introgatinluchtopt.jpg"></a>
<img class="images" border="0" src="http://www.inspiration-company.nl/dotwhite.gif" height="1" width="40">
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</div>
<div id="links">
<a href="#" onclick="scrollIt(LinkA);">LinkA: scroll to image 1, is that possible?</a><br>
<a href="#" onclick="scrollIt(LinkB);">LinkB: scroll to image 2, is that possible?</a><br>
<a href="#" onclick="scrollIt(LinkC);">LinkC: scroll to image 3, is that possible?</a><br>
<a href="#" onclick="scrollIt(LinkD);">LinkD: scroll to image 4, is that possible?</a><br>
<a href="#" onclick="scrollIt(LinkE);">LinkE: scroll to image 5, is that possible?</a><br>
<a href="#" onclick="scrollIt(LinkF);">LinkF: scroll to image 6, is that possible?</a><br>
</div>
<div id="arrow" style="position: absolute; top: 150px; left: 460px;">
<img src="http://www.inspiration-company.nl/pijl-omlaagkleinopt.jpg" width="50" height="50" border="0"></div>
</body>
</html>
ALE! pod IE smiga w przeciwienstwie do Firefoxa.. wiecie moze co z tym kodem zrobic, zeby smigalo pod FF?
pozdrawiam!
juz dziala!!!