Bild in Zeile bei Mouseover ändern

Tschuu · 09.03.2005, 22:06

Hi ... ich möchte in eine zeile einer tabelle ein backgroundbild machen - gut, ist ja kein problem.

Ich will aber jetzt dass das Hintergrund bil beim MouseOver sich ändert ... ic h hab schon mehrere varianten diser art versucht:

Code:

<td background="grafik/des_menu_bg.jpg"  onmouseover="this.style.background-image = 'url(grafik/des_menu_bghover.jpg)'" onmouseout="this.style.background-image = ''">

aber ohne erfolg ... wie muss dass richtig aussehen?

(Wichtig: Das bild muss ein background bild sein!)

09.03.2005, 22:56

Für irgendeine Website hab sich sowas mit CSS gemacht.
Geht wunderbar und war einfacher zu handhaben.

Code als Beispiel müsste ich jetzt aber erstmal suchen ...

RudiS · 09.03.2005, 23:11

Geht so:

PHP-Code:

  <html>

  <head>

    <style type="text/css">

      .normal

       {

        background-image:url('out_bild');

        background-repeat:no-repeat;

       }

      .normal:hover

       {

        background-image:url('in_bild');

       }

    </style>

  </head>

  <body>

    <table border="1">

     <tr>

      <td class="normal">& nbsp; </td>

      <td>& nbsp;</td>

     </tr>

    </table>

  </body>

</html>

mfg RudiS

Edit: den Abstand bei '& nbsp;' weglassen

09.03.2005, 23:35

Hmmm, ne bei Tabellen funktioniert das bei mir nicht.
Hatte es über Text bzw. Links z.B. bei einer Navigation gemacht.

RudiS · 09.03.2005, 23:40

Hab einen kleinen Fehler ausgebessert, aber bei mir funktioniert das.
Siehe auch hier: http://www.css4you.de/hover.html
Geht mit IE und Opera also nur bei Links, aber eine andere Möglichkeit mit CSS gibt es (bei Tabellen, etc.) nicht.
mfg RudiS

Tschuu · 10.03.2005, 13:52

hmmm ... also ich hab mel den code oben angewand ... bei den links funktionierts! (also das der dann den hintergrund ´deslinks bei hover ändert. aber bei der tabelle passt das net ... :-S

Wie ist des, wenn ich ne tabellenzeile als linkmachen will?

CSS · 10.03.2005, 17:06

@Tschuu

JS != CSS

es heißt: element.style.backgroundImage = "URL";

Kann sein das du sonst auch noch fehler hast (mir ist das nur auf den ersten BLick aufgefallen)

Tschuu · 11.03.2005, 12:42

hä? ich raff jetzt nicht wo das rein soll ...

Also das hier ist der komplette inhalt meiner testseite wie sie bisher aussieht!

Code:

<style type="text/css">
.menu {
    background-image:url('grafik/des_menu_bg.jpg'); 
    background-repeat:no-repeat; 
	}
.menu:hover {
    background-image:url('grafik/des_menu_bg_hover.jpg'); 
	}
</style>

<table width="203" border="0" cellspacing="0" cellpadding="0">
  <tr height="14">
    <td background="grafik/des_menu_top.jpg"></td>
  </tr>


  
  
  <tr height="17">
    <td class="menu"></td>
  </tr>
  
  


  <tr height="17">
    <td background="grafik/des_menu_bottom.jpg"></td>
  </tr>
</table>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] 'upload-Datei' Zeile für Zeile auslesen	Felix	PHP Tipps 2008	18	29.06.2008 02:55
Bild onMouseOver einblenden	rocco	HTML, Usability und Barrierefreiheit	8	22.02.2008 12:52
Transparentes Bild über Bild legen update gelöst	Broadcast	PHP-Fortgeschrittene	11	04.02.2008 15:27
Zeile einfügen	tennessee	Server, Hosting und Workstations	5	02.06.2006 21:05
[Erledigt] Bild aus Datei in Bild einfügen		PHP Tipps 2005-2	1	07.08.2005 23:36
[PHP«Image] Bild in ein anderes Bild einsetzen		PHP Tipps 2005-2	4	07.08.2005 19:39
[Erledigt] Text auf Bild		PHP Tipps 2005	9	28.04.2005 15:05
[Erledigt] Jede 2. Zeile eine andere Farbe.	Clan-Opa	PHP Tipps 2004-2	1	26.11.2004 09:00
durchlauf,zeile für zeile + update	Skazi	Datenbanken	10	25.11.2004 13:59
Bild aus Server anzeigen lassen	flual2000	PHP Tipps 2004	4	26.10.2004 16:33
warum ist zelle höher als bild?		HTML, Usability und Barrierefreiheit	1	06.08.2004 00:31
[Erledigt] Funktion MAIL() funkt nicht		PHP Tipps 2004	16	11.07.2004 17:25
Bild größe hat prob mit umbenennung.	JEGO	PHP Tipps 2004	1	08.07.2004 16:30

