Scroll Buttons

  • Hi, habe eine homepage und bin momentan am erstellen des neuen designs. Ich stehe da nur vor einem Problem,
    Habe mir buttons gebastelt die genau zum style der seite passen, die mit image maps so angepasst dass wirklich nur die Fläche Button iss die Button sein soll. Alles schön und gut. nen I-frame hab ich auch rein gehängt,

    nun komm ich zu meinem Problem, ich möchte über 2 Buttons (eigentlich 3) die html seiten hoch und runter scrollen die im I-Frame angezeigt werden. Hab schon einiges an scripten durch gemacht aber es hat nix funktioniert. Mein letzter versuch endete mit diesem script von macromedia. Aber in der ursprungs version wird da nur ein text gescrollt der in einer maske sitzt. Das script funktioniert im ursprung ohne probleme.

    Beispiel:

    http://home.arcor.de/abecker/test.html

    das einzige was mir vom quelltext wirklich noch Probleme bereitet ist ob es geht das ganze so umzuschreiben dass nicht mehr der text in der maske angesprochen wird sondern die html seite in meinem I-Frame

    Wers braucht

    Quelltext meiner Page ohne das script

    </script>

    <body background="Bilder/hintergrund-blau.jpg" bgcolor="#4d74b9" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
    <table width="1063" border="0" cellspacing="0" cellpadding="0" cool gridx="16" gridy="16" height="709" showgridx showgridy>
    <tr height="68">
    <td width="26" height="708" rowspan="10"></td>
    <td width="21" height="414" colspan="3" rowspan="5"></td>
    <td width="24" height="327" rowspan="4"></td>
    <td width="66" height="171" rowspan="3"></td>
    <td width="87" height="78" colspan="3" rowspan="2"></td>
    <td width="838" height="68"></td>
    <td width="1" height="68"><spacer type="block" width="1" height="68"></td>
    </tr>
    <tr height="10">
    <td width="838" height="569" rowspan="7" valign="top" align="left" xpos="224">
    <iframe name="i-frame" src="sub-seiten/main-sub.html" width="793" height="552" align="left" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>
    </td>
    <td width="1" height="10"><spacer type="block" width="1" height="10"></td>
    </tr>
    <tr height="93">
    <td width="87" height="249" colspan="3" rowspan="2" valign="top" align="left" xpos="137"></td>
    <td width="1" height="93"><spacer type="block" width="1" height="93"></td>
    </tr>
    <tr height="156">
    <td width="66" height="156" valign="top" align="left" xpos="71"></td>
    <td width="1" height="156"><spacer type="block" width="1" height="156"></td>
    </tr>
    <tr height="87">
    <td width="90" height="87" colspan="2" valign="top" align="left" xpos="47"></td>
    <td width="14" height="87"></td>
    <td width="35" height="253" rowspan="3"></td>
    <td width="38" height="310" rowspan="4"></td>
    <td width="1" height="87"><spacer type="block" width="1" height="87"></td>
    </tr>
    <tr height="99">
    <td width="125" height="99" colspan="6" valign="top" align="left" xpos="26"></td>
    <td width="1" height="99"><spacer type="block" width="1" height="99"></td>
    </tr>
    <tr height="67">
    <td width="11" height="195" rowspan="4"></td>
    <td width="100" height="67" colspan="4" valign="top" align="left" xpos="37"></td>
    <td width="14" height="195" rowspan="4"></td>
    <td width="1" height="67"><spacer type="block" width="1" height="67"></td>
    </tr>
    <tr height="57">
    <td width="100" height="57" colspan="4" valign="top" align="left" xpos="37"></td>
    <td width="35" height="128" rowspan="3" valign="top" align="left" xpos="151"></td>
    <td width="1" height="57"><spacer type="block" width="1" height="57"></td>
    </tr>
    <tr height="23">
    <td width="1" height="71" rowspan="2"></td>
    <td width="99" height="23" colspan="3"></td>
    <td width="876" height="71" colspan="2" rowspan="2" valign="top" align="left" xpos="186"></td>
    <td width="1" height="23"><spacer type="block" width="1" height="23"></td>
    </tr>
    <tr height="48">
    <td width="99" height="48" colspan="3" valign="top" align="left" xpos="38"></td>
    <td width="1" height="48"><spacer type="block" width="1" height="48"></td>
    </tr>
    <tr height="1" cntrlrow>
    <td width="26" height="1"><spacer type="block" width="26" height="1"></td>
    <td width="11" height="1"><spacer type="block" width="11" height="1"></td>
    <td width="1" height="1"><spacer type="block" width="1" height="1"></td>
    <td width="9" height="1"><spacer type="block" width="9" height="1"></td>
    <td width="24" height="1"><spacer type="block" width="24" height="1"></td>
    <td width="66" height="1"><spacer type="block" width="66" height="1"></td>
    <td width="14" height="1"><spacer type="block" width="14" height="1"></td>
    <td width="35" height="1"><spacer type="block" width="35" height="1"></td>
    <td width="38" height="1"><spacer type="block" width="38" height="1"></td>
    <td width="838" height="1"><spacer type="block" width="838" height="1"></td>
    <td width="1" height="1"></td>
    </tr>
    </table>
    <map name="ScrollUP">
    <area shape="poly" coords="55,2,0,40,0,41,15,69,27,99,27,87,25,77,19,62,18,60,18,53,39,54,39,45,18,45,18,36,40,18,56,2" href="sub-seiten/news.html" target="i-frame">
    </map>
    <map name="Scrolldownlinks">
    <area shape="poly" coords="34,0,23,45,15,72,6,97,8,97,34,86,34,1" href="sub-seiten/news.html" target="i-frame">
    </map>
    <map name="Scrolldownrechts">
    <area shape="poly" coords="0,29,35,18,58,12,48,12,48,3,3,3,3,11,0,11,0,28" href="sub-seiten/news.html" target="i-frame">
    </map>
    </body>

    </html>

    Würde mich über hilfe freuen.

    Mfg

    Heavygerch 8)

  • Ja hatte da nach button gesucht. da gabs das ergebnis leider nicht. Werd das nächste mal etwas umfangreicher suchen. sorry deswegen.

    Das script iss ja ganz scheen. habe da auch nur wieder ein Problem.

    Orginal Script

    <a onMouseOver="javascript:window.scrollBy(0, +10);">Up</a>

    <a onMouseOver="javascript:window.scrollBy(0, -10);">Down</a>

    Auf meien seite angepast...

    <map name="ScrollUP">
    <area shape="poly" coords="54,2,-1,40,-1,41,14,69,26,99,26,87,24,77,18,62,17,60,17,53,38,54,38,45,17,45,17,36,39,18,55,2" onMouseOver="javascript:window.scrollBy(0, +10);" target="i-frame">
    </map>
    <map name="Scrolldownlinks">
    <area shape="poly" coords="34,0,23,45,15,72,6,97,8,97,34,86,34,1" onMouseOver="javascript:window.scrollBy(0, -10);" target="i-frame">
    </map>
    <map name="Scrolldownrechts">
    <area shape="poly" coords="0,29,35,18,58,12,48,12,48,3,3,3,3,11,0,11,0,28" onMouseOver="javascript:window.scrollBy(0, -10);" target="i-frame">
    </map>

    Mich wundert irgendwie dass da der target Befehl nich funktioniert. Funktioniert so irgendwie an all den anderen stellen wo ich den einsetze soo schön.
    Die buttons von mir scrollen jetz einwandfrei mit imagemaps und allem drum und drann, dass ist kein Problem, nur scrollen die die haupt seite und nicht den iframe. hab ich da was falsch gemacht, oder kann ich nich von der hauptseite aus den inhalt des iframes nicht durch nen button scrollen??

    Mfg

    Heavy

    Wäre schön wenn man das realisieren könnte

  • target und js ?!?

    das wird auch nicht...

    das scritp ist für die nutzung im frame gedacht..

    aber von auserhabl, würde es dann


    da must du dem iframe dann eien id geben und dann

    javascript:document.getElementById('dein_iframe').window.scrollBy(0, -10);

  • JA ok das war echt mal wieder ne dummheit von mir :D konnte sicher keinem anderen Passieren. Werd das später mit der ID machen. Da ich jetz vom PC weg muss. Und n groooßes danke.

    Hm das mit der ID hätt auch mir einfalln können. Aber naja zum glück gibts hier so viele nette leuts :D. Werd mich wieder melden wenns funzt 8) .

    Mfg

    Da Schorsch

  • Also entweder bin ich heut zu blöd ne id meinem Frame zu zu weisen, oder ich hab wieder irgend nen sau dämlichen fehler gemacht. Also hier die 2 ausschnitte aus meinem Quelltext.

    I-Frame mit ID

    <iframe id="map" name="i-frame" src="sub-seiten/main-sub.html" width="793" height="552" align="left" scrolling="no" marginheight="0" marginwidth="0" frameborder="0">
    </iframe>

    Und hier eine von den imagemaps mit dem script.

    <map name="ScrollUP">
    <a onMouseOver="javascript:document.getElementById('map').window.scrollBy(0, +10);">
    </map>

    Also hätte gestern wirklich nich so viel trinken solln. So n kater ist einfach nicht kompatibel mit dem getippe hier. alles dauert 5 ma so lang und geht trotzdem net :cry:

  • Sorry war nich eingeloggt, mein gast beitrag kann also gelöscht werden ,

    hier die aktuellste variante meines Problems

    Also entweder bin ich heut zu blöd ne id meinem Frame zu zu weisen, oder ich hab wieder irgend nen sau dämlichen fehler gemacht. Also hier die 2 ausschnitte aus meinem Quelltext.

    I-Frame mit ID

    <iframe id="map" name="i-frame" src="sub-seiten/main-sub.html" width="793" height="552" align="left" scrolling="no" marginheight="0" marginwidth="0" frameborder="0">
    </iframe>

    Und hier eine von den imagemaps mit dem script.

    <map name="ScrollUP">
    <area shape="poly" coords="54,2,-1,40,-1,41,14,69,26,99,26,87,24,77,18,62,17,60,17,53,38,54,38,45,17,45,17,36,39,18,55,2" href="javascript:;" onMouseOver="javascript:document.getElementById('map').window.scrollBy(0, +10);">
    </map>

    Also hätte gestern wirklich nich so viel trinken solln. So n kater ist einfach nicht kompatibel mit dem getippe hier. alles dauert 5 ma so lang und geht trotzdem net :cry: 8)

  • Also kann mir da keiner weiter helfen?? :? Hab halt noch nich soo den ganzen durchblich beim java gescripte wie manch anderer hier. Bin mom dran mich da etwas ein zu arbeiten und versuche zu lernen so gut es geht. Aber bei dem fall hier. Ich steh vor nem rätsel : / :?

  • be cool es war WE....

    denn es giebt leute die so schlau sind sich nach dme saufen ncht wieder an den rechner zu setzen :-p


    Code
    <iframe id="i-frame" name="i-frame" src="" width="793" height="552" align="left" scrolling="no" marginheight="0" marginwidth="0" frameborder="0">
    </iframe>
    
    
    <a onMouseOver="javascript:window.frames['i-frame'].scrollBy(0, +10);">down</a>

    einbeispiel hier...

    das scrollen geht aber nur, wenn der link im frame eine relative URL ist (ohne protokoll und domain) sonst sagt der moz ... is nicht von wegen berechtigugn...

  • Ha das funktioniert ja schon mal sehr nice :D. Auch mit meinen Buttons. Nun das ganze noch n bisschen modifizieren und dann hab ich die buttons endlich komplett 8) . Aber da werd ich mich vorerst mal dran setzen und mich selber durch arbeiten. Heist ja nich umsonst learning by doing :D

  • ja es geibt sie doch noch diese erkenntniss des "learning by doing"

    Also dann übe mal schön und wenn man selbst bei google nichts findest weis du ja wo du uns findest.

  • Ja werd wol dann mal ne runde weiter googleln 8) . Muss halt schauen ob das möglich iss. Hoffe mal dass ich diesmal selbst die lösung finde 8) . Ansonsten bin ich mir sicher dass mir hier geholfen werden kann :roll:

  • Da bin ich mal wieder.

    Meine situation sieht momentan wie folgt aus.

    Der iframe scrollt nach oben und nach unten. Allerdings macht er nur einmal den dementsprechend groß oder kleinen sprung (wie eingestellt) nach unten oder oben wenn ich mit der maus drüber fahre. Nun hätt ich aber gern das das nich nur einmal runter scrollt, sondern dass es im Prinzip die aktion immerwieder wiederholt solange ich mit der maus über dem scroll button bin. (und irgendwann auf der seite unten bin.)

    Nicht dass ihr mich falsch versteht. will jetz hier keine lösung, möcht nur wissen ob ich auf dem richtigen weg bin.

    Hm schwer zu erklären meine gedankengänge

    Also meine überlegung wäre da mit if und else ne schleife zu basteln,

    so nach dem motto

    Mouseover = scrollvariable 10
    dann scrolldown aktion
    wenn scrollvariable>=2
    scrollvariable +1 und wiederholen 8)
    wenn allerdings scrollvariable=1
    einfach raus ausm Script und weiter mim alltag


    so scrollvariable wird nun immer größer und ich scrolle immer weiter :wink:

    Nun

    Mouseout = scrollvariable1

    und schon hört sichs nach dem mouseout mit dem scrollen auf.

    Konnte das ganze nur noch nich soo umsetzen da mir das wissen dazu noch fehlt. Will nur wissen ob das so gehen könnte, oder ob ich da nur noch nen denkfehler drinnen hab.

    Würd mich freuen.

    Mfg

    Heavy der nicht grad den Java durchblick hat. :D

  • das macht man denn so:

    Code
    function scroll_down( width )
    {
     window.frames['i-frame'].scrollBy(0, -width);
     set_timeout('scroll_down( ' + width + ' )', 1000);
    }

    anstat das du mit dme link scrollst, rufst du nun einfach die funktion auf
    <a onMouseOver="javascript:scroll_down(10);">down</a>

  • och menno schon wieder die lösung :D

    also habs Probiert. Scrollen funzt so wie vorher. also noch net die komplette Lösung. :D

    habs dann mal kurzzeitig von set_timeout umgestellt auf setTimeout. Nu geht das schon ma :D Scrollen wie von geisterhand. nu noch mit mouseout das scrollen aufhören lassen... aber das müsst ich ja mit clearTimeout hin bekommen :D.

    Big thx großmeister GreenRover :D

  • Also es funzt jetz einwandfrei so wie ichs mir vorgestellt hatte :D. Beim drüber gehen scrollts und beim runter gehen hörts auf :D.

    Nochmal danke Rover, hast mich dem java verständniss schon um einiges näher gebracht 8)

    Mfg

    Heavy

  • kk. kein problem...

    aber lass mal.. ich bin mit der sprache auch noch nciht so doll.

    z.B. am WYSWYG Editor kommen mir imemr noch ein paar dinge komisch vor :-p

    Aber java ist auch wirklick kompliziert von syntax her.

  • soo sorry dass ich den thread wieder hoch krempel, aber ich hab nu wieder ein Problem :? . Bekomm das auch nich irgendwie gebacken.

    Also Das scrollen geht ansich wunderbar bei meinen eigenen seiten, aber jetz hab ich das guestbook eingebunden, und das kann nicht mit den buttons gescrollt werden. Aber warumm?? Durch meine buttons werden doch eigentlich alle inhalte im i-Frame gescrollt.
    Soll ich n anderes guestbook ma probieren???