metanohi-misc-subsites/old-projects/pedro/index.htm

313 lines
7.5 KiB
HTML
Raw Permalink Normal View History

2011-08-02 19:57:57 +02:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="da">
<head>
<title>Katten Pedro og de tre danskere</title>
<style type='text/css'>
* {
margin:0;
padding:0;
border:0;
}
body {
background-color:#fff;
color:#fff;
font-family:'trebuchet ms',trebuchet,arial;
font-size:16px;
}
#wrapper {
width:950px;
margin:0 auto;
padding:285px 0 0 0;
position:relative;
background:#000 url('img/header.jpg') no-repeat top right;
}
#text {
position:absolute;
top:35px;
left:50px;
width:320px;
padding:10px;
font-size:30px;
border:2px dashed #fff;
}
#help {
position:absolute;
top:236px;
left:6px;
font-size:13px;
}
#nav {
position:absolute;
top:254px;
left:0;
width:100%;
padding-left:6px;
border-top:1px dotted #fff;
}
#nav div {
height:30px;
background:url('img/button.png') repeat-x;
margin-right:3px;
padding:3px 5px;
float:left;
color:#444;
font-weight:bold;
cursor:pointer;
}
#nav div:hover,#nav div.over {
background:url('img/buttonh.png') repeat-x;
color:#444;
}
#nav div.c {
background:url('img/buttonc.png') repeat-x;
color:#999;
font-weight:bold;
cursor:default;
}
#strips, #drawings {
padding:0 5px 10px 5px;
border-top:1px dotted #fff;
}
#drawings {
display:none;
}
p {
font:20px 'trebuchet ms';
}
h1 {
font-weight:normal;
font-size:40px;
text-align:center;
text-decoration:underline;
}
img {
width:100%;
}
#limgd {
position:absolute;
top:0;
bottom:16px;
left:0;
padding:4px 0 0 4px;
display:none;
}
#limg {
padding:0 4px 0 0;
}
#totop {
width:945px;
text-align:right;
background-color:#000;
padding:0 5px 5px 0;
color:#00ffff;
text-decoration:underline;
cursor:pointer;
}
#totop:hover,#totop.over {
color:#fff;
}
#license {
font-size:18px;
padding: 3px;
}
</style>
<script type='text/javascript'>
function csize(n,alt) {
b=document.body
w=document.getElementById("wrapper")
l=document.getElementById("limgd")
t=document.getElementById("limgt")
i=document.getElementById("limg")
if (n>0) {
st=document.documentElement.scrollTop
theimg=new Image()
theimg.src="img/"+n+".jpg"
theimg.onload=function() {
b.style.backgroundColor="#000"
w.style.display="none"
t.innerHTML=alt+":"
i.style.width=theimg.width+"px"
i.src="img/"+n+".jpg"
i.alt=alt
l.style.display="block"
totop()
}
}
else {
b.style.backgroundColor="#fff"
l.style.display="none"
w.style.display="block"
window.scrollBy(0,st-document.documentElement.scrollTop)
}
}
function cw(num) {
stri=document.getElementById("strips")
draw=document.getElementById("drawings")
navi=document.getElementById("nav")
c=0
for (i=0;i<navi.childNodes.length;i++) {
node=navi.childNodes[i]
if (node.nodeName=="DIV") {
if (c==num) {
node.className="c"
if (node.innerHTML=="Striber") {
draw.style.display="none"
stri.style.display="block"
}
else if (node.innerHTML=="Tegninger") {
stri.style.display="none"
draw.style.display="block"
}
}
else
node.className=""
c=c+1
}
}
}
function overout(num,tf) {
if (navigator.appVersion.indexOf("MSIE 6")!=-1) {
navi=document.getElementById("nav")
c=0
for (i=0;i<navi.childNodes.length;i++) {
node=navi.childNodes[i]
if (node.nodeName=="DIV") {
if (c==num && node.className!="c") {
if (tf)
node.className="over"
else
node.className=""
}
c=c+1
}
}
}
}
function too(wtd) {
if (navigator.appVersion.indexOf("MSIE 6")!=-1) {
tt=document.getElementById("totop")
if (wtd==1)
tt.className="over"
else
tt.className=""
}
}
function totop() {
window.scrollBy(0,-100000)
}
window.onload=function () {
lhimg=new Image()
lhimg.src="img/buttonh.png"
}
</script>
</head>
<body>
<div id='limgd' onclick='csize(0)'>
<p id='limgt'></p>
<img src='' alt='' id='limg' title='Klik for at formindske' />
</div>
<div id='wrapper'>
<div id='text'>En tegneserie tegnet over 8 dage i Mallorca.<br /><br />Af Niels Serup</div>
<div id='help'>Klik p<> billederne for at forst<73>rre dem. Klik p<> dem igen for at formindske dem.</div>
<div id='nav'>
<div onclick='cw(0)' class='c' onmouseover='overout(0,true)' onmouseout='overout(0,false)'>Striber</div>
<div onclick='cw(1)' onmouseover='overout(1,true)' onmouseout='overout(1,false)'>Tegninger</div>
</div>
<div id='strips'>
<h1>Striber</h1>
<p>Mandag:</p>
<img src='img/1.jpg' alt='Mandag' onclick='csize(1,this.alt)' title='Klik for at forst<73>rre' />
Gl<EFBFBD>d jer til i morgen, hvor Pedro vil smage ost!<br /><br />
<p>Tirsdag:</p>
<img src='img/2.jpg' alt='Tirsdag' onclick='csize(2,this.alt)' title='Klik for at forst<73>rre' />
I morgen vil Pedro fors<72>ge stangspring!<br /><br />
<p>Onsdag:</p>
<img src='img/3.jpg' alt='Onsdag' onclick='csize(3,this.alt)' title='Klik for at forst<73>rre' />
Gl<EFBFBD>d jer til i morgen, hvor Pedro bliver fanget af en ufos fangarme...<br /><br />
<p>Torsdag:</p>
<img src='img/4.jpg' alt='Torsdag' onclick='csize(4,this.alt)' title='Klik for at forst<73>rre' />
I morgen f<>r Pedro pludselig lyst til kage, men glimskianere spiser ikke kage. Se, hvad Pedro g<>r for at f<> fat i kage!<br /><br />
<p>Fredag:</p>
<img src='img/5.jpg' alt='Fredag' onclick='csize(5,this.alt)' title='Klik for at forst<73>rre' />
I morgen vil verden overv<72>re intet mindre end en sensation! Pedro vil g<>re en god gerning!<br /><br />
<p>L<EFBFBD>rdag:</p>
<img src='img/6.jpg' alt='L<>rdag' onclick='csize(6,this.alt)' title='Klik for at forst<73>rre' />
<EFBFBD>h nej! D<>r Pedro? Eller d<>r han ikke? Eller d<>r han m<>ske? Se med i morgen og se den sp<73>ndende forts<74>ttelse...<br /><br />
<p>S<EFBFBD>ndag:</p>
<img src='img/7.jpg' alt='S<>ndag' onclick='csize(7,this.alt)' title='Klik for at forst<73>rre' />
Overlever Pedro? Se med i det endelige afsnit i morgen!<br /><br />
<p>Mandag:</p>
<img src='img/8.jpg' alt='Mandag' onclick='csize(8,this.alt)' title='Klik for at forst<73>rre' />
SLUT!
</div>
<div id='drawings'>
<h1>Tegninger</h1>
<p>Pedro i Mexico:</p>
<img src='img/9.jpg' alt='Pedro i Mexico' onclick='csize(9,this.alt)' title='Klik for at forst<73>rre' />
I skal ikke <20>nske at m<>de Pedro i Mexico...<br /><br />
<p>Pedros sk<73>bne:</p>
<img src='img/10.jpg' alt='Pedros sk<73>bne' onclick='csize(10,this.alt)' title='Klik for at forst<73>rre' />
Det fortjente han.<br /><br />
<p>Pedro kidnappet!</p>
<img src='img/11.jpg' alt='Pedro kidnappet!' onclick='csize(11,this.alt)' title='Klik for at forst<73>rre' />
N<EFBFBD>r Pedro <20>der for mange sild, falder han i s<>vn og bliver kidnappet (af en eller anden grund).<br /><br />
<p>"Goddag, goddag"</p>
<img src='img/12.jpg' alt='"Goddag, goddag"' onclick='csize(12,this.alt)' title='Klik for at forst<73>rre' />
Pedro pr<70>ver p<> at v<>re h<>flig...med en knytn<74>ve.<br /><br />
<p>Bazooka-Pedro</p>
<img src='img/13.jpg' alt='Bazooka-Pedro' onclick='csize(13,this.alt)' title='Klik for at forst<73>rre' />
Bazookaen er en af Pedros bedste v<>ben, selv om han siger, at den er for svag.
</div>
<div id='totop' onclick='totop()' onmouseover='too(1)' onmouseout='too(0)'>^ Til toppen ^</diV>
<p id='license'>Alt tekst og alle billeder er licenseret under Creative Commons Attribution-ShareAlike (CC-BY-SA). Dette betyder, at du er fri til at <20>ndre og/eller distribuere alting, s<> l<>nge du minder folk om, at Niels Serup er den oprindelige ophavsmand, og at du ikke distribuerer det p<> en m<>de, hvorp<72> folks friheder bliver kompromitteret (dvs. at du ogs<67> skal licensere det under CC-BY-SA eller en lignende licens).</p>
</div>
</body>
</html>