09.03.2005, 22:06
Tschuu Erfahrener Benutzer Registriert seit: 19.06.2004 Beiträge: 216	Bild in Zeile bei Mouseover ändern Hi ... ich möchte in eine zeile einer tabelle ein backgroundbild machen - gut, ist ja kein problem. Ich will aber jetzt dass das Hintergrund bil beim MouseOver sich ändert ... ic h hab schon mehrere varianten diser art versucht: Code: <td background="grafik/des_menu_bg.jpg" onmouseover="this.style.background-image = 'url(grafik/des_menu_bghover.jpg)'" onmouseout="this.style.background-image = ''"> aber ohne erfolg ... wie muss dass richtig aussehen? (Wichtig: Das bild muss ein background bild sein!)


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

09.03.2005, 22:56
Gast Beiträge: n/a	Für irgendeine Website hab sich sowas mit CSS gemacht. Geht wunderbar und war einfacher zu handhaben. Code als Beispiel müsste ich jetzt aber erstmal suchen ...

09.03.2005, 23:11
RudiS Erfahrener Benutzer Registriert seit: 08.06.2004 Beiträge: 865	Geht so: PHP-Code: <html> <head> <style type="text/css"> .normal { background-image:url('out_bild'); background-repeat:no-repeat; } .normal:hover { background-image:url('in_bild'); } </style> </head> <body> <table border="1"> <tr> <td class="normal">& nbsp; </td> <td>& nbsp;</td> </tr> </table> </body> </html> mfg RudiS Edit: den Abstand bei '& nbsp;' weglassen __________________ Kunst kommt von Können und nicht von wollen, denn sonst würde es ja Wunst heißen.

09.03.2005, 23:35
Gast Beiträge: n/a	Hmmm, ne bei Tabellen funktioniert das bei mir nicht. Hatte es über Text bzw. Links z.B. bei einer Navigation gemacht.

09.03.2005, 23:40
RudiS Erfahrener Benutzer Registriert seit: 08.06.2004 Beiträge: 865	Hab einen kleinen Fehler ausgebessert, aber bei mir funktioniert das. Siehe auch hier: http://www.css4you.de/hover.html Geht mit IE und Opera also nur bei Links, aber eine andere Möglichkeit mit CSS gibt es (bei Tabellen, etc.) nicht. mfg RudiS __________________ Kunst kommt von Können und nicht von wollen, denn sonst würde es ja Wunst heißen.

10.03.2005, 13:52
Tschuu Erfahrener Benutzer Registriert seit: 19.06.2004 Beiträge: 216	hmmm ... also ich hab mel den code oben angewand ... bei den links funktionierts! (also das der dann den hintergrund ´deslinks bei hover ändert. aber bei der tabelle passt das net ... :-S Wie ist des, wenn ich ne tabellenzeile als linkmachen will?

10.03.2005, 17:06
CSS Erfahrener Benutzer Registriert seit: 04.12.2004 Beiträge: 324	@Tschuu JS != CSS es heißt: element.style.backgroundImage = "URL"; Kann sein das du sonst auch noch fehler hast (mir ist das nur auf den ersten BLick aufgefallen)