Hover -> Tabellen BACKGROUND/Color

Status
Nicht offen für weitere Antworten.
nentus

nentus

Mitglied
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
 
Weiß nicht mehr, von wo das Script ist...war irgendwo gratis...

Code: 
<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...
 
Ja, aber ich der BG ist ein background pic:

So ist er standart
bg1.gif


Und so soll er aussehen beim HOVER
bg2.gif



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 :)
 
Original geschrieben von nentus
Ja, aber ich der BG ist ein background pic:

So ist er standart
bg1.gif


Und so soll er aussehen beim HOVER
bg2.gif



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 :)
Zum Vergrößern anklicken....


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 :)
 
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:
Code: 
// 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
 
Pics für die txtlinks will ich net unbedingt.

PHP: 
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.
 
Hi,

schau mal, ob Dir das weiterhilft.

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

Code: 
<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
 
Hi,
oder probier es doch mal so
PHP: 
<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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück