• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JavaScirpt via jQuery ändern

EndOfGreen

EndOfGreen

Neues Mitglied
Folgendes Problem:

Ich möchte, dass sich das Hintergrundbild der Seite ändert, wenn man auch einen Link klickt.
Das einfachste wäre natürlich
Code: 
onclick="this.style.backgroundImage = 'url([url])';
, aber das Bild ist nicht als Hintergrund festgelegt, sonder wird als ein normales Bild über ein Script aufgerufen. Dies dient dazu, dass ich das Bild auf 100% Höhe & Breite setzen kann und das auch von jedem Browser unterstützt wird.
Das Script sieht folgendermaßen aus:
Code: 
document.getElementById("Hintergrundbild").src = "[url]";
Und im body dann
HTML: 
<img id="Hintergrundbild" style="position:fixed; z-index: 1;" width="100%" height="100%" />
Jetzt soll der Besucher aber individuell entscheiden können, welches Hintergrundbild er „benutzen“ möchte.
Und mir wurde gesagt, dass das mit jQuery am besten funktioniert, da dies mit allen Browser funktioniert.


Und falls möglich sollte das auch beim Wechseln auf eine andere Seite so bleiben und nicht wieder auf das Standard-Bild wechseln.
 
Zuletzt bearbeitet:
Hmm, jQuery ist schon etwas länger her...

Du willst also ein Bild nehmen und es immer auf volle Höhe & Breite ziehen? Was für ein Bild ist das denn? Ein richtiges Bild, wo auch was drauf is? Naja, ist ja alles Geschmacksache...

Mit jQuery müsste das dann so gehen:

Code: 
$("#DeinLink").click(function(){
$("#Hintergrundbild).css('src', 'neueurl.jpg');
});
 
EndOfGreen schrieb:
http://img5.imagebanana.com/img/w16nf5np/Bad_company_wp2_edit.jpg Das ist das Bild, das standardmäßig eingeblendet wird.

http://img2.imagebanana.com/img/bcgpy4le/ferr_sing_2010klein.jpg Und das ist das Zweite.

Und die wollte ich dann durch anklicken von Links auswählen lassen. (Ungefähr so http://img5.imagebanana.com/img/tjv0e7py/Bildschirmfoto.png)


Wie würde dann der gesamte Code mit den Links aussehen? Ich muss dazusagen, dass ich mich mit JS noch nicht so gut auskenne.
Zum Vergrößern anklicken....

Naja gut, wie gesagt, Geschmacksache xD

Warte, ich code dir das ausnahmsweise mal eben schnell...

[EDIT]

Ungefähr so?

HTML: 
<html>
 <head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {   
    $("a.#background1").click(function(){
     $("#background).css('src', 'backgroundl.jpg');
    });   
    $("a.#background2").click(function(){
     $("#background).css('src', 'background2.jpg');
    });   
   });
  </script>
 </head>
 <body>
  <img src="background1.jpg" id="background" alt="" height="100%" width="100%"\>
  <a href="#" id="background1">Bild 1</a>
  <a href="#" id="background2">Bild 2</a>
 </body>
</html>

Die jquery.js bekommst du auf jQuery: The Write Less, Do More, JavaScript Library
 
Zuletzt bearbeitet:
Moment, ich hatte es nicht getestet, schaus mir nochmal an ^^

[EDIT]

HTML: 
<html>
 <head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {    
    $("#bg1").click(function() {
     $("#background").attr("src", "backgroundl.jpg");
    });   
    $("#bg2").click(function() {
     $("#background").attr("src", "background2.jpg");
    });   
   });
  </script>
 </head>
 <body>
  <img src="background1.jpg" id="background" alt="" height="100%" width="100%"/>
  <p id="bg1">Bild 1</p>
  <p id="bg2">Bild 2</p>
 </body>
</html>

Voilà =) Es waren ein paar Fehler drinnen, hauptsächlich Syntax-Fehler. Und der Befehl .css war falsch, hier wird .attr für Attribute benötigt. Du kannst (wie im neuen Code) statt der Links auch andere Elemente nehmen, dann springt die Seite nicht nach oben wie bei den #-Links.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben