» Pagepeel für die Piratenpartei

mgutt · 25.09.2009, 16:06

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>:

<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:

<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ß

programmierer-forum.de · Gast

Mach mit!

Wenn Dir die Beiträge zum Thread "Pagepeel für die Piratenpartei" gefallen haben oder Du noch Fragen hast oder Ergänzungen machen möchtest, solltest Du Dich gleich bei uns anmelden:

Registrierte Mitglieder genießen die folgenden Vorteile:
✔ kostenlose Mitgliedschaft
✔ keine Werbung
✔ direkter Austausch mit Gleichgesinnten
✔ neue Fragen stellen oder Diskussionen starten
✔ schnelle Hilfe bei Problemen
✔ Bilder und Videos hochladen
✔ und vieles mehr...

Autor	Nachricht
mgutt Administrator Name: Marc Geschlecht: Anmeldedatum: 28.08.2004 Beiträge: 52420 Wohnort: Lohmar Meine eBay-Auktionen:	25.09.2009, 16:06 zitieren 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>: <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: <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ß Gefällt mir Teilen twittern
▲	pn email

programmierer-forum.de Gast	25.09.2009, 16:06 zitieren Mach mit! Wenn Dir die Beiträge zum Thread "Pagepeel für die Piratenpartei" gefallen haben oder Du noch Fragen hast oder Ergänzungen machen möchtest, solltest Du Dich gleich bei uns anmelden: Registrierte Mitglieder genießen die folgenden Vorteile: ✔ kostenlose Mitgliedschaft ✔ keine Werbung ✔ direkter Austausch mit Gleichgesinnten ✔ neue Fragen stellen oder Diskussionen starten ✔ schnelle Hilfe bei Problemen ✔ Bilder und Videos hochladen ✔ und vieles mehr...
▲