- *Summerdream

*Summerdream

SUMMERDREAM

-Creditlink stehen lassen!!
-Bevor du es nimmst sag bitte bescheid!!

1. Schritt: Melde dich bei Hpbk an und wähle das Css-Design
2. Schritt: Füge diese Codes entsprechend ein

Text über design:

var fadeimages=new Array()
//Arrayerzeugung
fadeimages[0]=["http://i772.photobucket.com/albums/yy8/so-lovable/Unbenannt2-6.png", "", ""]
fadeimages[1]=["http://i772.photobucket.com/albums/yy8/so-lovable/Unbenannt-16.png", "", ""]
fadeimages[2]=["http://i772.photobucket.com/albums/yy8/so-lovable/Unbenannt1-6.png", "", ""]

var fadebgcolor="#000000"

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) <img src="http://theme.webme.com/smiles/smiley.gif" border="0">
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==0){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
</script>      <script type="text/javascript">
new (fadeimages, 549, 367, 0, 3000, 1, "R")
</script>       <style>  .solovable{ display: block; font-family: arial; font-weight: bold; font-style: bold; text-shadow: #ffffff 0px 0px 6px;  font-size: 14pt; padding-left: 5px; color: #0171b9; text-decoration: bold; text-align: left; margin-bottom: 6px; margin-right: 1px; line-height: 4 px; letter-spacing: -1px; border-left: 6px solid #61a8d6; border-bottom: 1px solid #d0d0d0; background-image:  none;}    #extraDiv1 {display: none;}  #extraDiv2 {display: none;}  #extraDiv3 {display: none;}  #extraDiv4 {display: none;}  #extraDiv5 {display: none;}  #extraDiv6 {display: none;}  #pre_header {display: none;}  #post_header {display: none;}  #pre_content {display: none;}  #lovable_content {display: none;}  div.header{display: none;}   h2#title{display: none;}   a:link { color: #bababa; font-family: arial;  text-decoration: none;}  a:visited { color: #0171b9; font-family: arial; text-decoration: none;}  a:hover { color: #0171b9; font-family:  arial; border-bottom: 0px dotted #bababa;}    body { overflow-x: hidden; background-image: url('http://i772.photobucket.com/albums/yy8/so-lovable/enjoythesummerbackground.png');  }    *{ padding: 0; margin: 0; }    #content { position: absolute; top:739px; border-right: 1px dotted #000000; border-left: 1px dotted #000000; margin-left:293px; width: 547px; padding: 2px; color:#000000; font-family: arial; font-size:  12px; text-align: justify; word-spacing: px; letter-spacing: 1px; overflow:auto; background-color: #ffffff;   }      #textbox{ position: absolute; left:66px; top:324px; padding: 8px; width: 211px; background-color: #ffffff; border:0px solid #FFFFFF; color: #000000; -moz-border-radius-bottomleft: 15px; -moz-border-radius-topleft: 15px; font-family: arial; font-size:  11px;  word-spacing: 0px; letter-spacing: 0px; overflow:auto;}    #nav_container{ position: absolute; top:555px; margin-left: 05px; high: 100px; width: 221px; font-family: Verdana;  border:0px solid #333333;}   ::-moz-selection { color: #0070be; }   ul#nav{ width: 20px; padding: 5px; margin: 5px;}  li.nav_element{ list-style-type: none; position: relative; padding:1px; width: 100px;}  li.nav_element a{ display: block; width: 100px; height: 15px; padding: -2px; font-weight:; text-decoration:; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: right; word-spacing: 0px; letter-spacing: 0px; color: #bababa; background-color:#ececec; background-image:url(xx);   border-bottom: 0px solid color:#ffffff; }    li.nav_element a:hover{ color: #2323b2; background-color:#ececec; background-image:url(xx);}               A.navi:link, A.navi:active, A.navi:visited { display: block; padding-left: 2px; padding-bottom: 3px; font-family: arial; font-size: 11px; height: 10px; margin-bottom: 2px; border-bottom: 1px solid #ffffff; border-left: 0px solid #ffc9d5; border-right: 0px dotted #7C757B; border-top: 0px dotted #7C757B; letter-spacing: 1px; margin-right: 3px; color: #7ec7d4; padding-top: 5px; background-color: #ffffff; text-align: left; margin-top: 7px; line-height: 10px;}  A.navi:hover { display: block; padding-left: 2px; padding-bottom: 3px; font-family: arial; font-size: 11px; height: 10px; margin-bottom: 2px; border-bottom: 1px solid #ffffff; border-left: 0px solid #ffc9d5; border-right: 0px dotted #7C757B; border-top: 0px dotted #7C757B; letter-spacing: 1px; margin-right: 3px; color: #47a5e0; text-shadow: #ffffff 0px 0px 4px; background-color:#ffffff; text-align: left; line-height: 10px; background-image:  none;}  A.navi2:link, A.navi2:active, A.navi2:visited { display: block; padding-top: 7px; padding-left: 5px;  font-family: Arial; margin-left: 2px; margin-top: 2px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1px; border-bottom: 1px solid #ffffff; border-left: 0px solid #DAE2E8; border-right: 0px solid  #C8CFD5; background-color: #ffffff; height: 15px; border-top: 0px solid #DAE2E8; color: #47a5e0; }  A.navi2:hover { display: block; padding-top: 7px; padding-left: 5px;  font-family: Arial; margin-left: 2px; margin-top: 2px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1px; border-bottom: 1px solid #ffffff; border-left: 0px solid #DAE2E8; border-right: 0px solid  #C8CFD5; height: 15px; border-top: 0px solid #DAE2E8; color: #006cb1; background-image: none;}      </style>   <style type="text/css"></style>  <IMG SRC="http://i28.tinypic.com/2vki428.jpg" _fcksavedurl="http://i28.tinypic.com/2vki428.jpg" WIDTH=1400  HEIGHT=1024  style="position:absolute; top: 110; left:0" border="0">  <div id="textbox">  <p class="solovable">Deine Überschrift</p>  <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <br>    <p class="solovable">Deine Überschrift</p>   <table id="table1" width="100%" border="0"><tbody> <td style="width: 50%"> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a></td>   <td style="width: 50%"> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a>  </td> </tr> </tbody></table> <br><br>   <p class="solovable">Deine Überschrift</p>  <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <a href="http://url" _fcksavedurl="http://url" class="navi2">Deine Überschrift</a> <br>   <p class="solovable">Deine Überschrift</p> <a href="http://so-lovable.de.tl" _fcksavedurl="http://so-lovable.de.tl" class="navi2">Designer</a> <br><br></div> <div  style="position: absolute; left:294px ; top:698px ; width: 550px; height: 40;"> <marquee direction=right><a href="http://so-lovable.de.tl" _fcksavedurl="http://so-lovable.de.tl"<img src="http://i772.photobucket.com/albums/yy8/so-lovable/1.gif" _fcksavedurl="http://i772.photobucket.com/albums/yy8/so-lovable/1.gif"></img></a> <a href="http://so-lovable.de.tl" _fcksavedurl="http://so-lovable.de.tl"<img src="http://i772.photobucket.com/albums/yy8/so-lovable/1.gif" _fcksavedurl="http://i772.photobucket.com/albums/yy8/so-lovable/1.gif"></img></a> <a href="http://so-lovable.de.tl" _fcksavedurl="http://so-lovable.de.tl"<img src="http://i772.photobucket.com/albums/yy8/so-lovable/1.gif" _fcksavedurl="http://i772.photobucket.com/albums/yy8/so-lovable/1.gif"></img></a> <a href="http://so-lovable.de.tl" _fcksavedurl="http://so-lovable.de.tl"<img src="http://i772.photobucket.com/albums/yy8/so-lovable/1.gif" _fcksavedurl="http://i772.photobucket.com/albums/yy8/so-lovable/1.gif"></img></a></marquee>  </div>  <div  style="position: absolute; left:294px ; top:326px ; width: 550; height: 387;"> <script type="text/javascript">
new fadeshow (fadeimages, 549,367, 0, 3000, 1, "R")
</script> </div> </div> </div>

css code ohne style tags:

3. Schritt: soo jetzt hast du das Design und kannst die Unterseiten verlinken,
denk daran meinen Creditlink-punkt nicht zu löschen!!