Pagepeel für die Piratenpartei

Hi,

ich habe mich mal im Zuge des Wahlkampfes an ein Pagepeel gemacht, das sowohl mit, als auch ohne Javascript funktioniert. Das Pagepeel verzichtet dabei völlig auf Flash.

Hier gibt es eine Demo des Pagepeels.

Bei deaktiviertem Javascript erscheint eine nicht animierte Variante.

Das Eselsohr wird nach 40 Sekunden (einstellbar) ausgeblendet. Wenn man das Eselsohr aufklappt, wird ein Cookie gesetzt. Sollte das Cookie beim nächsten Seitenaufruf vorhanden sein, wird das Pagepeel 5 Tage lang nicht mehr angezeigt.

Getestet mit:

Internet Explorer 6, XP SP2
Internet Explorer 7.0.5730, XP SP2
Internet Explorer 8.0.6, XP SP3
Firefox 3.0.13, XP SP2 mit Javascript
Firefox 3.0.13, XP SP2 ohne Javascript
Firefox 3.5.2, XP SP3 mit Javascript
Firefox 3.5.2, XP SP3 ohne Javascript
Firefox 3.5.2, Vista 64x
Opera 8.5, XP SP2
Opera 9.62, Vista
Opera 9.64, XP SP3
Google Chrome 2.0.1, XP SP3
Safari 3.2.1, XP SP2
Safari 4.0.3, Vista

Wer die Aktion unterstützen möchte, muss diesen Code in seine Seite packen und zwar vor </head>:
Code:

<style type="text/css"><!--
body{background-color:#CCCC99}
div#bg_div {visibility:hidden;position:absolute;top:0px;right:0px;text-align:right;}
div#ad_div {visibility:hidden;position:absolute;overflow:hidden;top:0px;right:0px;text-align:right}
div#ad_img {overflow:hidden;position:absolute;top:0px;right:0px;border:0px}
div#pp_div {position:absolute;top:0px;right:0px;text-align:right;z-index:5432;background-image:url(http://www.programmierer-forum.de/images/ppsmall.gif);background-repeat:no-repeat;background-position: right top}
div#pp_div a#pp_url:hover {position:absolute;top:0px;right:0px;z-index:4321;width:600px;height:600px;display:block;background-image:url(http://www.programmierer-forum.de/images/ppmain.gif);background-repeat:no-repeat;background-position:right top}
div#pp_div a#pp_url img#pp_img {width:109px;height:110px}
--></style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#pp_div a#pp_url:hover {right:-1px}
</style>
<![endif]>
<![endif]-->
<script type="text/javascript" src="http://www.programmierer-forum.de/js/pp104.js"></script>

Weiterhin muss dieser Code nach <body> eingebaut werden:
Code:

<div id="bg_div">
	<img id="bg_img" src="http://www.programmierer-forum.de/images/trans.gif" border="0">
</div>
<div id="ad_div">
	<img id="ad_img" src="http://www.programmierer-forum.de/images/ppmain.gif">
</div>
<div id="pp_div">
	<a href="http://www.ich-bin-pirat.de/" target="_blank" title="hier klicken..." id="pp_url"><img src="http://www.programmierer-forum.de/images/trans.gif" border="0" alt="hier klicken..." id="pp_img" onmouseover="open_peel()" onmouseout="minimize_peel()" /></a>
</div>
<script type="text/javascript"><!--
document.getElementById('pp_div').style.backgroundImage = 'url(http://www.programmierer-forum.de/images/trans.gif)';
document.getElementById('pp_url').style.backgroundImage = 'url(http://www.programmierer-forum.de/images/trans.gif)';
--></script>

Das wars dann schon.

Ich hoffe das Eselsohr gefällt.

Gruß