• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Farbe verändern

daybay

daybay

Neues Mitglied
Hallo

Ich habe hier einen HTML Code geschrieben. Wenn man mit der Maus über eine Zelle der Tabelle fährt, verändert sich die Farbe der Zelle. Ich möchte jetzt aber, dass wenn man mit der Maus drauf klickt, sich die Farbe nochmals verändert.

HTML: 
<table border="1" width="200" height="200">
<tr>
<td onMouseOver="this.style.backgroundColor='black'"
onMouseOut="this.style.backgroundColor='white';">
</td>
</tr>
</table>

Wie mach ich das???

Vielen Dank im Voraus!
 
xXxPeterPanxXx schrieb:
wenn man in diese zelle klickt wird dann etwas neu geladen? was für eine tabelle ist das?
Zum Vergrößern anklicken....
Es sollte ein Link sein. Aber Wie kann ich den Code so verändern, das sich während dem draufklicken auf den Link die Farbe verändert?

Ich habe hier den ganzen Code: (den letzten Code habe ich gekürzt)

HTML: 
<body bgcolor="black">
<table width="100%" height="84%" border="1" style="border-collapse: collapse">
<tr>
<td style="color:black"
onMouseOver="this.style.color='black';this.style.backgroundColor='lightgreen'; this.style.cursor='hand'"
onMouseOut="this.style.color='black';this.style.backgroundColor='black'"
width="25%" onClick="location.href='index.html'">
<div align="center">
<font color="green" size="6" face="Comic Sans MS">Home</font>
</td>
</tr>
</table>
 
Edit: Das ist ja ein interessanter Code! Schalt mal JavaScript ab und du siehst, es wird noch interessanter! Es funktioniert dann nämlich gar nichts mehr!
Links definiert man mit dem a-Tag und die Farbe kannst du beim überfahren/draufklicken mit CSS verändern:
Code: 
/*Beim Ueberfahren*/
a:hover{
color:red
} 
/*Beim Draufklicken*/
a:active{
color:blue
}
 
fiedel schrieb:
Edit: Das ist ja ein interessanter Code! Schalt mal JavaScript ab und du siehst, es wird noch interessanter! Es funktioniert dann nämlich gar nichts mehr!
Links definiert man mit dem a-Tag und die Farbe kannst du beim überfahren/draufklicken mit CSS verändern:
Code: 
/*Beim Ueberfahren*/
a:hover{
color:red
} 
/*Beim Draufklicken*/
a:active{
color:blue
}
Zum Vergrößern anklicken....

:-) Haha! Ohne Javascript sieht alles total zerstört aus!

So ne Frage:
Wie bringe ich Css in ein html Dokument?
(Hab noch nicht so viel Ahnung...)
 
Code: 
<link rel="stylesheet" title="Default" href="css/name.css" type="text/css" media="screen"/>
sas schreibst du unter title.
Dann erstellst du eine css datei(name.css)


Dieser Datei Name muss dann auch in den link.
 
xXxPeterPanxXx schrieb:
Code: 
<link rel="stylesheet" title="Default" href="css/name.css" type="text/css" media="screen"/>
sas schreibst du unter title.
Dann erstellst du eine css datei(name.css)


Dieser Datei Name muss dann auch in den link.
Zum Vergrößern anklicken....

also... die css datei habe ich erstellt! Aber es gibt keinen link (kein "a href"). Dieser Link befindet sich ja im "onClick='location.href..." in dem <table> code!

oder? :?
 
daybay schrieb:
:-) Haha! Ohne Javascript sieht alles total zerstört aus!
Zum Vergrößern anklicken....
Das liegt daran, dass die Seite von Anfang an schon falsch aufgebaut wurde (und zum überwiegenden Teil daran, dass du keine Ahnung davon hast, was du tust)

Um dem Leiden ein Ende zu setzen, habe ich mal für dich etwas zusammengeschrieben! Ich bin davon ausgegangen, dass es sich bei deinem Problem um eine Navigation handelt (stimmt das?!).

HTML-Datei:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul class="navigation">
 <li><a href="index.html">Home</a></li>
 <li><a href="about.html">Über mich</a></li>
 <li><a href="#">...und</a></li>
 <li><a href="#">so</a></li>
 <li><a href="#">weiter!</a></li>
</ul>
</body>
</html>
CSS-Datei (style.css):
Code: 
@charset "utf-8";

* {
    margin:0; padding:0;
}
ul.navigation li a {
    display:block;
    margin: 0 auto;
    color:green;
    text-decoration:none;
    width: 7em; height: 1.5em;
    font-size:2em; font-family:'comic sans ms', verdana, arial;
}
ul.navigation {
    list-style:none;
}
ul.navigation li {
    background-color:#000;    
    border: 1px solid gray;
}
ul.navigation li:hover {
    background-color:lightgreen;    
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben