313 lines
7.5 KiB
HTML
313 lines
7.5 KiB
HTML
|
<!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>
|