Zellenhintergrund per Mouseover einblenden

[Jan Wermann]

Hallo,

wie macht man das ?
<td OnMouseover="?????????????" OnMouseout="?????????????">Hallo</td>
soll im Hintergrund bei Mouseover zeigen, und bei Mouseout entfernen.

Grüsse, Jan

[Dieter Raber]

Hallo Jan,

soll im Hintergrund bei Mouseover zeigen, und bei Mouseout entfernen.

Soll was zeigen?

Dieter

[Jan]

Hi Dieter,

Soll was zeigen?

sorry, soll bei Mouseover ein Bild im Hintergrund zeigen, und jenes bei Mouseout entfernen.

Greetz

[Marc Reichelt]

Hi!

Hi Dieter,

Soll was zeigen?
sorry, soll bei Mouseover ein Bild im Hintergrund zeigen, und jenes bei Mouseout entfernen.

Dazu brauchst du nicht mal die JavaScript-Events, das Ganze geht viel besser nur mit CSS:

td.deineklasse{
 background-image:url(mausaus.jpg);
}

td.deineklasse:hover{
 background-image:url(mausdrauf.jpg);
}

(ungetestet, aber das Prinzip ist klar)

cu

Marc Reichelt || http://www.marcreichelt.de/

[Dieter Raber]

Hallo Marc,

Ich bin nicht sicher, aber ich meine, td:hover ginge im IE nicht, war da nicht was?

Dieter

[Marc Reichelt]

Hi!

Hallo Marc,

Ich bin nicht sicher, aber ich meine, td:hover ginge im IE nicht, war da nicht was?

Und wenn nicht, dann macht man das alles halt mit dem a-Tag... *g*

cu

Marc Reichelt || http://www.marcreichelt.de/

[Dieter Raber]

Hallo,

Und wenn nicht, dann macht man das alles halt mit dem a-Tag... *g*

Schummler... ;-)

Dieter

[Marc Reichelt]

Hi!

Hallo,

Und wenn nicht, dann macht man das alles halt mit dem a-Tag... *g*
Schummler... ;-)

Stimmt ja gar nicht - meine Webseite verwendet das Ganze nur für die Hintergrundfarbe der Links - na ja, zumindest dem Code nach... *g*

cu

Marc Reichelt || http://www.marcreichelt.de/

[Jan]

öhm, danke für all die Antworten :)
aber welches benutze ich denn jetzt am besten ?
Ist das mit dem Hoover jetzt IE kompatibel, oder nicht ?

Grüsse, Jan

p.s. es sind mehrere Zellen mit verschiedenen Hintergrundbildern...

[Jan]

Ich habe noch was vergessen,
wenn ich z.B. jetzt

onmouseover="this.backgroundImage='url(meinbild.gif)';"

benutzem, wie kann ich das Bild denn bei onmouseout wieder entfernen ?

nochmals Grüsse, Jan

[Dieter Raber]

Hallo Jan,

onmouseover="this.backgroundImage='url(meinbild.gif)';"

benutzem, wie kann ich das Bild denn bei onmouseout wieder entfernen ?

Gute Frage, probier mal this.backgroundImage='none'?
Weiss ich echt nicht...

Gruß,

Dieter

[Jan]

okay, dank Dir vielmals, jetzt weiss ich wenigstens, wo ich weiter rumprobieren kann ;)

Ach ich Chaot, jetzt haben sich die Beiträge total schlimm überschnitten ... argh ... sorry

Viele Grüsse, Jan

[Dieter Raber]

Hallo Jan,

Ach ich Chaot, jetzt haben sich die Beiträge total schlimm überschnitten ... argh ... sorry

Macht nix, kuck mal weiter oben, da hab ich Dir noch die Geschichte mit Marcs Konzept erklaert

Gruß,

Dieter

[Jan]

Hallo nochmals,

ich habe jetzt alle Möglichkeiten hier getestet, aber leider funktioniert keine :O

viele Grüsse, Jan

[Tobias Kloth]

Hallo Dieter,

benutzem, wie kann ich das Bild denn bei onmouseout wieder entfernen ?
Gute Frage, probier mal this.backgroundImage='none'?

richtig, der wert für kein Hintergrundbild ist 'none': http://www.w3.org/TR/CSS21/colors.html#propdef-background-image (in selfhtml steht es nicht drin)

Grüße aus Nürnberg
Tobias

[Jan]

richtig, der wert für kein Hintergrundbild ist 'none'

Hi Tobias,

na super, dann wäre jetzt ja alles geklärt

Nochmals Dank an alle Hilfbereiten Nachtschwärmer ;)
Eine erholsame und trotzdem lehrreiche Nacht wünsche ich euch noch

