Verschiedene Hintergrundbilder bei DIVs

[Biloboy]

Hallo zusammen

ich will auf meiner Seite verschiedene Backgrounds für die verschiedenen Links. Meine Seite ist mit div's aufgebaut und in all diesen sollte sich der Hintergrund ändern.

Das heisst also auf der Startseite hat div1 den Background pic1,div2 hat pic2 und div3 hat pic3. Nun soll dies bei einem Klick auf einen Link abgeändert werden, dass div1 danach pic1.1, div2 pic2.1 und div3 pic3.1 als hintergrund hat.

Wie kann ich dies bewerkstelligen???

 

[sLost]

du benenntst die div1-3 mit:
<div id="div1 ...
<div id="div2 ...
<div id="div3 ...

JAVASCRIPT:
function link(layerzahl)
{
layerzahl.style.background = "BILD-URL"
}

und in <a href="..."
onclick="link(DEN NAMEN DES LAYERS)"
einfügen

 

[Shrapnel]

Ich würde von Javascript abraten. Halte es persönlich für sinnvoller, wenn du für jede Seite, die anders aufgebaut ist sperat die DIVs einstellst.

 

[ZT-ORION]

Ich würde von Javascript abraten. Halte es persönlich für sinnvoller, wenn du für jede Seite, die anders aufgebaut ist sperat die DIVs einstellst.

sinnvoller?
Und wie stellst du dir das vor wenn die Seite extrem viele divs hat?
Dann muss man php oder eine andere serverside-Sprache benutzen, und damit immer die ganze Seite neu laden... jemand der keinen cache an hat wird das sehr nervig finden.

Wo ist das Problem mit JS?
Man kann aber auch CSS verwenden, sofern du nur den bg der geklickten div ändern willst, wenn due Maus drüber ist oder so...

#divA:hover {background-image:url('...')}

Aber ohne wirklich die website zu sehen kann man recht wenig sagen, ich weiß ja nicht wie das ganze aufgebaut ist.

Am sinnvollsten ist wohl ein onclick="this.className='blub' ", wobei dann im stylesheet das bgimg drinne ist:

div.blub {....}

Wenn du allerdings bei clicken auf einen anderen link dem vorher geclickten wieder den alten bg geben willst, kommst du um eine kleine java fkt nicht drumherum...

 

[marky68]

sinnvoller?
Und wie stellst du dir das vor wenn die Seite extrem viele divs hat?
Dann muss man php oder eine andere serverside-Sprache benutzen, und damit immer die ganze Seite neu laden... jemand der keinen cache an hat wird das sehr nervig finden.

Wo ist das Problem mit JS?
Man kann aber auch CSS verwenden, sofern du nur den bg der geklickten div ändern willst, wenn due Maus drüber ist oder so...

#divA:hover {background-image:url('...')}

Aber ohne wirklich die website zu sehen kann man recht wenig sagen, ich weiß ja nicht wie das ganze aufgebaut ist.

Am sinnvollsten ist wohl ein onclick="this.className='blub' ", wobei dann im stylesheet das bgimg drinne ist:

div.blub {....}

Wenn du allerdings bei clicken auf einen anderen link dem vorher geclickten wieder den alten bg geben willst, kommst du um eine kleine java fkt nicht drumherum...

Java != JavaScript
uebrigens, onClick zeugs ist JavaScript.

@shrapnel: ack.

 

[ZT-ORION]

Java != JavaScript
uebrigens, onClick zeugs ist JavaScript.

@shrapnel: ack.

Wenn schon klugscheißen dann wenigstens richtig...

object.onclick ist nämlich JScript, und JScript ist nicht JavaScript

onClick ist natürlich das JS-pendant, aber kann nicht als inline html element verwendet werden, also: <ELEMENT onclick = "handler" ... >
was gleichzusetzen ist mit this.onclick= ...


Hier ein Beispiel:

<div id="lol" onmouseover="this.onclick=function(){alert('lol');};">ycyc</div>

Das funzt nicht mit onClick

 

[marky68]

Wenn schon klugscheißen dann wenigstens richtig...

object.onclick ist nämlich JScript, und JScript ist nicht JavaScript

onClick ist natürlich das JS-pendant, aber kann nicht als inline html element verwendet werden, also: <ELEMENT onclick = "handler" ... >
was gleichzusetzen ist mit this.onclick= ...


Hier ein Beispiel:

<div id="lol" onmouseover="this.onclick=function(){alert('lol');};">ycyc</div>

Das funzt nicht mit onClick

http://de.selfhtml.org/html/attribute/eventhandler.htm
"die eine Verknüpfung zu einer Script-Sprache herstellen."
Insofern habe ich mich da nicht ganz richtig ausgedrueckt, mit einem event-handler kannst du JavaScript aufrufen, oder meinetwegen "blaScript" oder auch "z-orionScript", wie du willst.

im uebrigen ist mir nicht ganz klar, was dein beispiel bewirken soll?

<div onClick='alert("...")'>div</div>

 

[ZT-ORION]

Du rufst mit JScript eine JavaScript funktion auf...

Und was das Beispiel bewirkt ist doch absolut logisch...

Wenn du mit der maus onmouseover der div triggerst, bekommt diese ein onclick event zugewiesen und du bekommst einen alert. Oh Wunder, wenn du nun JavaScript benutzt, bekommst du keinen alert - wer hätte das gedacht




[EDIT]
<div onclick="..." > ist übrigens JScript, wie oben erwähnt. Daher kann es auch ganz klein geschrieben werden, oder wie auch immer. HTML Element attributes sind ja in der Regel nicht Case-sensitiv...

<A HREF=""> funzt genauso wie <a href="">

 

[skicu]

Wozu JavaScript, wenn sowieso die Seite neu geladen wird (da ja, wie beschrieben, ein Link angeklickt wird)?
Serverseitige Lösungen sind imho immer clientseitigen vorzuziehen. Von daher sollte man die CSS Datei mit PHP einbinden / erstellen.

edit: Wie groß ist dein Webprojekt denn? Was ist dein Wissensstand? Lohnt sich die Scriptlösung oder wäre es kein Problem, mehrere HTML Dateien und zugehörige CSS Dateien zu erstellen?

 

[ZT-ORION]

Wenn man auf einen link clickt muss nicht unbedingt die ganze Seite neu geladen werden... viele Seite benutzen zB frames dazu... dann wird nur ein inlineframe neu geladen oder so, und das menü bleibt wo es ist.

 

[Shrapnel]

Wenn man auf einen link clickt muss nicht unbedingt die ganze Seite neu geladen werden... viele Seite benutzen zB frames dazu... dann wird nur ein inlineframe neu geladen oder so, und das menü bleibt wo es ist.

Die wenigsten CSS-Designs, die mit DIV-Boxen aufgebaut sind, verwenden Frames. Wenn doch, sollte man sie bestrafen.

 

[ZT-ORION]

Ist schon ein Unterschied, ob man das komplette layout mit CSS implementiert, oder nur einigen Elementen style-Eigenschaften übergibt.
Bei einem reinen CSS-layout machen frames in der Tat nicht sehr viel Sinn, nur werden die trozudem noch recht häufig für häßliche Werbe-banner benutzt die ich aber eh nie zu Gesicht bekomme