Mouseover Navigation ?

[Hater]

Hallo, ;Jump

ich wollte fragen ob mir vieleicht jemand weiterhelfen könnte da ich ganze zeit auf der suche bin nach einem html code für meine Homepage navigation.

Es soll ungefähr so aussehen:

Wenn ich das Menü nicht berührt wrd ist das hintergrund von allen Tabellen weiss aber wenn man ein Kästchen berührt das der Hintergrund dann grau wird aber sich an der Schrift nichts ändert.

Geht das in HTML ? Habe dies schon auf einigen Seiten gesehen aber bin mittlerweile stutzig das es geht da die Seiten alle mit PHP gemacht sind.
Aber ich hoffe es klappt auch wenns komplizierter wird :roll:

Danke im Vorraus !!! :-|

 

[nichtsgeht]

Mit JavaScript könnte das gehen

function Farbe (wie) {
  document.getElementById("id_name").background-color = wie;
}

(nicht getestet)

 

[holli]

Hi Hater,

mit Script im head:

<script type="text/javascript">
function Farbe (wie) {
  document.getElementById('1').style.backgroundColor = wie;
}
</script>

und im body:

<table id="1" onmouseover="Farbe ('#808080')" onmouseout="Farbe ('#ffffff')">

oder vereinfacht ohne script im head:

<table onmouseover="this.style.backgroundColor='#808080'" onmouseout="this.style.backgroundColor='#FFFFFF'">

gruß
holli

 

[BcF]

Wozu denn JavaScript wenns auch mit CSS geht?

<!-- In den Head -->
<style type="text/css">
  #menu {
    background:#FFF;
  }
  #menu:hover {
    background:#CCC;
  }
</style>

<!-- Das Menü -->
<ul id="menu"> <!-- Statt <ul> kann natürlich auch <div>, <table> oder sonstwas verwendet werden -->

Macht das gleiche wie Hollis Vorschlag.

 

[threadi]

Hollis Vorschlag hat einen Makel: IDs dürfen nicht mit einer Ziffer beginnen. Also diese besser "content" nennen.

BcFs Vorschlag funktioniert nicht mit dem IE, da der die hover-Pseudoklasse nur bei Links versteht. Und alles mit einem Link umgeben käme etwas ungünstig.

 

[R3van]

Hi also ich hab nicht viel Zeit(muss Freundin ein Geschnk kaufen), deswegen mal eben auf die Schnelle

CSS wäre wohl die beste Möglichkeit, da dein Client später kein java benötigt... Problem an der Sache, dass du unter IE < 7 kein Hovereffekt erzeugen kannst, da IE < 7 diesen effekt nicht auf Tabellen etc. anwenden kann. Der Fuchs kann das wunderbar halt eben nur nicht IE < 7

Somit dürfte deine einzige Möglichkeit Java bleiben.. warte noch einige Zeit bis IE 7 standart geworden ist.. dann kannst du ohne Probleme das ganze über CSS machen

mfg. R3van

 

[threadi]

Nicht Java sondern JavaScript. Sind 2 Paar Schuhe.

 

[holli]

hi @ threadi,

Hollis Vorschlag hat einen Makel: IDs dürfen nicht mit einer Ziffer beginnen.

War reiner Zufall dass mit der 1 als ID. Aber wieso dürfen sie nicht mit einer Ziffer beginnen?

Gruß
holli

 

[nichtsgeht]

Aber wieso dürfen sie nicht mit einer Ziffer beginnen?

Ist nun mal so

Sie ...

• dürfen keine Leerzeichen und deutsche Umlaute enthalten,
• dürfen nicht mit einer Ziffer oder einem Bindestrich beginnen
• sollten keinen Unterstrich enthalten und nicht zu lang sein.

 

[sysop]

für buttons habe ich das in verwendung, klappt recht schön.

$mouse_move_class = " onmouseover=\"this.className='over'\" onmouseout=\"this.className='buttons'\">";
echo '<input type="submit" class="buttons" value="klickklack"'.$mouse_move_class;

dann noch 2 einträge ins css (.over und .buttons) und schon geht´s