aquaman: JSFX.Rollover-Image in der Tabelle zentrieren

Beitrag lesen

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