»
EnglishFrenchVietnamese

Print - Omni-Directional Scrolling Window - JavaScriptBank.com

Full version: jsB@nk » Scrollers » Omni-Directional Scrolling Window
URL: http://www.javascriptbank.com/omni-directional-scrolling-window.html

Omni-Directional Scrolling Window © JavaScriptBank.comThe script makes content of frame which can move many directions when visitors move mouse over.

Full version: jsB@nk » Scrollers » Omni-Directional Scrolling Window
URL: http://www.javascriptbank.com/omni-directional-scrolling-window.html



JavaScript
<script type="text/javascript">      var xOffSet     = 5;      var yOffSet     = 5;      Font        = 'face="Arial, Verdana, Helvetica, sans-serif" size=2';      NN = (navigator.appName == "Netscape");      IE = (navigator.appName == "Microsoft Internet Explorer");      var object;      var over  = false;      var table;      function Create(WhichDir)      { switch(WhichDir)        { case 'North': if (IE)                        { document.writeln('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');                          document.writeln('North');                          document.writeln('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');                        }                        else if (NN)                        { document.writeln('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');                          document.writeln('North');                          document.writeln('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');                        }                        break;          case 'East' : if (IE)                        { document.writeln('<br /><br /><br />'); }                        else if (NN)                        { document.writeln('<br /><br />'); }                        document.writeln('&nbsp;E&nbsp;<br />');                        document.writeln('&nbsp;a&nbsp;<br />');                        document.writeln('&nbsp;s&nbsp;<br />');                        document.writeln('&nbsp;t&nbsp;<br />');                        document.writeln('<br /><br /><br />');                        break;          case 'South': if (IE)                        { document.writeln('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');                          document.writeln('South');                          document.writeln('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');                        }                        else if (NN)                        { document.writeln('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');                          document.writeln('South');                          document.writeln('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');                        }                        break;          case 'West' : if (IE)                        { document.writeln('<br /><br /><br />'); }                        else if (NN)                        { document.writeln('<br /><br />'); }                        document.writeln('&nbsp;W&nbsp;<br />');                        document.writeln('&nbsp;e&nbsp;<br />');                        document.writeln('&nbsp;s&nbsp;<br />');                        document.writeln('&nbsp;t&nbsp;<br />');                        document.writeln('<br /><br /><br />');                        break;        }      }      function Scroll(WhichDir)      { var TopNow  = 0;        var LeftNow = 0;        if (IE)        { I1 = document.all['ScrollFrame'];//          I2 = I1.contentWindow.document.body.innerHTML;//          I2 = I1.contentWindow.document.all['Inner'].innerHTML;          TopNow  = parseInt(I1.contentWindow.document.all['Inner'].style.top);          LeftNow = parseInt(I1.contentWindow.document.all['Inner'].style.left);        }        else if (NN)        { I1 = document.getElementById("ScrollFrame");//          I2 = I1.contentDocument.body.innerHTML;//          I2 = I1.contentDocument.getElementById("Inner").innerHTML;          TopNow  = parseInt(I1.contentDocument.getElementById("Inner").style.top);          LeftNow = parseInt(I1.contentDocument.getElementById("Inner").style.left);        }        switch(WhichDir)        { case 'North': TopNow  += yOffSet;                     break;          case 'NE'   : TopNow  += yOffSet; LeftNow += xOffSet; break;          case 'East' :                     LeftNow -= xOffSet; break;          case 'SE'   : TopNow  -= yOffSet; LeftNow -= xOffSet; break;          case 'South': TopNow  -= yOffSet;                     break;          case 'SW'   : TopNow  -= yOffSet; LeftNow += xOffSet; break;          case 'West' :                     LeftNow += xOffSet; break;          case 'NW'   : TopNow  += yOffSet; LeftNow -= xOffSet; break;        }        if (IE)        { I1.contentWindow.document.all['Inner'].style.top  = TopNow;          I1.contentWindow.document.all['Inner'].style.left = LeftNow;        }        else if (NN)        { I1.contentDocument.getElementById("Inner").style.top  = TopNow;          I1.contentDocument.getElementById("Inner").style.left = LeftNow;        }        STI = eval("setTimeout(\"Scroll('" + WhichDir + "')\", 100)");      }      function Switch(TheDiv, TheOver, TheWay)      { if (IE)        { the_div  = document.all[TheDiv];          the_over = document.all[TheOver];        }        else if (NN)        { the_div  = document.getElementById(TheDiv);          the_over = document.getElementById(TheOver);        }        if (TheWay == 'Over')        { the_div.style.visibility  = "hidden";          the_over.style.visibility = "visible";        }        else if (TheWay == 'Back')        { the_div.style.visibility  = "visible";          the_over.style.visibility = "hidden";        }      }    </script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<table cellspacing="0" cellpadding="0" width="366"> <!--border="yes">-->        <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically -->        <tbody><tr><td align="left" valign="top" width="28">              <div id="NWDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('NWDiv', 'NWOver', 'Over'); Scroll('NE');" onmouseout="Switch('NWDiv', 'NWOver', 'Back');">                NW&nbsp;              </div>              <div id="NWOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('NWDiv', 'NWOver', 'Over');" onmouseout="Switch('NWDiv', 'NWOver', 'Back'); clearTimeout(STI);">                NW&nbsp;              </div>            </td>            <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically -->            <td align="left" valign="top" width="310">              <div id="NorthDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('NorthDiv', 'NorthOver', 'Over'); Scroll('North');" onmouseout="Switch('NorthDiv', 'NorthOver', 'Back');">                <script type="text/javascript">Create('North');</script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; North&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;              </div>              <div id="NorthOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('NorthDiv', 'NorthOver', 'Over');" onmouseout="Switch('NorthDiv', 'NorthOver', 'Back'); clearTimeout(STI);">                <script type="text/javascript">Create('North');</script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; North&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;              </div>            </td>            <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically -->            <td align="left" valign="top" width="28">              <div id="NEDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('NEDiv', 'NEOver', 'Over'); Scroll('NW');" onmouseout="Switch('NEDiv', 'NEOver', 'Back');">                &nbsp;NE              </div>              <div id="NEOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('NEDiv', 'NEOver', 'Over');" onmouseout="Switch('NEDiv', 'NEOver', 'Back'); clearTimeout(STI);">                &nbsp;NE              </div>            </td>          </tr>        <!-- Follow each DIV row with a row of &NBSP; to properly separate rows and columns -->        <tr><td width="28">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>            <td width="310">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>            <td width="28">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>        </tr>        <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically -->        <tr><td align="left" valign="top" width="28">              <div id="WestDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('WestDiv', 'WestOver', 'Over'); Scroll('West');" onmouseout="Switch('WestDiv', 'WestOver', 'Back');">                <script type="text/javascript">Create('West');</script><br><br>&nbsp;W&nbsp;<br>&nbsp;e&nbsp;<br>&nbsp;s&nbsp;<br>&nbsp;t&nbsp;<br><br><br><br>              </div>              <div id="WestOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('WestDiv', 'WestOver', 'Over');" onmouseout="Switch('WestDiv', 'WestOver', 'Back'); clearTimeout(STI);">                <script type="text/javascript">Create('West');</script><br><br>&nbsp;W&nbsp;<br>&nbsp;e&nbsp;<br>&nbsp;s&nbsp;<br>&nbsp;t&nbsp;<br><br><br><br>              </div>            </td>            <!-- TD tag needs VALIGN="TOP" to properly align DIV vertically -->            <td width="310">              <iframe id="ScrollFrame" name="ScrollBox" src="IFrameSource.html" hspace="0" vspace="0" marginwidth="5" marginheight="5" scrolling="no">              </iframe>            </td>            <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically -->            <td align="left" valign="top" width="28">              <div id="EastDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('EastDiv', 'EastOver', 'Over'); Scroll('East');" onmouseout="Switch('EastDiv', 'EastOver', 'Back');">                <script type="text/javascript">Create('East');</script><br><br>&nbsp;E&nbsp;<br>&nbsp;a&nbsp;<br>&nbsp;s&nbsp;<br>&nbsp;t&nbsp;<br><br><br><br>              </div>              <div id="EastOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('EastDiv', 'EastOver', 'Over');" onmouseout="Switch('EastDiv', 'EastOver', 'Back'); clearTimeout(STI);">                <script type="text/javascript">Create('East');</script><br><br>&nbsp;E&nbsp;<br>&nbsp;a&nbsp;<br>&nbsp;s&nbsp;<br>&nbsp;t&nbsp;<br><br><br><br>              </div>            </td>          </tr>        <!-- Follow each DIV row with a row of &NBSP; to properly separate rows and columns --><!--        <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>        </tr>-->        <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically -->        <tr><td align="left" valign="top" width="28">              <div id="SWDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('SWDiv', 'SWOver', 'Over'); Scroll('SW');" onmouseout="Switch('SWDiv', 'SWOver', 'Back');">                SW&nbsp;              </div>              <div id="SWOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('SWDiv', 'SWOver', 'Over');" onmouseout="Switch('SWDiv', 'SWOver', 'Back'); clearTimeout(STI);">                SW&nbsp;              </div>            </td>            <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically -->            <td align="left" valign="top" width="310">              <div id="SouthDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('SouthDiv', 'SouthOver', 'Over'); Scroll('South');" onmouseout="Switch('SouthDiv', 'SouthOver', 'Back');">                <script type="text/javascript">Create('South');</script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; South&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;              </div>              <div id="SouthOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('SouthDiv', 'SouthOver', 'Over');" onmouseout="Switch('SouthDiv', 'SouthOver', 'Back'); clearTimeout(STI);">                <script type="text/javascript">Create('South');</script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; South&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;              </div>            </td>            <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically -->            <td align="left" valign="top" width="28">              <div id="SEDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('SEDiv', 'SEOver', 'Over'); Scroll('SE');" onmouseout="Switch('SEDiv', 'SEOver', 'Back');">                &nbsp;SE              </div>              <div id="SEOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('SEDiv', 'SEOver', 'Over');" onmouseout="Switch('SEDiv', 'SEOver', 'Back'); clearTimeout(STI);">                &nbsp;SE              </div>            </td>          </tr>        <!-- Follow each DIV row with a row of &NBSP; to properly separate rows and columns -->        <tr><td width="28">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>            <td width="310">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>            <td width="28">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>        </tr>      </tbody></table><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->