Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag14.09.2007 um 19:28 (UTC)    
Titel: CSS / JavaScript: Zwischen Designs mit Mausklick wechseln

POSTED IM AUFTRAG VON CHRISTOPH K., ABOUT-PC.DE(.TL)
FRAGEN UND CO AN IHN


Du willst deinen Usern 2 Designs bieten ?
Sie sollen selbst entscheiden und wechseln können ?
Dann nutze den about-pc.de-CSS-Design-Changer.

Kurze Erklärung:
Alles muss bei Text über dem Design eingefügt werden.

Designcodes angeben

Zitat:

<script type="text/javascript">
<!--
var design1 = 'DESIGN1';
var design2 = 'DESIGN2';
-->
</script>


DESIGN1 und DESIGN2 stehen für die 2 verschiedenen CSS Codes der Designs.
Diese Codes müssen in einer Zeile stehn, dass heißt:

Zitat:

<style type="text/css">
body {
background-color:red;
}
</style>


ist falsch.

Richtig:

Zitat:
<style type="text/css">body {background-color:red;}</style>


Auch die <!-- und --> müssen weggelassen werden.


Hier gibt es ein kleines Tool, dass euch diese Arbeit abnimmt:
http://www.about-pc.de/js/cssdesignchanger.php


Das Script einbinden

Zitat:
<script type="text/javascript" src="http://www.about-pc.de/js/cssdesignchanger.js"></script>


Einfach so einfügen, verlinkt auch meine Seite, aufs Script.

Startdesign angeben

Zitat:

<div id="design">
DESIGN1
</div>


Hier wieder den ersten CSS Code (von oben) einfügen.

Ausführcode angeben

Zitat:
<a href="#" onclick="wechsel()">klick</a>


Dieser Code ist optional.
Es ist ein Link, der beim Klicken das Script aktiviert.

Wenn ihr den rot markierten Teil in ein Bild oder etwas anderes verschiebt, klappt das auch Wink

Fertiges Scriptbeispiel

Der fertige Code kann z.B. so aussehen:
Zitat:

