# Hover -> Tabellen BACKGROUND/Color



## nentus (22. Februar 2004)

Ich möchte einen effekt hinbekommen wie bei dieser seite.
also erst ist der bg grau und der text dunkel und bei hover schließlich bg sehr dunkel und dann die schrift weiß.

wie funktioniert das


----------



## Pardon_Me (22. Februar 2004)

Weiß nicht mehr, von wo das Script ist...war irgendwo gratis...


```
<head>
...

<script language="JavaScript">
<!--
function pviiW3Cbg(obj, pviiColor) { //v1.1 by Project VII
	obj.style.backgroundColor=pviiColor
}
//-->
</script>

...

</head>

<body>
...

<td bgcolor="#farbe"  onMouseOver="pviiW3Cbg(this, '#farbe')" onMouseOut="pviiW3Cbg(this, '#farbe')"><a href="seite.htm">link</a></td>

...

</body>
```
Probiers mal mit dem...


----------



## nentus (22. Februar 2004)

Ja, aber ich der BG ist ein background pic:

So ist er standart






Und so soll er aussehen beim HOVER






Der TExt ist beim Standart dunkel, soll dann aber beim Hover weiß werden.
Der Text soll aber dann auch weiß werden, wenn ich mit der Maus nur in der Tabellen Zelle bin und nicht direkt auf dem Link.
Zudem soll noch ein 3pixel x 3pixel großer button, welcher sich vor dem link befindet, anders färben.

alles etwas kompliziert, aber ich würde mich über hilfe freuen


----------



## Pardon_Me (22. Februar 2004)

> _Original geschrieben von nentus _
> *Ja, aber ich der BG ist ein background pic:
> 
> So ist er standart
> ...




Aso, verstehe...
Dann könntest du einfach ein Mouse_Over-Script mit zwei Pics verwenden...

Wenn du allerdings keine Pics verwenden willst, sondern nur Text, brauchst du ein anderes Script, von dem ich allerdings keine Ahnung habe


----------



## christhebaer (22. Februar 2004)

Hallo!

Soll der Text dynamisch sein? Oder ist der festgelegt?
Wenn ja, kannst du die jeweiligen Zustände als Pics ablegen,
und dann per JavaScript je nach MausAktion die Bilder tauschen.

Hier mal ein Script dafür:

```
// Im Head-Bereich die Bilder vorausladen
//Als Beispiel habe ich es mal mit zwei Bildern gemacht.

<script language="JavaScript">
<!--
var bildan = new Array();
var bildaus = new Array();
var bildclick = new Array();

bildan[0] = new Image();
bildan[0].src = "bild1_0.gif";
bildaus[0] = new Image();
bildaus[0].src = "bild1_1.gif";
bildclick[0] = new Image();
bildclick[0].src = "bild1_2.gif";

bildan[1] = new Image();
bildan[1].src = "bild2_0.gif";
bildaus[1] = new Image();
bildaus[1].src = "bild2_1.gif";
bildclick[1] = new Image();
bildclick[1].src = "bild2_2.gif";

var geklickt = null;

function an(i)
        {
     	if (geklickt != i)
     	document.images[i].src=bildan[i].src;
        }



function aus(i)        
        {
     	if (geklickt != i)
     	document.images[i].src = bildaus[i].src;
        }



function Wechsel(i,a)
        {
            if (geklickt != i)
            {
                document.images[i].src = bildclick[i].src;
                document.images[a].src = bildaus[a].src;
             }
            geklickt = i;
}
//-->
</script>


//Im Body vergibst du dem Bildern folgende Funktionen:

<a href="javascript: Wechsel(0,1);" onFocus="if(document.all) this.blur();" onMouseOver="an(0);" onMouseOut="aus(0);"> <img src="bild1_1.gif"></a>

<a href="javascript: Wechsel(1,0);" onFocus="if(document.all) this.blur();" onMouseOver="an(1);" onMouseOut="aus(1);"> <img src="bild2_1.gif"></a>
```

Ich hoffe das hilft weiter?


Mit nettem Gruß
christhebaer


----------



## nentus (22. Februar 2004)

Pics für die txtlinks will ich net unbedingt.


```
onMouseOver="pviiW3Cbg(this, '#4682B4')" onMouseOut="pviiW3Cbg(this, '#F4F4F4')"
```

Das klappt auch soweit, aber ich möchte, das der LINK sofort weiß wird und nicht erst, wenn ich "genau" mit der maus daraufgehe. 

er soll sofort die hoverfunktion einschalten sobald ich mit der maus in der tabellen zelle bin.


----------



## Quaese (23. Februar 2004)

Hi,

schau mal, ob Dir das weiterhilft.

Das JavaScript in den <head>-Bereich kopieren ... dann sollte der Hover-Effekt für die Tabellenzelle funktionieren.


```
<script language="javascript">
  <!--
  function selfHover(strButtonID, strLinkID, isHover){
  	var myButtonObj = document.getElementById(strButtonID);
  	var myLinkObj = document.getElementById(strLinkID);

    if(isHover == true){
	    // Style-Eigenschaften verändern
	    myButtonObj.style.backgroundColor = "#4C5963";
	    myLinkObj.style.color = "#D1D8D7";
    }else{
	    // Style-Eigenschaften verändern
	    myButtonObj.style.backgroundColor = "#D1D8D7";
	    myLinkObj.style.color = "#38405F";
    }
  }
  -->
</script>

<table><tr>
<td id="button" onMouseOver="selfHover('button', 'link', true);" onMouseOut="selfHover('button', 'link', false);" style="border: 1px solid black;width: 60px; height: 20px; background-color: #D1D8D7; text-align: center;">
	<a id="link" style="color: #38405F; font-family: Verdana; font-weight: bold; font-size: 8pt; text-decoration: none;" href="#">Link</a>
</td></tr></table>
```

Wichtig sind die *ID's* im TD- und A-Tag. Mit den Bezeichnungen, die Du hier vergibst, musst Du die Funktionen hinter *onMouseOver* und *onMouseOut* aufrufen.

Ich hoffe, das war's, was Du gesucht hast ... gute Nacht


----------



## nentus (23. Februar 2004)

Jap, das war es was ich gesucht habe. Vielen Dank!


----------



## xollo (23. Februar 2004)

Hi,
oder probier es doch mal so

```
<table border=0 width=150 cellspacing=0 cellpadding=4>
<tr>
       <td align=center background="bg1.gif" onmouseout="this.style.background='url(bg1.gif)',this.style.color='';" onmouseover="this.style.background='url(bg2.gif)',this.style.color='#ffffff';">mit Hintergrundbild</td>
</tr>
<tr>
	   <td align=center bgcolor="#c0c0c0" onmouseout="this.style.backgroundColor='',this.style.color='';" onmouseover="this.style.backgroundColor='#333333',this.style.color='#ffffff';">ohne Hintergrundbild</td>
</tr>
</table>
```

Klappt auch mit NN und Opera.

xollo


----------

