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

[SCRIPTSUCHE] Hintergrundbilder mit Klick auf einen Text ändern

M

Mokkor

New member
Guten Tag,

ich kenne mich leider gar nicht mit Javascript aus. Ich habe mehrere Seiten durchforstet und auch ein wenig experimentiert. Leider hat es nie so geklappt wie ich das gern hätte.

Ich möchte gerne auf der Webseite in Footer mehrere Texte verlinken, welche zum Wechseln des Hintergrundbildes dienen. Beispiel: - Bild1 - - Bild2 - - Bild3 - - Bild4 - / wenn man nun jewals auf einen Textblock klickt, ändert sich das Hintergrundbild.

Hier der Quelltext der .html Datei

HTML: 
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Anwendungen Leitstelle</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel="shortcut icon" href="http://forum.jswelt.de/images/favicon.png" />

  <link rel="stylesheet" href="css/style.css" >
  
  <script type="text/javascript" src="jvs/java.js"></script> 

  
</head>

Hier der Quelltext der .css Datei:

HTML: 
body {

  color: #000000;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  background: url(../images/Bild1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #3b3b3b;
  opacity: 0.95;

}

Gruß und gesundes neues Jahr

Mokkor
 
Zuletzt bearbeitet von einem Moderator:
Mach nen Button mit der id="meinButton" und versuchs mit jQuery:

Code: 
$("#meinButton").click(function() {
    $('body').css('background-image', 'url("pfad-zum-neune-bild.jpg")');
});
 
Zuletzt bearbeitet:
alphakanal schrieb:
versuchs mit jQuery:
Zum Vergrößern anklicken....

warum immer jquery? mit nativem js geht das schneller, effizienter und braucht auch nicht mehr Code:
Code: 
document.getElementById('meinButton').addEventListener('click', function(){
  document.body.style.backgroundImage = 'url("pfad-zum-neune-bild.jpg")';
});
 
Also, erst einmal Danke für die Antworten. Leider geht es noch nicht.

Ist es auch möglich das über einen Text zu machen? Da ich sonst noch den Button "gestalten" müsste. Falls es so besser ist, dann muss ich da halt schauen.

Jedenfalls... ich habe das eingegeben:

im .html

HTML: 
  <script language="javascript" type="text/javascript" src="jvs.js"></script>
  
</head>

<body>
<input type="button" id="meinButton" value="Test" onclick="function()";></input>

und im .js

HTML: 
document.getElementById('meinButton').addEventListener('click', function(){
  document.body.style.backgroundImage = 'url("Bild2.jpg")';
});

passiert ist noch nichts.

Gruß Mokkor
 
alphakanal schrieb:
darum dachte ich mit jQuery ists einfacher, weil es bestimmt ned nur beim Hintergrundbild ändern bleiben wird ;)
Zum Vergrößern anklicken....
um gottes willen!
niemals eine lib benutzen ohne das native js zu beherrschen, und schon garnicht jquery!!!
das fängt schon damit an, dass jquery keinerlei fehlermeldungen ausgibt. ich kann das nur empfehlen, wenn z. b. aufgrund einer crossbrowser notwendigkeit die lösung in nativem js erheblich aufwendiger wäre.
aber niemals, um natives js zu umgehen, um es nicht lernen zu müssen!!!

@Mokkor: steht was in der console?
onclick="function()";
Zum Vergrößern anklicken....
muss übrigens weg. entweder deklarierst du im js oder im html aber nicht beides
 
mikdoe schrieb:
um gottes willen!
niemals eine lib benutzen ohne das native js zu beherrschen, und schon garnicht jquery!!!
das fängt schon damit an, dass jquery keinerlei fehlermeldungen ausgibt. ich kann das nur empfehlen, wenn z. b. aufgrund einer crossbrowser notwendigkeit die lösung in nativem js erheblich aufwendiger wäre.
aber niemals, um natives js zu umgehen, um es nicht lernen zu müssen!!!
Zum Vergrößern anklicken....

Also, mir ist eigentlich egal wo es steht :p Hauptsache es geht irgendwann. Auch wenn es steinig ist.

So ich habe das function() bei dem button weg genommen -> kein Ergebnis.

Aktuell sieht der Quelltext so aus:

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

document.getElementById('meinButton').addEventListener('click', function(){
  document.body.style.backgroundImage = 'url("../images/sw.jpg")';
});

//-->
</script>
  
</head>

<body>
<input type="button" id="meinButton" value="Test"></input>

Ich habe aber das gefühl, dass hier etwas nicht stimmt... :)

mikdoe schrieb:
@Mokkor: steht was in der console?
muss übrigens weg. entweder deklarierst du im js oder im html aber nicht beides
Zum Vergrößern anklicken....

Die sagt nicht viel... Nur dass er css Sachen nicht erkennt (bsp: border), das spielt hier aber eher keine Rolle, vermute ich mal.

Gruß Mokkor
 
Zuletzt bearbeitet von einem Moderator:
Mokkor schrieb:
Die sagt nicht viel... Nur dass er css Sachen nicht erkennt (bsp: border), das spielt hier aber eher keine Rolle, vermute ich mal.
Zum Vergrößern anklicken....
äh ne, die meldet ganz sicher
TypeError: document.getElementById(...) is null in der Zeile mit document.getElementById('meinButton').addEventListener('click', function(){ Das Element existiert zu dem Zeitpunkt nämlich noch nicht.
Lösung => Beschäftige dich mal mit https://developer.mozilla.org/de/docs/Web/Events/DOMContentLoaded

PS: schmeiß
Mokkor schrieb:
type="text/javascript" language="JavaScript"
Zum Vergrößern anklicken....
und den HTML-Kommentar im script raus.
PPS: dein HTML ist invalide (--> <input>)

alphakanal schrieb:
darum dachte ich mit jQuery ists einfacher, weil es bestimmt ned nur beim Hintergrundbild ändern bleiben wird
Zum Vergrößern anklicken....
da geb ich dir prinzipiell schon recht, dass man mit jquery vieles "einfacher" bzw. besser kürzer erledigen kann, aber für nen einsteiger ist es nicht einfacher, sondern eher kontraproduktiv.

@Mokkor: du musst dich zumindest mit den Grundlagen von JS beschäftigen. man kann kein js verwenden, ohne einen blassen schimmer davon zu haben sondern indem man alles zusammenkopiert. das produziert nur sicherheitslücken fehler und ist total unsinnig.
 
zirzofer schrieb:
@Mokkor: du musst dich zumindest mit den Grundlagen von JS beschäftigen. man kann kein js verwenden, ohne einen blassen schimmer davon zu haben sondern indem man alles zusammenkopiert. das produziert nur sicherheitslücken fehler und ist total unsinnig.
Zum Vergrößern anklicken....

Gede ich dir recht, habe mich auch schon etwas damit auseinandergesetzt. Es geht jetzt. Ich habe es hinbekommen.

Vielen Dank für die vielen Antworten.

Gruß Mokkor
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben