internet‎ > ‎develop‎ > ‎JavaScript‎ > ‎

Diashow von Internetseiten

2012-04-26

Publiziert in PCNEWS-126, Seite 30 unter dem Titel "Virtuelle Diashow"

/projects/diashow/diashowConfig.js

var pages = new Array(
    "ClubComputer-Homepage",
    "Mailenable - Webzugang zur Mailbox",
    "Helm - Verwaltung der Webressourcen",
    "PCNEWS-Homepage",
    "http://pcnews.at",
    "Kode der Datei Diashow.htm",
    "@Diashow.htm.txt",
    "Kode der Datei DiashowConfig.htm",
    "@DiashowConfig.htm.txt",
    "Kode der Datei Diashow.js",
    "@Diashow.js.txt",
    "Kode der Datei DiashowSeiten.htm",
    "@DiashowSeiten.htm.txt"
)
var WindowWidth = 800;
var WindowHeight = 600;
var WindowAuto = false;
var Autostart = true;

/projects/diashow/diashow.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title>Virtuelle Diashow</title>
    <style type="text/css">
    <!--
        body
        {
            font-family: Tahoma;
            background-color: #DDDDDD;
        }
    -->
    </style>
    <script type="text/javascript" language="javascript" src="DiashowConfig.js"></script>
    <script type="text/javascript" language="javascript" src="Diashow.js"></script>
</head>
<body onload="ConfigureDocument()">
    <form name="console">
    <table width="100%" height="100%">
        <tr>
            <td align="center" valign="middle" width="64">
                <img alt="Logo" width="64" src="logo.gif" />
            </td>
            <td>
                <span style="color:maroon ; font-family: Tahoma; font-weight: bold; font-size: xx-large;"
                    id="PageTitle" name="PageTitle"></span>
            </td>
        </tr>
        <tr height="100%">
            <td valign="top" height="100%">
                <table width="100%">
                    <tr>
                        <td width="100">
                            <a id="Text_Liste" name="Text_Liste" href="javascript:Liste()">Liste</a>
                            <a id="Text_startstop" name="Text_startstop" href="javascript:startstop();">start</a>
                            <select id="timeselect" name="timeselect" onchange="changetime(this.options[this.selectedIndex].value)">
                                <option value="3000">3</option>
                                <option value="4000">4</option>
                                <option value="5000" selected="selected">5</option>
                                <option value="6000">6</option>
                                <option value="7000">7</option>
                                <option value="8000">8</option>
                                <option value="9000">9</option>
                            </select>
                            <a id="Random" name="Random" href="javascript:changemode();"></a>
                             
                            <a id="Next" href="javascript:ShowPrevious();">
                                &lt;&lt;</a>
                            <a id="Prev" href="javascript:ShowNext();">
                                &gt;&gt;</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span id="Navigation" name="Navigation"></span>
                        </td>
                    </tr>
                </table>
                <img alt="Museum" width="64" src="diashow.gif" />
            </td>
            <td valign="top" height="100%">
                <span id="Error" name="Error" style="color:red"></span>
                <iframe id="Daten" name="Daten" width="100%" height="1000" frameborder="0" marginheight="0"
                    marginwidth="0" scrolling="auto"></iframe>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

/projects/diashow/diashow.js

var iPage = 0;
var mode = 0; // 0: Diashow 1: vor/zurück
var lPages = pages.length / 2;
var timerID = null;
var timerRunning = false;
var random = false;
 
function stopclock() {
    if (timerRunning) {
        document.getElementById("Text_startstop").innerHTML = 'start'
        clearInterval(timerID)
        timerRunning = false;
    }
}
function startclock(time) {
    stopclock();
    document.getElementById("Text_startstop").innerHTML = 'stop'
    timerID = setInterval("ShowNext()", time);
    timerRunning = true;
}
function ShowNext() {
    if (random) {
        Index = Math.floor(Math.random() * lPages);
        SetPage(Index);
    }
    else {
        iPage++;
        if (iPage == lPages) iPage = 0;
        SetPage(iPage);
    }
}
function ShowPrevious() {
    if (random) {
        Index = Math.floor(Math.random() * lPages);
        SetPage(Index);
    }
    else {
        iPage--;
        if (iPage == -1) iPage = lPages-1;
        SetPage(iPage);
    }
}
function changemode() {
    stopclock();
    if (random) {
        random = false;
        document.getElementById("Random").innerHTML = 'chrono';
    } else {
        random = true;
        document.getElementById("Random").innerHTML = 'zufall';
    }
}
function SetPage(page) {
    // alert(page + " " + pages[page * 2] + " " + pages[page * 2 + 1] + " " + frames["Daten"].location);
    document.getElementById("PageTitle").innerHTML = pages[page * 2];
    // frames["Daten"].document.close();
    document.getElementById("Text_Liste").innerHTML = "";
    frames["Daten"].location.href = pages[page * 2 + 1];
}
function initialize() {
    document.getElementById("Navigation").innerHTML = "";
    for (i=0; i<lPages; i++)
    {
        document.getElementById("Navigation").innerHTML +=
            " <a href='javascript:top.SetPage(" + i + ")'>" + i + "</a>";
            // "<a target='Daten' href='" + pages[2*i+1] + "'>" + i + "</a> ";
    }
    SetPage(0);
    if (random) {
        document.getElementById("Random").innerHTML = 'chrono';
    }
    else {
        document.getElementById("Random").innerHTML = 'zufall';
    }
}
function startstop() {
    if (document.getElementById("Text_startstop").innerHTML == 'start') {
        document.getElementById("Text_startstop").innerHTML = 'stop';
        initialize();
        startclock(document.console.timeselect.options[document.console.timeselect.selectedIndex].value);
    }
    else {
        document.getElementById("Text_startstop").innerHTML = 'start';
        stopclock();
    }
}
function changetime(newtime) {
    if (timerRunning) {
        startclock(newtime);
    }
}
function Liste() {
    // frames["Daten"].location.href = "about:blank";
    // frames["Daten"].document.open();
    for (i = 0; i < lPages; i++) {
        var s = "<tt>";
        if (i < 10) s = "&nbsp;";
        s += i + "</tt>";
        s += "<span style='font-family:Tahoma'>";
        s += " <a href='javascript:top.SetPage(" + i + ")'>" + pages[2 * i] + "</a>";
        s += "";
        document.getElementById("Daten").style = "visibility:hidden";
        document.getElementById("Liste").innerHTML = s;
        // frames["Daten"].document.write(s);
    }
    // frames["Daten"].document.close();
}
function ConfigureDocument() {
    if (WindowAuto) {
        document.getElementById("Daten").width = screen.width - 150;
        document.getElementById("Daten").height = screen.height - 300;
    }
    else {
        document.getElementById("Daten").width = WindowWidth;
        document.getElementById("Daten").height = WindowHeight;
    }
    for (i=0; i<pages.length; i++){
        if (pages[i][0]=='@')
        pages[i] = window.location.href.replace(/Diashow.htm/g, pages[i].substr(1));
    }
    pages[pages.length] = "Liste der Diashow-Seiten";
    pages[pages.length] = window.location.href.replace(/Diashow.htm/g, "DiashowListe.htm");
    lPages = pages.length/2;
    initialize();
    if (Autostart) startstop();
}
Comments