Problem bei Sliding mit CSS-Clipping/Javascript
0 0 0 
molily
0
Problem bei Sliding mit CSS-Clipping/Javascript
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;
}
-
Hi there,
Hallo zusammen!
//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 + ")";
}ich denke einmal, daß sich der IE7 an einer Variable namens object stört...
-
ich denke einmal, daß sich der IE7 an einer Variable namens object stört...
object nun in element umbenannt. Probleme unverändert
Des weiteren muss man bei FF/Safari nach jedem Neuladen der Seite 2x auf das Bild klicken um das darunterliegende ganze Bild zu sehen!? Danach funkts bei jedem Klick das Ein-/Ausblenden
-
Meldung bei Klick auf Rufzeichen im IE: Objekt erwartet
Zeilen/Zeicheninfo nicht nachvollziehbar (11/1)
-
-
Hallo,
ich denke einmal, daß sich der IE7 an einer Variable namens object stört...
object ist zumindest ein erlaubter Bezeichner in JavaScript und auch im MSIE-Umfeld kein vordefinierter Wert, IE sollte sich also nicht daran stören.
@erawan:
Im IE 7 hingegen geht gar nix. (von dem bekomm ich nur den Hinweis das ein Fehler auf der Seite ist ...)
Vielleicht postest du auch mal die exakte Fehlermeldung (ich habe keinen IE 7 zur Hand), die würde weiterhelfen.
Mathias
-
-
2 Nachfragen:
<script type="application/javascript" src="inc/slide.js"> </script>
wieso hier dieser Mime-Type statt text/javascript?
/* <![CDATA[ */
wozu die Auskommentierung in einem externen JavaScript?
-
wieso hier dieser Mime-Type statt text/javascript?
war keine Absicht wurde anscheinend vom Editor so vorausgefüllt, werd ich ändern
wozu die Auskommentierung in einem externen JavaScript?
sorry mein Fehler ist beim Kopieren mithineingerutscht
-