Hintergrundbild im CSS durch Button ändern

**intent** · 11.05.2010 11:13

Hallo Leute.

Ich habe eine Tabelle, welche ich durch CSS einen Hintergrundbild vergeben habe. Nun möchte ich diesen Hintergrundbild durch einen Button ändern können damit ein anders Hintergrundbild erscheint.
Ich habe versucht mittels MM_swaImage. Aber dies funktioniert nur bei Bildern, welche im Vordergrund stehen. Hat jemand eine Idee, wie man das machen kann. Vielen Dank für Eure Hilfe.

<td><a href="#" onclick="MM_swapImage('gasthaus','','Bilder/Gasthaus1.jpg',1)" onmouseover="MM_swapImage('over21','','Bilder/over_over.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Bilder/over.jpg" alt="" name="over21" width="25" height="25" border="0" id="over21" /></a></td>

**anett.soujon** · 11.05.2010 13:54

Ich hoffe, ich hab das Problem richtig erkannt (Die Bilder sind natürlich nicht meine):

HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<table width="300" height="300" style="background-image:url('http://www.thueringen.info/uploads/pics/Landschaft_bei_Oberschoenau.jpg')">
	<tr><td>Test</td></tr>
	</table>
<script>

 $("table").toggle(
      function () {
        $(this).css({'backgroundImage':'url("http://www.hicker.de/data/media/163/landschaft-italien_758.jpg")'});
      },
      function () {
        $(this).css({"background":"red"});
      },
      function () {
        $(this).css({"background":"yellow"});
      }
    );

</script>
</body>
</html>

**intent** · 12.05.2010 13:09

Hallo anett.soujon

Vielen Dank für den Code. Ich wollte aber durch mehrere Buttons, die ausserhalb der Tabelle stehen, den Hintergrund der Tabelle, welchen im CSS definiert ist, ändern. D.h. wenn ich Button 1 drücke, erscheint in der Tabelle Bild 1. Wenn ich Button 2 drück, erscheint in der Tabelle Bild 2.
Ich weiss nicht, ob das mit Deinem Script möglich ist. Vielen Dank für Deine Hilfe.

**anett.soujon** · 12.05.2010 15:06

Hallo,
habe mal eine Variante mit Buttons erstellt. Das Auslesen aus einer css-Datei gestaltet sich nicht ganz so trivial, hier müsste ich auch erst mal probieren, da ein direkter Zugriff auf Anhieb nicht möglich ist.
Einfacher ist es definitiv, die Bilderpfade direkt in der Html-Datei zu haben, man könnte diese ja per PHP einparsen.
Ich hoffe, es hilft.
Viele Grüße

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<input type="button" id="bild1" value="Bild 1">
<input type="button" id="bild2" value="Bild 2">
<input type="button" id="bild3" value="Bild 3">
<input type="button" id="bild4" value="Bild 4">

<table width="300" height="300" style="background-image:url('http://www.thueringen.info/uploads/pics/Landschaft_bei_Oberschoenau.jpg')">
<tr><td>Test</td></tr>
</table>
<script>
$("#bild1").click(function(){$("table").css("backgroundImage","url('http://www.kfh-mainz.de/projekte/mewo2007_1/pix/natur.jpg')");});
$("#bild2").click(function(){$("table").css("backgroundImage","url('http://www.thueringen.info/uploads/pics/Landschaft_bei_Oberschoenau.jpg')");});
$("#bild3").click(function(){$("table").css("backgroundImage","url('http://data55.sevenload.com/slcom/vi/xx/lgklgfd/goqcmnoqjdfe.jpg~/Natur-blau.jpg')");});
$("#bild4").click(function(){$("table").css("backgroundImage","url('http://t2.gstatic.com/images?q=tbn:typiXDPebbuKEM:http://photo-exhibit.com/images/20080504135316_natur_im_detail_schmetterlingsfluegel_(c)_bernhard_plank-1.jpg')");});
</script>
</body>
</html>

**cmotal** · 13.05.2010 00:21

Müssen die Pfade absolut sein?
Ausserdem gibts bei deinem Script ein Problem wenn er noch einen weiteren table auf der Seite hat. Dann bekommt der auch das Hintergrund Bild. Würd da ne ID oder Klasse machen im Jquery.

**intent** · 14.05.2010 11:08

Super. Danke viel mals für die ausführlichen Beschreibungen. Es funktioniert jetzt wunderbar.

**intent** · 14.05.2010 13:05

Hallo cmotal. Sorry, wenn ich mich noch einmal melde. Wo muss ich die id der tabelle eintragen, damit nur sich einte Tabelle ändert:

$("#bild1").click(function(){$("table").css("backgroundImage","url('http://www.kfh-mainz.de/projekte/mewo2007_1/pix/natur.jpg')");});

Ich hab leider nicht so viel Kenntniss in der Programmierung. Vielen Dank für den kurzen Feedback.

**cmotal** · 14.05.2010 15:05

Du musst erst mal der Tabelle eine ID verpassen.

HTML-Code:

<table width="300" id="tblHintergrund" height="300" style="background-image:url('http://www.thueringen.info/uploads/pics/Landschaft_bei_Oberschoenau.jpg')">
<tr><td>Test</td></tr>
</table>

Dann muss du in deinem Jquery Code auf die ID referenzieren.

Code:

$("#bild1").click(function(){$("#tblHintergrund").css("backgroundImage","url('http://www.kfh-mainz.de/projekte/mewo2007_1/pix/natur.jpg')");});

Somit sagst du Jquery nicht alle table Tags sondern nur den einen mit ID #tblHintergrund.

Klappts?

**cmotal** · 14.05.2010 15:06

Übrigens.

http://15daysofjquery.com/

Das ist ein Super Tutorial für Jquery. Du wirst begeistert sein, was da alles möglich ist. Und so einfach :-)

Grüße
Christoph

zur Startseite vom TP

Thema: Hintergrundbild im CSS durch Button ändern

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Hintergrundbild im CSS durch Button ändern

Hallo, Geht ganz einfach mit jQuery

So kann man es mit Buttons machen

Ähnliche Themen

Link: Hintergrundbild ändern?

Hintergrundbild mit Button ändern

Hintergrundbild einer Seite per Button ändern

submit button und hintergrundbild

Button mit Hintergrundbild

Aktive Benutzer

Aktive Benutzer