• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Homepage Background (Bild) im Dropdownmenue auswaehlen

MeisterEder

MeisterEder

New member
moin,
ich moechte gerne dass man auf meiner homepage das backgroundbild auswaehlen kann per dropdownmenue in so einer form: (nur mal damit ihr wisst wie ich mir das vorstelle)
Code: 
<html><head></head><body><select name="bla">
<option selected="selected">Standart Background</option>
<option>Background 2</option>
<option>Background 3</option>
<option>Background 4</option>
<option>Background 5</option>
</select></body></html>
so...wenn ich jetzt da was auswaehle soll sich fuer den jeweiligen user das backgroundbild aendern und es aber auch bei dem naechsten besuch erhalten bleiben (ich glaube da kommen cookies ins spiel).
kann mir jemand erklaeren wie ich das mache, oder gibt es da schon was fertiges? ich denke nicht dass ich das allein hinkriegen wuerde.
MfG Eder
 
Zuletzt bearbeitet von einem Moderator:
ändern ist recht einfach, cookies dagegen weniger.
du baust den befehlt onchange="" in dein select ein und schreibst dann eine function die in dem body style-tag das hintergrundbild durch das neue ersetzt.
 
PHP: 
<html>
<head>
<script type="text/JavaScript">
  function chgBckgr() {
	  //Festlegen welches Element angesprochen werden soll
		var Auswahl=document.TestForm.bla;
		//Festlegen des Elements body
	  var bodyStyle=document.getElementById('body');
		//Forschleife um zu ermitteln welche option selected ist
		for(var i=0; i<Auswahl.length; i++) {
      if(Auswahl.options[i].selected == true) {
        var newBG=Auswahl.options[i].value;
		  }
    }
		//Eine abfrage wenn die var newBG=x ist, dann soll y gemacht werden / in diesem Fall ändern des hintergrundes
		switch (newBG) {
		  case "backSt":
			  bodyStyle.style.backgroundImage="url('backSt.gif')";
			break;
		  case "back2":
			  bodyStyle.style.backgroundImage="url('back2.gif')";
			break;
		  case "back3":
			  bodyStyle.style.backgroundImage="url('back3.gif')";
			break;
		  case "back4":
			  bodyStyle.style.backgroundImage="url('back4.gif')";
			break;
		  case "back5":
			  bodyStyle.style.backgroundImage="url('back5.gif')";
			break;
		}
	} 
</script>
</head>
<body id="body" style="background-image: url('http://www.travelscout24.de/templates/newsletter/images/styleElemente/nlTeaserPfeil_20x20.gif')">
<form name="TestForm" action="#" method="post">
<!--onchange aktiviert die Javascriptfunktion nach ändern der selectauswahl-->
<select name="bla"  onchange="chgBckgr()">
<option value="backSt">Standart Background</option>
<option value="back2">Background 2</option>
<option value="back3">Background 3</option>
<option value="back4">Background 4</option>
<option value="back5">Background 5</option>
</select>
</form>
</body>
Ich dachte ich spiele mal Kobolt und bastel dir schnell die Auswahl. Cookies kann ich dir net weiter helfen.
 
Ja, an der rot markierten stelle. aber wozu?
Code: 
function setActiveStyleSheet(title)
{
	var i, a, main;

	for (i = 0; (a = document.getElementsByTagName('link')[i]); i++)
	{
		if ((a.getAttribute('rel').indexOf('style') != -1) && (a.getAttribute('title')))
		{
			a.disabled = true;

			if (a.getAttribute('title') == title)
				a.disabled = false;
		}
	}
}

function getActiveStyleSheet()
{
	var i, a;

	for (i = 0; (a = document.getElementsByTagName('link')[i]); i++)
		if ((a.getAttribute('rel').indexOf('style') != -1) && (a.getAttribute('title')) && (!a.disabled))
			return a.getAttribute('title');

	return null;
}

function getPreferredStyleSheet()
{
	var i, a;

	for (i = 0; (a = document.getElementsByTagName("link")[i]); i++)
		if ((a.getAttribute('rel').indexOf('style') != -1) && (a.getAttribute('rel').indexOf('alt') == -1) && (a.getAttribute('title')))
			return a.getAttribute('title');

	return null;
}

function createCookie(name, value, days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
		var expires = '; expires=' + date.toGMTString();
	}
	else
		expires = '';

	document.cookie = name + '=' + value + expires + '; path=/';
}

function readCookie(name)
{
	var nameEQ = name + '=';
	var ca     = document.cookie.split(';');

	for (var i = 0; i < ca.length; i++)
	{
		var c = ca[i];

		while (c.charAt(0) == ' ')
			c = c.substring(1, c.length);

		if (c.indexOf(nameEQ) == 0)
			return c.substring(nameEQ.length, c.length);
	}

	return null;
}

window.onload = function(e)
{
	var cookie = readCookie('style');
	var title  = (cookie) ? cookie : getPreferredStyleSheet();

	setActiveStyleSheet(title);
}

window.onunload = function(e)
{
	var title = getActiveStyleSheet();

createCookie('[B][COLOR="Red"]style[/COLOR][/B]', title, 365);
}

var cookie = readCookie('style');
var title  = (cookie) ? cookie : getPreferredStyleSheet();
 
lyc8069 schrieb:
Ja, an der rot markierten stelle. aber wozu?
Zum Vergrößern anklicken....
ich würde den cookie dann nach meiner homepage bennen und wenn einer den cookie nicht mehr haben will, findet er ihn schnell und kann ihn loeschen. richtig?

//Edit:
achne, die cookies heissen in der liste ja automatisch wie die homepage, hatte ich vergessen
dann hast du recht, brauche ich nichts aendern
 
Zuletzt bearbeitet:
MeisterEder schrieb:
Code: 
<html><head></head><body><select name="bla">
<option selected="selected">Standart Background</option>
<option>Background 2</option>
<option>Background 3</option>
<option>Background 4</option>
<option>Background 5</option>
</select></body></html>
Zum Vergrößern anklicken....
klappt wunderbar,
kann mir nun noch einer sagen wie ich das verfeinern kann?
ich moechte die farbe (hellblau) aendern die bei einem hover kommt.
und wie kann ich da ein hintergrundbild einfuegen (in das dropdownmenue)?
 
Schon, aber nur mit Hilfe von JavaScript.
Reines CSS funktioniert nicht.

Außerdem kannst Du jedem <option> eine Hinergrundfarbe Deiner Wahl geben:
<option style="background:#000;">
 
moin zusammen,
ich habe mir jetzt in photoshop ein design geslicet, dass besteht wie die meisten aus sehr vielen grafiken. nun besteht bei mir das problem, dass ich keine gute idee habe, wie ich das hier am besten unterbringe:
MeisterEder schrieb:
Code: 
<html><head></head><body><select name="bla">
<option selected="selected">Standart Background</option>
<option>Background 2</option>
<option>Background 3</option>
<option>Background 4</option>
<option>Background 5</option>
</select></body></html>
Zum Vergrößern anklicken....

denn..., fuege ich dass irgendwo per dreamweaver in mein geslicetes photoshopdesign, verschieben sich natuerlich die ganzen grafiken und so wird alles durcheinander.
gibt es irgendwie eine moeglichkeit, dass ich dieses dropdownmenue "obendraufsetzen" kann? -also das ich es z.b. auf eine andere grafik draufsetzen kann und eben nicht dazwischen?
MfG der Meister
 
dkdenz schrieb:
...und es heißt Standard!
Zum Vergrößern anklicken....
das ist mir eigentlich klar, lol

so? - es funktioniert nicht
Code: 
<html>
<head>
<title>kA</title>


<style type="text/css">
 .examplediv
 {
  background-color:#efefef;
  border-style:solid #000000 1px;
 }
#divid1
{
 position:absolute;visibility:hidden;
 left:450px; top:350px; width:300px; height:150px;
 z-index:1;
}
#divid2
{
 position:absolute;visibility:hidden;
 left:450px; top:350px; width:300px; height:150px;
 z-index:2;
}
</style>
</head>

<body>

  <div id="divid1" class="examplediv">
<select name="bla">
<option selected="selected">Standart Background</option>
<option>Background 2</option>
<option>Background 3</option>
<option>Background 4</option>
<option>Background 5</option>
</select></body></html>
  </div>

  <div id="divid2" class="examplediv">
  ...
  </div>
  </body>
  </html>
 
Zuletzt bearbeitet von einem Moderator:
Vereinfachtes Beispiel (hab's jetzt nicht mit IE getestet):
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	  "http://www.w3.org/TR/html4/loose.dtd">
<html> 
	<head> 
		<title>Dokumenttitel</title> 
		<style type="text/css">
			/*Hier die Style-Anweisungen*/
		</style> 
	</head> 
	<body>
		<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
		<form action="#">
		<select name="bla" style="position:absolute;top:50px;left:50px;z-index:1;">
			<option selected="selected">Standard Background</option>
			<option>Background 2</option>
			<option>Background 3</option>
			<option>Background 4</option>
			<option>Background 5</option>
                </select>
	        </form>
	</body> 
</html>
Zudem hast Du ein paar arge Fehler in Deinem MarkUp...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben