CSS Link soll Hintergrund des Containers/ der Tablle ändern

Sumit · 7. Januar 2009

Guten Abend

Nachner stunde rumsuchen frag ich jetzt einfach mal hier und erklärs direkt an nem beispiel:
auch wenn ich keine Tabellen nutze, ich will es nur anschaulich erklären:

HTML:

<table id="gesamt">
<tr>
<td id="td-a">bla</td>
<td id="td-b">bla</td>
<td id="td-b">bla</td>
</tr>
</table>

Um es mal in eingedeutschter Programmiermanier zu sagen:

"on mouseover td-a, change background (oder id/class) von table"

Gleiches Prinzip nochmal:

HTML:

<div id="gesamt">
<a class="link1">Link1</a><br>
<a class="link1">Link1</a><br>
<a class="link1">Link1</a>
</div>

"Wenn a.link1:hover dann ändere klasse/ID/Background von div"
Und das auch bei den andren Links.

So dass ich eben verschiedene Hintergründe in einem Container/Tabelle anzeigen lassen kann, je nachdem über welchen link man fährt der sich im entsprechenden container/tabelle befindet.
Wie ihr euch denken könnt ändert sich bei mir immer nur der hintergrund der td bzw. des linktextes, was ja auch logisch ist.

Gibts ne Möglichkeit das per CSS umzusetzen?

Wenn nicht vermutlich Javascript. Wie würde es da aussehen?

lg

Sumit

Kindlyjosh · 8. Januar 2009

Ohne es getestet zu haben:

...
<head>
...
<script type="text/javascript">
function hover(state)
{
var obj = document.getElementById('gesamt');
if (state == "over")
{
obj.style.backgroundColor = "#000000";
}
else
{
obj.style.backgroundColor = "#ffffff";
}
}
</script>
...
</head>
<body>
...
<div id="gesamt" style="background-color: #ffffff;">
<a href="#" onmouseover="hover('over');" onmouseout="hover('out');">Link 1</a>
<a href="#" onmouseover="hover('over');" onmouseout="hover('out');">Link 2</a>
<a href="#" onmouseover="hover('over');" onmouseout="hover('out');">Link 3</a>
</div>
...
</body>
...

krizzelfix · 8. Januar 2009

Ja das sollte mit CSS gehen. Dazu musst du nur die Entsprechenden hover-Klassen anlegen.
Wenn von dem Div das Hintergrundbild geändert werden soll, könnte das im Internet Explorer Probleme geben.
Musst es einfach mal testen.

@Kindlyjosh, Willkommen im Forum.
Aber so wie es in seinem Post anhört, hat er es Schon in Javascript geschrieben und möchte es nun in CSS umsetzten.

Sumit · 8. Januar 2009

hi leute

nein ich habe es noch nirgens geschrieben.

Die entsprechenden Hoverklassen anlegen?
Wie kann ein a.beispielklasse:hover den hintergrund des divs ändern, in dem sich das a tag mit der beispielkalsse befindet? Das ist ja eben meine Frage

Und @ Kindlyjosh
erstmal willkommen im forum und herzlichen dank.

Ich kann nicht wirklich javascript doch ich glaube ich verstehe das Prinzip aber:

...
<head>
...
<script type="text/javascript">
function hover(state)
{
var obj = document.getElementById('gesamt');
if (state == "over")
{
obj.style.backgroundColor = "#000000";
}
else
{
obj.style.backgroundColor = "#ffffff";
}
}
</script>
...
</head>
<body>
...
<div id="gesamt" style="background-color: #ffffff;">
<a href="#" onmouseover="hover('over');" onmouseout="hover('out');">Link 1</a>
<a href="#" onmouseover="hover('over');" onmouseout="hover('out');">Link 2</a>
<a href="#" onmouseover="hover('over');" onmouseout="hover('out');">Link 3</a>
</div>
...
</body>
...

Wofür ist das ' hover('out') ' in:

onmouseout="hover('out');

Und "Over" ist in dem Fall nur der Parameter oder? Da könnt ich eintragen was ich will?

z.B (ohne es probiert zu haben):

<head>
...
<script type="text/javascript">
function hover(state)
{
var obj = document.getElementById('gesamt');
if (state == "over")
{
obj.style.backgroundColor = "#000000";
}

elseif (state == "oversecond")
{
obj.style.backgroundColor = "#eeeeee";
}

else
{
obj.style.backgroundColor = "#ffffff";
}
}
</script>
...
</head>
<body>
...
<div id="gesamt" style="background-color: #ffffff;">
<a href="#" onmouseover="hover('over');" onmouseout="hover('out');">Link 1</a>
<a href="#" onmouseover="hover('oversecond');" onmouseout="hover('out');">Link 2</a>
<a href="#" onmouseover="hover('over');" onmouseout="hover('out');">Link 3</a>
</div>
...
</body>

Kann es grade nicht probieren deßhalb probier ichs nicht einfach (^^,)

lg

krizzelfix · 8. Januar 2009

Auch das sollte mit CSS gehen.
Guck dir mal das an http://www.cssplay.co.uk/menus/.

Sumit · 8. Januar 2009

Die beilspiele auf der Seite kommen nah ran, aber sind nicht das was ich will.
Ein weiteren Text einblenden ist schonmal gut (und auch fast das was ich will) aber ich erklärs nochmal anhand folgender Bilder:

Ausgangsposition:

EDIT: Bilder mittlerweile entfernt /EDIT

Das habe ich in den Beispielen leider nicht gefunden.

Theoretisch muss es nichtmal der ganze div container sein. Es würde auch reichen, wenn sich bei a:hover drüber ein Container einblendet, der die komplette ganze breite und eine gewisse höhe einnimmt. Dazu schau ich jetzt nochmal in den beispielen aber ich möchte trotzdem wissen, ob das auf den Bildern dargestellte per CSS möglich ist.

mfg

krizzelfix · 8. Januar 2009

Ok, hast recht. Dazu fällt mir auch keine Lösung ohne Javascript ein.

Sumit · 11. Januar 2009

ok hab den Javascript Code nun ausprobiert. Funkioniert alles genauso wie es soll. Danke vielmals!

Suche

CSS Link soll Hintergrund des Containers/ der Tablle ändern

Sumit

Lt. Junior Grade

Kindlyjosh

Newbie

krizzelfix

Commander

Sumit

Lt. Junior Grade

krizzelfix

Commander

Sumit

Lt. Junior Grade

krizzelfix

Commander

Sumit

Lt. Junior Grade

Ähnliche Themen