Mit freundlichen Grüssen, Jan

[Ingo Turski]

Hi,

richtig, der wert für kein Hintergrundbild ist 'none': http://www.w3.org/TR/CSS21/colors.html#propdef-background-image (in selfhtml steht es nicht drin)

so ganz richtig ist das nicht und "nichts" muß ja nicht überall in Selfhtml erwähnt werden..;-)

background-image ist eine CSS-Eigenschaft und diese wird in Javascript über style.backgroundImage angesprochen.

Aber da die Zelle ja einen Link enthält, kann man getrost auf Javascript verzichten, wie ja auch gerade gesagt wurde.
Konkret:
td a:hover { display:block; background-image: url(bildname.gif; }

freundliche Grüße
Ingo

[Jan Wermann]

Hi Ingo,

background-image ist eine CSS-Eigenschaft und diese wird in Javascript über style.backgroundImage angesprochen.

Aber da die Zelle ja einen Link enthält, kann man getrost auf Javascript verzichten, wie ja auch gerade gesagt wurde.
Konkret:
td a:hover { display:block; background-image: url(bildname.gif; }

Hey, danke :)

habe es ausprobiert, es funktioniert zwar, doch leider ist das Bild jetzt nicht auf der vollen Grösse, es scheint so, als würde es von der Grösse des Links abhängig sein, und das sieht irgendwie unschön aus, d.h. das Bild wird oberhalb und unterhalb des Link-Textes abgeschnitten.

Vielleicht weiss da jemand Abhilfe ?

freundliche Grüsse, Jan

[Ingo Turski]

Hi,

habe es ausprobiert, es funktioniert zwar, doch leider ist das Bild jetzt nicht auf der vollen Grösse, es scheint so, als würde es von der Grösse des Links abhängig sein

in IE, ja. Wenn Du auch hier eine bestimmte width und height haben willst, dann gebe sie doch ganz einfach noch mit an...

freundliche Grüße
Ingo

[Jan]

Hi Ingo,

danke, jetzt funktioniert es einwandfrei :)

super, das wäre doch mal was für den FAQ oder Tutorials, ne ?

Viele Grüsse, und eine gute Nacht, bin jetzt so was von müde *gäähn*

[Jan]

Danke Dieter, das sieht auch einfach aus, nur leider verstehe ich nicht, wie ich das einbinde (das Beispiel von Marc).
Sorry, habe von CSS nur minimale Ahnung (eher keine)
nur scheint es mir die einzigste Möglichkeit zu sein, ohene Java Script zu benutzen ...

Grüsse, Jan

[Dieter Raber]

Hallo Jan,

nur leider verstehe ich nicht, wie ich das einbinde (das Beispiel von Marc).

Aber das ist ganz simpel, du schreibst im <head>-Bereich
<style type="text/css">
td.meineKlasse /* bedeutet: die Zellen mit der Klasse 'meineKlasse' im Normalzustand */
{
  background-image:url(../bilder/meinBild); /* Pfad zu dem Bild */
}

td.meineKlasse:hover /* bedeutet: dieselben Zellen beim Mausueberfahren */
{
  background-image:url(../bilder/meinBild); /* Pfad zu dem Bild */
}
</style>

und unten in der Tabelle
<td class="meineKlasse">
Das war's

Gruß,

Dieter

[Dieter Raber]

Hallo Jan,

Du musst natuerlich verschiedene Bilder fuer die Zustaende Normal und Hover angeben sonst hat das wenig Sinn, kommt halt vom vielen  Copy & Paste ;)

Gruß,

Dieter

[Jan]

Hallo Jan,

Du musst natuerlich verschiedene Bilder fuer die Zustaende Normal und Hover angeben sonst hat das wenig Sinn, kommt halt vom vielen  Copy & Paste ;)

»»

Hehe, das ist klar ;)

aber ich brauche kein normalbild, das befindet sich ja schon im Hintergrund der Website

Viele Grüsse, Jan

[Jan]

Aber das ist ganz simpel, du schreibst im <head>-Bereich
<style type="text/css">
td.meineKlasse /* bedeutet: die Zellen mit der .

.
.
.
wow, das ist wirklich einfach :) nur muss ich da wohl auch probieren, ob das mit "none" gesetzt werden kann .

Nochmals vielen Dank, das hast Du mir echt toll erklärt :)

Ich denke, damit kann ich was anfangen, falls ich es nicht mit "none" hinbekomme, poste ich hier nochmal ;)

Jan

[Detlef G.]

Hallo Jan

wow, das ist wirklich einfach :)

Nur leider kann der IE das nicht.

nur muss ich da wohl auch probieren, ob das mit "none" gesetzt werden kann .

Das "none" brauchst du bei der CSS-Variante nicht.
Du lässt einfach folgenden Bereich weg:

td.meineKlasse /* bedeutet: die Zellen mit der Klasse 'meineKlasse' im Normalzustand */
{
  background-image:url(../bilder/meinBild); /* Pfad zu dem Bild */
}

Wozu sollen die Hovergrafiken dienen?
Sollen diese nur einfach so angezeigt werden oder enthalten die
entsprechenden Tabellenzellen einen Link?

Auf Wiederlesen
Detlef

[Jan]

Hallo Jan

wow, das ist wirklich einfach :)

Nur leider kann der IE das nicht.

habe das schon gerade bemerkt :(

nur muss ich da wohl auch probieren, ob das mit "none" gesetzt werden kann .

Das "none" brauchst du bei der CSS-Variante nicht.
Du lässt einfach folgenden Bereich weg:

td.meineKlasse /* bedeutet: die Zellen mit der Klasse 'meineKlasse' im Normalzustand */
{
  background-image:url(../bilder/meinBild); /* Pfad zu dem Bild */

okay, danke :)

Wozu sollen die Hovergrafiken dienen?
Sollen diese nur einfach so angezeigt werden oder enthalten die
entsprechenden Tabellenzellen einen Link?

Ja, die Zellen enthalten einen Link.

Auf Wiederlesen
Detlef

Ebenso :)

[Tobias Kloth]

Hallo Jan,

Sollen diese nur einfach so angezeigt werden oder enthalten die
entsprechenden Tabellenzellen einen Link?
Ja, die Zellen enthalten einen Link.

dann verpass den Links das Hintergrundbild (und display:block; und width:100%;) - das versteht sogar der IE :-)

Grüße aus Nürnberg
Tobias

[Jan]

Hallo Tobias,

dann verpass den Links das Hintergrundbild (und display:block; und width:100%;) - das versteht sogar der IE :-)

okay, habe ich gemacht, tut es aber trotzdem irgendwie nicht,
ich poste mal den Quelltext, da muss was faul sein :
.
.
.
<style type="text/css">
td.naviback:hover
{
 background-image: url(../Elemente/JPG/NAV_A_mover.jpg);
 font-size: 18px;
 font-family: Arial, Helvetica, sans-serif;
 display: block;
 width:100%;
}
</style>
</head>
<body>
<table width="116" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="116" height="29" align="center" valign="middle"><a class="naviback">Home</a></td>
  </tr>
</table>
</body>
</html>

Grüsse, Jan

[Tobias Kloth]

Hallo Jan,

td.naviback:hover

hiermit bekommst du nur td-Elemente mit der Klasse naviback - du musst aus dem td ein a machen.

<table width="116" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="116" height="29" align="center" valign="middle"><a class="naviback">Home</a></td>
  </tr>
</table>

Für Linklisten sind Tabellen nicht gedacht, ich würde das etwa so machen (einfach runtergetippt und ungetestet):
 <ul id="nav">
  <li><a href="...">Home</a></li>
  ....
 </ul>
und dann im CSS-Teil:
 #nav { list-style-type:none; }
 #nav a { display:block; width:100%; }
 #nav a:hover { background-image:url(bild.png); }
(ggf. musst du die Liste noch weiter formatieren (Breite, Textausrichtung u.ä.)

Grüße aus Nürnberg
Tobias

[Jan Wermann]

Hallo Tobias,

td.naviback:hover
hiermit bekommst du nur td-Elemente mit der Klasse naviback - du musst aus dem td ein a machen.

ah, ja, das ist ein Fehler von mir ... danke, es funktioniert aber trotzdem nicht :(

Für Linklisten sind Tabellen nicht gedacht, ich würde das etwa so machen (einfach runtergetippt und ungetestet):
<ul id="nav">
  <li><a href="...">Home</a></li>
  ....
</ul>
und dann im CSS-Teil:
#nav { list-style-type:none; }
#nav a { display:block; width:100%; }
#nav a:hover { background-image:url(bild.png); }

...

danke für Deine Mühe, aber es muss leider in einer Zelle sein, da die ganze Seite auf einer Tabelle basiert, mit total vielen anderen Tabellen etc.
Durch benzútzen einer Liste würde ich mir das gesamte Design zerschiessen ;)

Viele Grüsse, Jan

[Tobias Kloth]

Hallo Jan,

danke für Deine Mühe, aber es muss leider in einer Zelle sein, da die ganze Seite auf einer Tabelle basiert, mit total vielen anderen Tabellen etc.
Durch benzútzen einer Liste würde ich mir das gesamte Design zerschiessen ;)

