✔ Bildwechsel eines div Hintergrunds

Status
Nicht offen für weitere Antworten.
A

angeleater

Grünschnabel
huhu,

ich hab jez schon ne ganze Zeit gegoogelt und hier gesucht, bin aber leider nicht ganz fündig geworden was ich brauche.

Ich hab ne Seite gebastelt, die eigentlich komplett mit css definiert ist. eine Navigation wechselt im iFrame den Inhalt. ich möchte nun, dass sich per Klick nciht nur der Inhalt des iFrames ändert, sondern auch ein Bild im mainframe, dass ich per div/css definiert habe.

also auf: http://www.teard.de soll beim klick das Bild ganz links verändert werden, z.B. von http://www.teard.de/pics/bandbg.jpg zu http://www.teard.de/pics/bandbg_ferdi.jpg
ich hoffe ihr versteht was ich meine :)

Kann ich per css auf andere div objekte zugreifen und darin den inhalt ändern?
also kann ich pro Navigations punkt sowas wie bandbg.background-image:url(pics/bandbg_ferdi.jpg); ausführen? wobei bandbg für das div objekt mit dem zu ändernden bild steht.

oder lässt sich das am besten per javascrript lösen?

vielen dank schonmal!
angeleater
 
Hi,

mir wäre mit reinem CSS keine Möglichkeit bekannt, um das Hintergrundbild in einem DIV zu tauschen, wenn man die entsprechende Seite im iFrame aufruft.

Von daher wirst du wohl ein Script (client- oder serverseitig) hinzuziehen müssen, um den Bildertausch zu realisieren.
 
michaelsinterface hat gesagt.:
Hi,

mir wäre mit reinem CSS keine Möglichkeit bekannt, um das Hintergrundbild in einem DIV zu tauschen, wenn man die entsprechende Seite im iFrame aufruft.
Zum Vergrößern anklicken....
weiß nich ob dus richtig verstanden hast ;) ich will sobald man auf den link im mainframe klickt, ein div objekt auch im mainframe verändern. und dabei soll sich gleichzeitig der inhalt im iframe ändern.
aber primär gehts jetzt darum per klick auf einen link dieses div-bild zu ändern. hätte noch ne idee dass man alle bilder shcon in die page übernander läd und dann der klick den z-index verändert. dazu müsste man allerdings wieder die eigenschaften eines div-objekts verändern können, und da weiß ich leider nicht ob das überhaupt geht ;)


Von daher wirst du wohl ein Script (client- oder serverseitig) hinzuziehen müssen, um den Bildertausch zu realisieren.
Zum Vergrößern anklicken....

hast du da vll ne konkrete idee? kenn mcih mti javascript leider noch nicht wirklich aus, hab beim durchstöbern auch noch nichts passendes gefunden.


Vielen Dank schonmal :) schau mir grade mal die gallerie durch
 
Ich denke schon, dass ich dich richtig verstanden habe.

Wenn dir die empfohlene CSS-Photo-Galerie nicht weiterhelfen sollte, gibt es dutzende Möglichkeiten, um Grafiken mit einem Script zu tauschen - dies wäre mein Vorschlag:

Code: 
<script type="text/javascript">
<!--
function swapImage(imgName,swapImg) {
       document.images[imgName].src=swapImg;
}
//-->
</script>
Code: 
<div id="bandbg">
   <img src="pics/bandbg.jpg" alt="" name="start">
</div>
Code: 
<a href="..." onclick="swapImage('start','pics/bandbg_ferdi.jpg')" target="mainframe">...</a>
Und bitte achte beim Verfassen deiner Beiträge auf die Groß- und Kleinschreibung - siehe hierzu Punkt 15 der Netiquette.
 
Huhu,

super! Vielen Dank schomal für das Script. Damit funktioniert es schon fast so wie ich will :) Problem ist jetzt nur, wenn ich im Inhalt von einem iFrame z.B. unter Band einen Namen anklicke will ich auch, dass sich das Bild ändert. Das Bild ist allerdings eine Ebene drüber definiert, also klappt das nicht...


naja werd das iFrame dann so umstellen, dass es über den ganzen Bereich geht, und jeweils im iFrame dann das Bild positioniere. Oder hast du noch ne bessere Idee? ;)

da brauch ich dann nur gar keine Swap Funktion mehr :D dabei find ich die so schick ;)


und sorry wegen der Groß-/Kleinschreibung, bin das nicht so gewohnt, wusst nicht, dass hier so wert drauf gelegt wird ;)
 
Hi,

versuch mal, das Script von @michaelsinterface dahingehend zu ändern, dass Du das Bildelement immer
vom obersten window-Objekt (top) aus ansprichst.
Code: 
<script type="text/javascript">
<!--
function swapImage(imgName,swapImg) {
       top.document.images[imgName].src=swapImg;
}
//-->
</script>
Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück