onLoad in plaats van onClick , is dit mogelijk?

Status
Niet open voor verdere reacties.

satdirk

Gebruiker
Lid geworden
26 feb 2007
Berichten
32
Ik zou graag een afbeelding boven de startpagina zetten , met deze code lukt het via een knop en een onClick maar
het zou moeten werken als de pagina word geladen dus met onLoad maar het het lukt mij niet en weet ook niet of dit wel kan.

code in body

<STYLE type="text/css">
.OKknop {
background-color: #FFFF00;
border-color: #996600;
border-style: outset;
border-width: 2px;
font-color: #996600;
font-size: 9pt;
font-family: arial;
width: 70px;
height: 20px;
}
.alertTitel {
background-color: #996600;
font-family: arial;
font-size: 9pt;
color: #FFFFFF;
font-weight: bold;
}
.alertBericht {
font-family: arial;
font-size: 9pt;
color: #000000;
font-weight: normal;
}
.alertVenster {
cursor: default;
filter: alpha(opacity=98);
background-color: #FFCC00;
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 50px;
visibility:hidden; z-index: 999;
border-style: outset;
border-width: 1px;
border-color: #996600;
text-align: center;
}
</STYLE>

<div id="alertLayer" class=alertVenster></div>

<script type="text/javascript">
function BrowserCheck() {
var b = navigator.appName;
if (b == "Netscape") this.b = "NS";
else if (b == "Microsoft Internet Explorer") this.b = "IE";
else this.b = b;
this.v = parseInt(navigator.appVersion);
this.NS = (this.b == "NS" && this.v>=4);
this.NS4 = (this.b == "NS" && this.v == 4);
this.NS5 = (this.b == "NS" && this.v == 5);
this.IE = (this.b == "IE" && this.v>=4);
this.IE4 = (navigator.userAgent.indexOf('MSIE 4')>0);
this.IE5 = (navigator.userAgent.indexOf('MSIE 5')>0);
if (this.IE5 || this.NS5) this.VER5 = true;
if (this.IE4 || this.NS4) this.VER4 = true;
this.OLD = (! this.VER5 && ! this.VER4) ? true : false;
this.min = (this.NS||this.IE);
}
is = new BrowserCheck();
alertBox = (is.VER5) ? document.getElementById("alertLayer").style
: (is.NS) ? document.layers["alertLayer"]
: document.all["alertLayer"].style;

function verbergAlert(){
alertBox.visibility = "hidden";}

<!-- In dit gedeelte kun je de afbeelding aanpassen: <img src=...> -->
function maakAlert(aTitle,aMessage,bMessage){
document.all.alertLayer.innerHTML = "<table border=0 width=100% height=100%>" +
"<tr height=5><td colspan=4 class=alertTitel>" + " " + aTitle + "</td></tr>" +
"<tr height=5><td width=5></td></tr>" +
"<tr><td width=5></td><td width=20 align=left><img src='gifsindex/dagvandehond.gif'></td><td align=left class=alertBericht>" + aMessage + "<BR>" + bMessage +"</td><td width=5></td></tr>" +
"<tr height=5><td width=5></td></tr>" +
"<tr><td width=5></td><td colspan=2 align=center><input type=button value='OK' onClick='verbergAlert()' class=OKknop><BR></td><td width=5></td></tr>" +
"<tr height=5><td width=5></td></tr></table>";
thisText = aMessage.length;
if (aTitle.length > aMessage.length){ thisText = aTitle.length; }

aWidth = (thisText * 5) + 80;
aHeight = 100;
if (aWidth < 150){ aWidth = 200; }
if (aWidth > 350){ aWidth = 350; }
if (thisText > 60){ aHeight = 110; }
if (thisText > 120){ aHeight = 130; }
if (thisText > 180){ aHeight = 150; }
if (thisText > 240){ aHeight = 170; }
if (thisText > 300){ aHeight = 190; }
if (thisText > 360){ aHeight = 210; }
if (thisText > 420){ aHeight = 230; }
if (thisText > 490){ aHeight = 250; }
if (thisText > 550){ aHeight = 270; }
if (thisText > 610){ aHeight = 290; }

alertBox.width = aWidth;
alertBox.height = aHeight;
alertBox.left = (document.body.clientWidth - aWidth)/2;
alertBox.top = (document.body.clientHeight - aHeight)/2;
alertBox.visibility = "visible";
}
</script>
<center>
<INPUT TYPE=button value="Klik hier voor een voorbeeld." onClick="maakAlert('Hier komt de titel van jouw alert-venster','Hier schrijf je jouw bericht.','De kleuren en de afbeelding kies je zelf.');">
</center>
 
Zet je code eerst eens tussen code tags en gebruik de inspring methode zodat één en ander wat duidelijker wordt, hier is niet door te komen. Ga ik ook niet proberen.
 
TIP:
CTRL+C -> jsbeautifier.org -> CTRL+V -> CTRL+Enter -> CTRL+A -> CTRL+ C -> hier CTRL+V binnen code tags.
(oftewel de code kopiëren in JavaScript Beautifier en de mooie versie hier heen kopiëren binnen code tags voor leesbaarheid)
Code:
<STYLE type="text/css">
    .OKknop {
        background-color: #FFFF00;
        border-color: #996600;
        border-style: outset;
        border-width: 2px;
        font-color: #996600;
        font-size: 9pt;
        font-family: arial;
        width: 70px;
        height: 20px;
    }
    .alertTitel {
        background-color: #996600;
        font-family: arial;
        font-size: 9pt;
        color: #FFFFFF;
        font-weight: bold;
    }
    .alertBericht {
        font-family: arial;
        font-size: 9pt;
        color: #000000;
        font-weight: normal;
    }
    .alertVenster {
        cursor: default;
        filter: alpha(opacity=98);
        background-color: #FFCC00;
        position: absolute;
        top: 200px;
        left: 200px;
        width: 100px;
        height: 50px;
        visibility: hidden;
        z-index: 999;
        border-style: outset;
        border-width: 1px;
        border-color: #996600;
        text-align: center;
    }
</STYLE>

<div id="alertLayer" class=alertVenster></div>

<script type="text/javascript">
    function BrowserCheck() {
        var b = navigator.appName;
        if (b == "Netscape") this.b = "NS";
        else if (b == "Microsoft Internet Explorer") this.b = "IE";
        else this.b = b;
        this.v = parseInt(navigator.appVersion);
        this.NS = (this.b == "NS" && this.v >= 4);
        this.NS4 = (this.b == "NS" && this.v == 4);
        this.NS5 = (this.b == "NS" && this.v == 5);
        this.IE = (this.b == "IE" && this.v >= 4);
        this.IE4 = (navigator.userAgent.indexOf('MSIE 4') > 0);
        this.IE5 = (navigator.userAgent.indexOf('MSIE 5') > 0);
        if (this.IE5 || this.NS5) this.VER5 = true;
        if (this.IE4 || this.NS4) this.VER4 = true;
        this.OLD = (!this.VER5 && !this.VER4) ? true : false;
        this.min = (this.NS || this.IE);
    }
    is = new BrowserCheck();
    alertBox = (is.VER5) ? document.getElementById("alertLayer").style : (is.NS) ? document.layers["alertLayer"] : document.all["alertLayer"].style;

    function verbergAlert() {
        alertBox.visibility = "hidden";
    }

    <!-- In dit gedeelte kun je de afbeelding aanpassen: <img src=...> -->
    function maakAlert(aTitle, aMessage, bMessage) {
        document.all.alertLayer.innerHTML = "<table border=0 width=100% height=100%>" +
            "<tr height=5><td colspan=4 class=alertTitel>" + " " + aTitle + "</td></tr>" +
            "<tr height=5><td width=5></td></tr>" +
            "<tr><td width=5></td><td width=20 align=left><img src='gifsindex/dagvandehond.gif'></td><td align=left class=alertBericht>" + aMessage + "<BR>" + bMessage + "</td><td width=5></td></tr>" +
            "<tr height=5><td width=5></td></tr>" +
            "<tr><td width=5></td><td colspan=2 align=center><input type=button value='OK' onClick='verbergAlert()' class=OKknop><BR></td><td width=5></td></tr>" +
            "<tr height=5><td width=5></td></tr></table>";
        thisText = aMessage.length;
        if (aTitle.length > aMessage.length) {
            thisText = aTitle.length;
        }

        aWidth = (thisText * 5) + 80;
        aHeight = 100;
        if (aWidth < 150) {
            aWidth = 200;
        }
        if (aWidth > 350) {
            aWidth = 350;
        }
        if (thisText > 60) {
            aHeight = 110;
        }
        if (thisText > 120) {
            aHeight = 130;
        }
        if (thisText > 180) {
            aHeight = 150;
        }
        if (thisText > 240) {
            aHeight = 170;
        }
        if (thisText > 300) {
            aHeight = 190;
        }
        if (thisText > 360) {
            aHeight = 210;
        }
        if (thisText > 420) {
            aHeight = 230;
        }
        if (thisText > 490) {
            aHeight = 250;
        }
        if (thisText > 550) {
            aHeight = 270;
        }
        if (thisText > 610) {
            aHeight = 290;
        }

        alertBox.width = aWidth;
        alertBox.height = aHeight;
        alertBox.left = (document.body.clientWidth - aWidth) / 2;
        alertBox.top = (document.body.clientHeight - aHeight) / 2;
        alertBox.visibility = "visible";
    }
</script>
<center>
    <INPUT TYPE=button value="Klik hier voor een voorbeeld." onClick="maakAlert('Hier komt de titel van jouw alert-venster','Hier schrijf je jouw bericht.','De kleuren en de afbeelding kies je zelf.');">
</center>

Scripts en styles horen eigenlijk in de <head> van de pagina te staan.
Verder kun je onLoad aan je <body> tag hangen
Dit ziet er dan als volgt uit:
Code:
<body onLoad="maakAlert('Hier komt de titel van jouw alert-venster','Hier schrijf je jouw bericht.','De kleuren en de afbeelding kies je zelf.');">
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan