nicht angemeldet
JSFX.Rollover-Image in der Tabelle zentrieren
Guten Abend!
Leider nichts vergleichbares im Web gefunden! Vorweg will ich mich als relativer bescheidener Webschuster outen. Kurz vor dem Ziel benötige ich nun fachkräftige Unterstützung um für mein Photogallery-Index den Abschluß zu finden. Ich habe bis zum Abschluß auf zwei Lösungswege hinausgebaut und keines endgültig realisiern können.
Fall1 unter: http://www.surfingwonder.com/test/index3333.html Hier funktioniert alles soweit, jedoch soll das untere Fenster ("public") beim seitlichen scrollen des Indexes zentriert stehen bleiben und nicht mit auf die Reise gehen.
hier der quellcode für das scroll-window, welchen ich als iframe eingebaut habe: <html> <head> <title> </title>
<script language="JavaScript"> <!--
function SymError() { return true; }
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes) { return (new Object()); }
window.open = SymWinOpen;
//--> </script>
<script LANGUAGE="JavaScript1.2"> <!--
// Parameter var sense1 = 40 // Sensibilitaetszone 1 (in %) var sense2 = 10 // Sensibilitaetszone 2 (in %) var speed1 = 3 // Scrollgeschwindigkeit in Zone 1 var speed2 = 20 // Scrollgeschwindigkeit in Zone 2 var stime = 50 // Timer zum Scrollen
// Interne Variablen var scrolling = false var scrollfast var richtung var y_mem = -1 var myWin
// Scrolling anhalten function stopp_scrolling() { scrolling = false y_mem = -1 }
// Scroll aktivieren und durchfuehren function start_scrolling(initial) { if(!scrolling) return
// Dokumentposition ermitteln var dy = (myWin.pageXOffset != null) ? myWin.pageXOffset : myWin.document.body.scrollLeft if((y_mem != dy) && !initial) return var dx = (myWin.pageYOffset != null) ? myWin.pageYOffset : myWin.document.body.scrollTop dy += richtung * (scrollfast ? speed2 : speed1)
// Scrollen myWin.scrollTo(dy, dx) y_mem = dy
// Funktion erneut aufrufen setTimeout("start_scrolling(false)", stime) }
// Auswertung der Mausposition function zeige(e) { // Mausposition und Dokumentdaten var y = myWin.Event ? e.pageX : myWin.event.clientX if(myWin.Event) y -= - (myWin.pageXOffset != null) ? myWin.pageXOffset : myWin.document.body.scrollLeft var wh = myWin.innerHeight ? myWin.innerHeight : myWin.document.body.clientWidth var dh = myWin.document.height ? myWin.document.width : myWin.document.body.scrollHeight
// Zwischenvariablen var s1 = Math.round(wh * sense1 / 100) var s2 = Math.round(wh * sense2 / 100) var now_scroll
// Scrollnotwendigkeit ermitteln if((y < s1) || (y > (wh - s1))) { now_scroll = true richtung = (y < s1) ? -1 : 1 scrollfast = ((y < s2) || (y > (wh - s2))) ? true : false } else { now_scroll = false scrolling = false }
// Scrollstatus geaendert? if(now_scroll != scrolling) { y_mem = -1 scrolling = now_scroll if(scrolling) start_scrolling(true) } }
// Mauskontrolle initiieren
myWin = window
if(myWin.Event) myWin.document.captureEvents(Event.MOUSEMOVE)
myWin.document.onmousemove = zeige
//--> </SCRIPT>
<style type="text/css"> BODY { scrollbar-base-color:#223657; scrollbar-track-color:#223657; scrollbar-face-color:grey; scrollbar-highlight-color:silver; scrollbar-3d-light-color:grey; scrollbar-dark-shadow-color:dimgray; scrollbar-shadow-color:gray; scrollbar-arrow-color:dimgray;
} </style>
<script LANGUAGE="javascript" SRC="JSFX_TransRollovers.js" TYPE="text/javascript"></SCRIPT> <script LANGUAGE="JavaScript"> <!-- JSFX.Rollover("nature","01.jpg"); JSFX.Rollover("screen1", "surf.jpg"); //--> </SCRIPT>
</head>
<body bgcolor="223657" link="#FFFFFF" vlink="#FFFFFF" alink="#FFffff" scroll="yes"> <!-- inhalt !!!!!!!!!!!--> <table width="1200" height="75" border="0" cellspacing="0" cellpadding="0"> <tr>
<td> <br> <div id="unten" style="position:relative;left:05px;top:+65px"><img src="film2.jpg" width="1100" height="9" align="center"></div> <div id="oben" style="position:relative;left:05px;top:-20px"><img src="film2.jpg" width="1100" height="9" align="center"></div>
<div id="bilder" style="position:relative;left:05px;top:-20px">
<a href="index3.html" onMouseOver="JSFX.transIn('nature');JSFX.transIn('screen','screen1');return false;" onMouseOut="JSFX.transOut('nature');JSFX.transOut('screen');return false;"><img alt="nature" src="31.jpg" width="90" hspace="3" height="67" name="nature" border="0" > </a>
</div> </td> </tr> </table>
<div align="center"> <table width="500" height="75" border="0" cellspacing="0" cellpadding="0"> <tr> <TD> <img alt="screen1" src="public.jpg" width="500" hspace="3" height="90" name="screen" border="0" class="transFade"> </td>
</tr> </table> </div> </body> </html>
Fall2: http://www.surfingwonder.com/test/index18.html Nach der Teilung des Rollovers funktioniert dieser nun nicht mehr und ich weiß nun leider nicht weiter.
Auf Frames will ich falls realierbar verzichten. Für eine konstruktive Lösung wär ich sehr dankbar. Gruss Dominik