Hallo zusammen!
Bitte um Hilfe bei folgenden Problem(en):
Ich möchte bei einem Projekt gerne ähnliche Bild-Funktionen wie auf der Seite http://www.arkan.at/allsite_prod1/ContentView/5/FrontEnd?pageId=512&language=de
jedoch ohne Einsatz von Flash statt dessen diese Funktionen mit Javascript umsetzen (jedoch so, dass jene die kein Javascript haben oder dieses deaktiviert haben trotzdem kein Nachteil haben)
Funktionen zum Einblenden des Hauptbildes und zum Scrollen hab ich bereits gefunden und auch mehr oder weniger erfolgreich unter Firefox/Safari zum Laufen gebracht.
Haken bei diesen ist leider, dass Sliding nur ohne Doctypeangabe funktioniert, was natürlich keine Lösung sein kann.
Im IE 7 hingegen geht gar nix. (von dem bekomm ich nur den Hinweis das ein Fehler auf der Seite ist ...)
Ich weiß dass das Gewollte recht komplex ist aber vielleicht findet ihr ja beim Drüberschauen Fehler, die bei der Lösung der Probleme vielleicht hilfreich sein könnten. Danke bereits im Voraus!
Quelltext der auf das Minimum reduzierten Seite
<!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" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Slidetest</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="application/javascript" src="inc/slide.js"> </script>
<script type="text/javascript" src="inc/blend.js"> </script>
<link href="css/trimmel-screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body onload="right('mainpic'); opacity('imgbox', 0, 100, 3000);">
<div id="imgbox" style="background: url(pix/test-breitv.jpg) 50% 50% no-repeat;">
<a href="javascript:shiftOpacity('mainpic', 1000)" title="Klicken für Gesamtansicht des Bildes"><img id="mainpic" name="mainpic" src="pix/test-breit.jpg" width="641" height="420" border="0" alt="Bild" /></a>
</div>
<ul class="piclist">
<li><a href="pix/test-breit.jpg" onclick="ChangeImg('mainpic',this.href,'pix/test-breitv.jpg'); return false;"><img src="pix/test-breit.jpg" alt="test" width="100" height="55" /></a></li>
<li><a href='pix/test-breit2.jpg' onclick="ChangeImg('mainpic',this.href,'pix/test-breit2v.jpg'); return false;"><img src="pix/test-breit2.jpg" alt="test" width="100" height="55" /></a></li>
</ul>
</body>
</html>
Inhalt der Datei blend.js
/* <![CDATA[ */
function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
/* ]]> */
Inhalt der Datei slide.js
/* <![CDATA[ */
var picWidth=641, picHeight=420; // Bild-Maße
var xAbs=0, yAbs=0; // absolute Position des Bildes zu Beginn
var x=0, y=0; // relative Position des Ausschnitts zu Beginn
var clipWidth=560, clipHeight=420; // Ausschnitts-Maße angeben
var restWidth=picWidth-clipWidth; // Hilfsgröße
var restHeigth=picHeight-clipHeight; // Hilfsgröße
function movehor(imgid) {
document.getElementById(""+imgid+"").style.clip = "rect("+y+" "+(x+clipWidth)+" "+(y+clipHeight)+" "+x+")";
document.getElementById(""+imgid+"").style.left=xAbs;
}
// Ausschnitt nach rechts
function right(imgid) {
x++, xAbs--;
movehor(imgid);
if(x==restWidth) setTimeout("left('"+imgid+"')",2500);
else setTimeout("right('"+imgid+"')",40);
}
// Ausschnitt nach links
function left(imgid) {
x--, xAbs++;
movehor(imgid);
if(x==0) setTimeout("right('"+imgid+"')",2500);
else setTimeout("left('"+imgid+"')",40);
}
function ChangeImg(imgid,newpic,newbg){
document.getElementById("imgbox").style.background = "url("+newbg+") 50% 50% no-repeat";
document.getElementById(""+imgid+"").src = newpic;
}
/* ]]> */
Auszug aus dem Style Sheet
#imgbox{
width:560px;
height:420px;
overflow:hidden;
position:relative;
opacity:0;
-moz-opacity: 0;
-khtml-opacity:0;
filter: alpha(opacity=0);
z-index:1;
}
#imgbox img{
position:absolute;
top:0;
left:0;
clip:rect(0 560 420 0);
z-index:2;
}