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ø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ørre' />
|
|
Glæ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ørre' />
|
|
I morgen vil Pedro forsøge stangspring!<br /><br />
|
|
|
|
<p>Onsdag:</p>
|
|
<img src='img/3.jpg' alt='Onsdag' onclick='csize(3,this.alt)' title='Klik for at forstørre' />
|
|
Glæ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ø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ørre' />
|
|
I morgen vil verden overvære intet mindre end en sensation! Pedro vil gøre en god gerning!<br /><br />
|
|
|
|
<p>Lørdag:</p>
|
|
<img src='img/6.jpg' alt='Lørdag' onclick='csize(6,this.alt)' title='Klik for at forstørre' />
|
|
Åh nej! Dør Pedro? Eller dør han ikke? Eller dør han måske? Se med i morgen og se den spændende fortsættelse...<br /><br />
|
|
|
|
<p>Søndag:</p>
|
|
<img src='img/7.jpg' alt='Søndag' onclick='csize(7,this.alt)' title='Klik for at forstø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ø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ørre' />
|
|
I skal ikke ønske at møde Pedro i Mexico...<br /><br />
|
|
|
|
<p>Pedros skæbne:</p>
|
|
<img src='img/10.jpg' alt='Pedros skæbne' onclick='csize(10,this.alt)' title='Klik for at forstø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ørre' />
|
|
Når Pedro æ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ørre' />
|
|
Pedro prøver på at være høflig...med en knytnæ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ø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 æ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å folks friheder bliver kompromitteret (dvs. at du også skal licensere det under CC-BY-SA eller en lignende licens).</p>
|
|
</div>
|
|
</body>
|
|
</html> |