Hintergrundauswahl

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Hintergrundauswahl

Beitrag von Hape »

Hier ein weiteres Script für einen Hintergrundbildwechsel durch den Besucher eurer Webseite.

Für dieses Script braucht man 6 Bilder: image1.jpg,image2.jpg usw.
6 Thumbnails von den Bildern: Thumb1.jpg, thumb2.jpg usw.
und 6 css-Dateien: img1.css, img2.css etc.
Die css-Dateien haben folgenden Aufbau:
Beispiel für 1 Bild:

Code: Alles auswählen

body {
	background-image: url(image1.jpg);
 background-repeat: repeat-yes;
	background-color:#000000;
}
Dies wäre der Inhalt von img1.css. Dieser Aufbau ist bei den restlichen css-Datein gleich bis auf Bildname und css-Dateiname.

Folgendes in den Header:

<link href="URL/img2.css" title="img2" rel="stylesheet" type="text/css" />
<link href="URL/img1.css" title="img1" rel="alternate stylesheet" type="text/css" />
<link href="URL/img3.css" title="img3" rel="alternate stylesheet" type="text/css" />
<link href="URL/img4.css" title="img4" rel="alternate stylesheet" type="text/css" />
<link href="URL/img5.css" title="img5" rel="alternate stylesheet" type="text/css" />
<link href="URL/img6.css" title="img6" rel="alternate stylesheet" type="text/css" />

Url zu den Bildern bitte anpassen.

Hier das Script für den Body:

Code: Alles auswählen

<script type="text/javascript" language="javascript">
<!--

var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.

//////No need to edit beyond here//////////////

function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

function deleteCookie(name){
setCookie(name, "moot")
}

function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}

function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}

if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
} 
}

if (document.images) {
		
	pic2= new Image(1440,892); 
	pic2.src=""; 
		
}
-->
</script>
Dieses in die Textseite einfügen: (Url zu den Bildern sind anzupassen)

Code: Alles auswählen

<style type="text/css">
<!--
.bgthumbs {
	margin: 2px;
	border: 2px solid #000000;
}

.bgthumbs a:hover {
	border: 2px solid #0099CC;
}
-->
</style>
<center>
<h5 style="text-align: center;">W&auml;hle Deinen Hintergrund / Select your background</h5>
		  <a href="javascript:chooseStyle('none', 60)" checked="checked" /><img src="https://file1.hpage.com/008954/13/bilder/thumb2.jpg" alt="background image 2" border="0" class="bgthumbs" /></a> 
<a href="javascript:chooseStyle('img1', 60)" /><img src="URL zum Bild/thumb1.jpg" alt="background image 1" border="0" class="bgthumbs" /></a> 
<a href="javascript:chooseStyle('img3', 60)" /><img src="URL zum Bild/thumb3.jpg" alt="background image 3" border="0" class="bgthumbs" /></a> 
<a href="javascript:chooseStyle('img4', 60)" /><img src="URL zum Bild/thumb4.jpg" alt="background image 4" border="0" class="bgthumbs" /></a> 
<a href="javascript:chooseStyle('img5', 60)" /><img src="URL zum Bild/thumb5.jpg" alt="background image 5" border="0" class="bgthumbs" /></a> 
<a href="javascript:chooseStyle('img6', 60)" /><img src="URL zum Bild/thumb6.jpg" alt="background image 6" border="0" class="bgthumbs" /></a> 
Hier eine Demoseite: http://hapes-javascript-demo-page.hpage ... ehlen.html

Antworten