<script type="text/javascript">
<!--
var design1 = '<style type="text/css"> /*DESIGN BY PALM.DE.TL*/ /*HINWEIS NICHT ENTFERNEN!*/td.nav{height:30px;background-image:url(http://palm.pytalhost.de/Designs/white_stripes/button1.png);} td.nav:hover{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/button2.png);} td.nav_heading{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png); width:185px;height:38px;} td#nav_Hauptseiten{height: 20px;visibility: hidden;} td#nav_lcke{height: 20px;visibility: hidden;} td#nav_lol{height: 20px;visibility: hidden;} td#nav_lol2{height: 20px;visibility: hidden;} td#nav_lol3{height: 20px;visibility: hidden;} td.nav a{color: #000000 !important;text-decoration: none;font-size: 11px;} td.nav a:hover{color: #000000;text-decoration: underline;font-size: 11px;} td.nav a:visited{color: #000000;font-size: 11px;font-weight: bold;} td.edit_below_nav {visibility:hidden;} td.edit_navi_headbg{background-image:url();background-color:transparent;} td.headline{visibility:hidden;} td.edit_content_top{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);} td.edit_content_bottom2{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);} td.edit_content_bottom{background-image:url();background-color:transparent;} td.edit_content{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/bg_site.png);} td.sidebar_heading{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);width:168px;height:38px;} td.edit_rb_footer {visibility:hidden;} td.edit_rechts_sbg{visibility:hidden;} td.edit_rechts_cbg{background-image:url();background-color:transparent;} td.edit_rechts_bottom{background-image:url();background-color:transparent;} body{background-color:#FFFFFF;} table.edit_main_table{width: 100% !important;} td.edit_main_tr{width: 100% !important;} table.edit_second_table{width: 100% !important;} td.edit_header_full{width: 100% !important;background-position:center;background-repeat:no-repeat; } td.edit_header_full table{width: 100% !important;} table.edit_third_table{width: 100% !important;} td.edit_navi_headbg{width: 15% !important;} table.edit_rechts_tabelle{width: 100% !important;} td.edit_rechts_bottom{width: 15% !important;} td.edit_rechts_cbg{width:100%;} /* LINKS */ a { color: #383838; text-decoration: none; font-size:11px; font-weight: bold;} a:hover { color: #262626; text-decoration: underline; font-size:11px font-weight: bold;} </style>';
var design2 = '<style type="text/css"> /* DESIGN BY PALM.DE.TL! */ /* HINWEIS NICHT ENTFERNEN */ td.nav{background-image:url(http://palm.pytalhost.de/Designs/waterblue/button1.jpg);} td.nav:hover{background-image:url(http://palm.pytalhost.de/Designs/waterblue/button2.jpg);} td.nav_heading{background-image:url(http://palm.pytalhost.de/Designs/waterblue/top.jpg); width:185px;height:38px;} tr.checked_menu td{background-image:url(http://palm.pytalhost.de/Designs/waterblue/buttonc1.jpg);} tr.checked_menu td:hover{background-image:url(http://palm.pytalhost.de/Designs/waterblue/buttonc2.jpg);} td.edit_below_nav {visibility:hidden;} td.edit_navi_headbg{background-image:url();background-color:transparent;} td.headline{visibility:hidden;} td.edit_content_top{background-image:url(http://palm.pytalhost.de/Designs/waterblue/top.jpg);} td.edit_content_bottom2{background-image:url(http://palm.pytalhost.de/Designs/waterblue/top.jpg);} td.edit_content_bottom{background-image:url();background-color:transparent;} td.edit_content{background-image:url(http://palm.pytalhost.de/Designs/waterblue/bg_inhalt.jpg);} td.sidebar_heading{background-image:url(http://palm.pytalhost.de/Designs/waterblue/top.jpg);width:168px;height:38px;} td.edit_rb_footer {visibility:hidden;} td.edit_rechts_sbg{visibility:hidden;} td.edit_rechts_cbg{background-image:url();background-color:transparent;} td.edit_rechts_bottom{background-image:url();background-color:transparent;} body{background-image:url(http://palm.pytalhost.de/Designs/waterblue/bg_design.jpg);background-attachment:fixed;} td.shouty{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} td.shouty2{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} td.shouty3{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} td.shouty4{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} td.shouty5{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} a { color: #FF7F00; text-decoration: none; font-size:11px} a:hover { color: #171717; text-decoration: underline; font-size:11px} </style> ';
-->
</script>
<script type="text/javascript" src="http://www.about-pc.de/js/cssdesignchanger.js"></script>
<div id="design">
<style type="text/css">
/*DESIGN BY PALM.DE.TL*/ /*HINWEIS NICHT ENTFERNEN!*/
td.nav{height:30px;background-image:url(http://palm.pytalhost.de/Designs/white_stripes/button1.png);} td.nav:hover{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/button2.png);} td.nav_heading{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png); width:185px;height:38px;} td#nav_Hauptseiten{height: 20px;visibility: hidden;} td#nav_lcke{height: 20px;visibility: hidden;} td#nav_lol{height: 20px;visibility: hidden;} td#nav_lol2{height: 20px;visibility: hidden;} td#nav_lol3{height: 20px;visibility: hidden;} td.nav a{color: #000000 !important;text-decoration: none;font-size: 11px;} td.nav a:hover{color: #000000;text-decoration: underline;font-size: 11px;} td.nav a:visited{color: #000000;font-size: 11px;font-weight: bold;} td.edit_below_nav {visibility:hidden;} td.edit_navi_headbg{background-image:url();background-color:transparent;} td.headline{visibility:hidden;} td.edit_content_top{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);} td.edit_content_bottom2{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);} td.edit_content_bottom{background-image:url();background-color:transparent;} td.edit_content{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/bg_site.png);} td.sidebar_heading{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);width:168px;height:38px;} td.edit_rb_footer {visibility:hidden;} td.edit_rechts_sbg{visibility:hidden;} td.edit_rechts_cbg{background-image:url();background-color:transparent;} td.edit_rechts_bottom{background-image:url();background-color:transparent;} body{background-color:#FFFFFF;} table.edit_main_table{width: 100% !important;} td.edit_main_tr{width: 100% !important;} table.edit_second_table{width: 100% !important;} td.edit_header_full{width: 100% !important;background-position:center;background-repeat:no-repeat; } td.edit_header_full table{width: 100% !important;} table.edit_third_table{width: 100% !important;} td.edit_navi_headbg{width: 15% !important;} table.edit_rechts_tabelle{width: 100% !important;} td.edit_rechts_bottom{width: 15% !important;} td.edit_rechts_cbg{width:100%;} a { color: #383838; text-decoration: none; font-size:11px; font-weight: bold;} a:hover { color: #262626; text-decoration: underline; font-size:11px font-weight: bold;} </style>

</div>
<a href="#" onclick="wechsel()">klick</a>


Beispielseite

Zu bestaunen unter:
http://about-pc-tests.de.tl/CSS-Design-Changer.htm

Kommentar:

So, meine erste Großbeschreibung.
Hoffe, es hilft euch.
Meinung, Bitten, Fragen, egal was, an mich Very Happy

MfG
Christoph

POSTED IM AUFTRAG VON CHRISTOPH K., ABOUT-PC.DE(.TL)
FRAGEN UND CO AN IHN

______________
LG André

GMMTS.de


Zuletzt bearbeitet von andybabe27 am 06.03.2010, 15:00, insgesamt 4-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de