dann verpass doch einfach der Tabelle die ID 'nav', dass sollte mit dem gleichen CSS-Code auch funktionieren (das list-style-type:none; brauchst du dann natürlich nicht)

Grüße aus Nürnberg
Tobias

[Jan]

Hallo Tobias,

danke nochmals, ich habe mich mittlerweile für den Vorschlag von Ingo entschieden, der funzt auch einwandfrei ...

Mit freundlichen Grüssen, Jan

[Dieter Raber]

Hallo Jan,

Tobias hat jedenfalls rechter als ich, um url(...) gehoeren Anfuehrungszeichen. Ob der Vorschlag von Marc auch im IE funktioniert, probierst Du halt am besten mal an einem kurzen Beispiel aus. Wenn das geht, ist es die beste Variante, weil unahaengig von Javascript.

Dieter

[MudGuard]

Hi,

Tobias hat jedenfalls rechter als ich, um url(...) gehoeren Anfuehrungszeichen.

Nein, die sind optional.
Zitat:
The format of a URI value is 'url(' followed by optional whitespace followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. The two quote characters must be the same.

cu,
Andreas

[Tobias Kloth]

Hallo Andreas,

Tobias hat jedenfalls rechter als ich, um url(...) gehoeren Anfuehrungszeichen.
Nein, die sind optional.

Hier sind nicht die Anführungszeichen innerhalb von url() gemeint, sondern die Anführungszeichen um url() wenn man das Hintergrundbild per js setzen will.

Grüße aus Nürnberg
Tobias

[MudGuard]

Hi,

Hier sind nicht die Anführungszeichen innerhalb von url() gemeint, sondern die Anführungszeichen um url() wenn man das Hintergrundbild per js setzen will.

Hab ich später dann auch gemerkt, nachdem ich dann im anderen Ast die entsprechenden Postings gelesen hatte.

Ich bin unschuldig!

Dieter ist schuld, weil der das hier so zusammenhanglos im falschen Ast geschrieben hat!

cu,
Andreas

[Dieter Raber]

Hallo Andreas,

Ich bin unschuldig!

Dieter ist schuld

Immer auf die Kleinen!
Um 00:30 kann man schon mal ein bisschen den Ueberblick verlieren, oder?

Dieter

[Dieter Raber]

Hallo,

Ok, in diesem Fall muss es heissen onmouseover="this.backgroundImage=url(meinbild.gif)"
Naeheres unter http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften

Dieter

[Tobias Kloth]

Hallo Dieter,

onmouseover="this.backgroundImage=url(meinbild.gif)"

onmouseover="this.backgroundImage='url(meinbild.gif)';"

Grüße aus Nürnberg
Tobias

[Dieter Raber]

Hallo Tobias,

onmouseover="this.backgroundImage=url(meinbild.gif)"
onmouseover="this.backgroundImage='url(meinbild.gif)';"

Stimmt, mir kam das auch schon ein bisschen seltsam vor, aber ich mach solche Spielchen so gut wie nie.

Dieter

[Dieter Raber]

Hallo Tobias,

da Du das offenbar kannst, wie macht das wieder in den Forumseinstellungen, dass beim Antwortposting der Name des Adressaten eingesetzt wird. Da war doch irgendwas mit
Hallo $foo

Dieter

[Tobias Kloth]

Hallo Dieter,

da Du das offenbar kannst,

mhh... was hat das jetzt mit dem Thema zu tun? :-)

wie macht das wieder in den Forumseinstellungen, dass beim Antwortposting der Name des Adressaten eingesetzt wird. Da war doch irgendwas mit
Hallo $foo

»{$name}« ist der ganze Name und »{$vname}« der Name bis zum ersten Leerzeichen (als idR der Vorname).

Grüße aus Nürnberg
Tobias

[Dieter Raber]

Hallo Tobias,

mhh... was hat das jetzt mit dem Thema zu tun? :-)

nicht so richtig viel - was beweist, wie flexibel wir sind ;-)

»{$name}« ist der ganze Name und »{$vname}«

Aha, genau das wollte ich wissen, vielen Dank

Grüße aus Nürnberg

Grüße aus Saarbrücken

Dieter

[Marc Reichelt]

Hallo Tobias,

»{$name}« ist der ganze Name und »{$vname}« der Name bis zum ersten Leerzeichen (als idR der Vorname).

Einen riesigen Dank an dich - was man nachts um die Zeit nicht doch noch alles lernen kann... *g*

cu

Marc Reichelt || http://www.marcreichelt.de/