Javascript Rollover

L

lordimac

Mitglied
Mahlzeit

Ich habe einen Zellen Rollover Effekt per Javascript realisiert.

Folgendermaßen ist mein script.js aufgebaut:

function mOver3(cell) {
if (!cell.contains(event.fromElement)) {
cell.style.cursor = 'hand';
cell.style.backgroundColor='#6C86A8';
}
}
function mOut3(cell) {
if (!cell.contains(event.toElement)) {
cell.style.cursor = 'default';
cell.style.backgroundColor='#657D9D';
}
}
function mClick(cell) {
if(event.srcElement.tagName=='TD') {
cell.children.tags('A')[0].click();
}
}
Zum Vergrößern anklicken....

Der Code meiner Zelle sieht so aus:
<td width="150" height="19" bgcolor="#657D9D" onMouseOver="mOver3(this)" onMouseOut="mOut3(this)" onClick="mClick(this)"><a href="#" class="a">Text</a></td>
Zum Vergrößern anklicken....

So, Tabellenhintergrund bei nem hover wechseln klappt wunderbar. Ich habe zusätzlich per CSS ein Schrift hover realisiert. Dieser geht allerdings nur, wenn man über dem Text ansich ist.

Nun meine Frage:
Lässt sich per diesem javascript auch irgendwie machen, dass sich die Textfarbe ändert, wenn man irgendwo mit der Maus über der Zelle ist ? Also an Stellen wo sich sonst nur der Hintergrund ändern würde.

Thx für jeden Tip

MfG lordimac
 
Zuletzt bearbeitet:
Das Ganze kann man auch ohnr JavaScript, nur mit CSS machen:
Code: 
 1: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2: <html>
 3:     <head>
 4:         <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
 5:         <title>Link-Hover in Tabelle</title>
 6: 
 7:         <style type="text/css">
 8:         a.TableLink:link, a.TableLink:active, a.TableLink:visited {
 9:           width: 100%;
10:           height: 100%;
11:           text-decoration: underline;
12:           color: #000000;
13:           background-color: #FFFFFF;
14:           display: block;
15:         }
16: 
17:         a.TableLink:hover {
18:           width: 100%;
19:           height: 100%;
20:           text-decoration: none;
21:           color: #FFFFFF;
22:           background-color: #000000;
23:           display: block;
24:         }
25:         </style>
26:     </head>
27:     <body>
28:         <h1>Link-Hover in Tabelle</h1>
29:         <table border="1" style="width:300px;height:100px;">
30:             <tr style="height:50px;">
31:                 <td style="width:150px;"><a href="seite.html"
32:                     class="TableLink">Klick</a></td>
33:                 <td style="width:150px;"><a href="seite.html"
34:                     class="TableLink">Klick</a></td>
35:             </tr>
36:             <tr style="height:50px;">
37:                 <td style="width:150px;"><a href="seite.html"
38:                     class="TableLink">Klick</a></td>
39:                 <td style="width:150px;"><a href="seite.html"
40:                     class="TableLink">Klick</a></td>
41:             </tr>
42:         </table>
43:     </body>
44: </html>
 
Gibt es eine Möglichkeit z.B. das "Klick" 15px nach rechts zu verschieben ?!
Ich bekomm dass nicht ganz hin :)
 
Dazu musst du die CSS-Angaben anpassen. Einfach eine padding-left-Eigenschaft
unten anhängen:
Code: 
a.TableLink:link, a.TableLink:active, a.TableLink:visited {
  [...]
  padding-left: 15px;
}

a.TableLink:hover {
  [...]
  padding-left: 15px;
}
 
Super, hätt' ich mir jedoch eingentlich glatt selber denken können :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück