Delphi-PRAXiS - HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Seite 2 von 2

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - HTML: Anderes Hintergrundbild bei Zelle bei MouseOver (https://www.delphipraxis.net/86078-html-anderes-hintergrundbild-bei-zelle-bei-mouseover.html)

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Wenn man für die Links display: block festlegt und den Innenabstand (padding) der Tabellenzellen und den Außenabstand (margin) der Links auf 0 setzt, füllen die Links die ganze Tabellenzelle aus.
Dann dürfte es nicht mehr auffallen, wenn das Hintergrundbild für den Link und nicht die Zelle festgelegt ist.

Das passende CSS dazu wär dann:

Code:

			td {

  padding: 0;

}

a {

  display: block;

  margin: 0;

  background: url('Hintergrundbild.jpg');

}

a:hover {

  background: url('anderes%20Hintergrundbild.jpg');

}

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Also, so klappen tut es leider nicht.
Könnt ihr mir sagen, was denn mein Fehler da drin ist?

Code:

			<tr>

  <td  onmouseover="this.style.background='url(../zelle26select.jpg)'"  onmouseout="this.style.background='url(../zelle26.jpg)'" width="100%" height="26">

    [url="http://alexander.sam-host.net/"] Home[/url]

  </td>

</tr>

Um alle Missverständnisse aufzuklären; hier ist der Code der über dieser Zelle ist:

Code:

			<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Gemeinsamer linker Randbereich</title><meta name="Microsoft Theme" content="none">

<meta name="Microsoft Border" content="none">

</head><body background="../images/links1.gif">

<p align="center">

</p>

<p align="center">

</p>

<style type="text/css">

<!--

.Navlink {COLOR: #000000; TEXT-DECORATION: none; font-family: times; font-size: 12pt; font-weight: bold;}

a:link.Navlink  {color : #000000;}

a:visited.Navlink  {color : #000000;}

a:active.Navlink  {text-decoration: none;}

a:hover.Navlink  {text-decoration: none;}

-->

</style>

<table border="1" width="160" cellspacing="0" cellpadding="4" style="border-collapse: collapse" bordercolor="#111111" >

<tr>

  <td  onmouseover="this.style.background='url(../zelle26select.jpg)'"  onmouseout="this.style.background='url(../zelle26.jpg)'" width="100%" height="26">

    [url="http://alexander.sam-host.net/"] Home[/url]

  </td>

</tr>

<tr>

Gruß Alexander

PS: @Thorben77. Ich probiere es aus. Danke.

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Vielleicht solltest du auch noch am Anfang des Dokuments seinen/einen Dokumenttyp angeben, dann zwingst du die Browser nicht sofort in den Quirksmode:

Code:

			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Hi, ich weis nicht was das bewirkt hat. Jetzt klappt irdendwie alles.
Also auch die Zellen, die ich von anfang an nicht verändert habe sind machen jetzt genau das, was ich von anfang an wollte.

Also, nochmal im Klartext: Ich habe den Ratschlag von Thorben77 umgesetzt und plötzlich klappt alles.

Also danke für eure Hilfe. Ich hoffe, dass ich jetzt selbst zurechtkomme.

Vielen Vielen Dank, dass ihr euch so bemüht habt, und ich nun mein Ziel erreicht habe.

Tschüss

Alexander

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Zitat:

Zitat von Alexander Roth

Ich habe den Ratschlag von Thorben77 umgesetzt und plötzlich klappt alles.

In dem Zusammenhang wäre der verwendete Browser auch noch von Bedeutung gewesen. Gerade bei CSS gibt es teils gravierende Unterschiede.

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

firefox 1.5.0.9. Und der unterstützt doch css voll. Oder?

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Im Firefox funktionieren CSS-Hover-Eigenschaften aber so weit ich weiß auch für andere Elemente als Links :gruebel: . (Wobei ich mir nicht sicher bin, ob das im CSS-Standard vorgesehen ist.)
Eigentlich hätte ich jetzt auf den IE getippt, der lässt :hover glaub ich nur bei Links zu.

Nachtrag:

Zitat:

Zitat von Alexander Roth

Und der unterstützt doch css voll. Oder?

Ich glaube, kein Browser unterstüzt wirklich alles, was CSS hergibt. Wobei dann auch noch die Frage bleibt, welche CSS-Version unterstützt wird.

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Also für die die diesen Thread mal lesen: Ich habe es nun aus einer Kombination von Codes (die ihr mir gegeben habt) zusammengebastelt.
Auch wenn es vielleicht CSS-technisch nicht elegant ist, es funktioniert und nur das ist für mich wichtig.

Der Style Abschnitt:

XML-Code:

			<style type="text/css">

<!--

.Navlink {COLOR: #000000; TEXT-DECORATION: none; font-family: times; font-size: 12pt; font-weight: bold;}

a:link.Navlink  {color : #000000;}

a:visited.Navlink  {color : #000000;}

a:active.Navlink  {text-decoration: none;}

a:active.Navlink  {font-size: 15pt;}

a:active.Navlink  {font-weight: bold;}

a:active.Navlink  {font-family: Times New Roman;}

a:hover.Navlink  {text-decoration: none;}

-->

</style>

<style type="text/css">

<!--

td.norm

{

  font-size: 15pt;

  font-weight:bold;

  line-height: 1.55;

  padding: 0;

  width: 100%;

  display: block;

  margin: 0;

  background-image: url('../zelle26.jpg');

}

td:hover.norm

{

  background-image: url('../zelle26select.jpg');

}

//-->

</style>

Eine Zelle:

XML-Code:

			<tr>

  <td class="norm">[url="http://alexander.sam-host.net/"] Home[/url]</td></tr>

Vielen Dank nochmals an euch.

Gruß Alexander

Seite 2 von 2