nicht angemeldet
Text über Rollover- (Hoover-)schaltfläche??
Hi,
ich möchte das Inhaltsverzeichnis meiner Webpage verbessern. Bisher habe ich eine Tabelle, die in jeder Zelle eine Grafik mit Rollover-Effekt beinhaltet. Also quasi zwei Grafiken; die eine wird gezeigt, wenn die Maus nicht über ihr ist, die andere, wenn die Maus auf der Grafik steht. Bei sagen wir 20 Zellen brauche ich auf diese Weise demnach 40 Grafiken - da freut sich der Modembesitzer.
Da sich die je 20 Grafiken lediglich durch ihren Text unterscheiden würde ich nun gerne den Text auf die Grafik legen - dann bräuchte ich nur 2 Grafiken laden!
Wer kann mir Tipps geben, wie ich das anstelle? Ein Beispiel wäre auch nicht schlecht :)
Stefan
-
Du kannst zwei Individualformate definieren, mit dem jeweils passenden Hintergundbild. (z.B. #aktiv und #default )Dann kannst Du in die Tabellenzellen mit onMouseover="change_bg(this)" ein Javscript aufrufen. In dem steht
function change_bg(el){
el.id = 'aktiv';
}bei onMouseout dann umgekehrt
-
Sers,
also wenn du das in den css Bereich in der Navi rein schreibst müsste
des so hinhauen!!
wichtig ist, das du in jeden <a href="bla bla"> folgendes
reinschreibst: class="link" sieht dann so aus:
<a class="link" href="bla bla">a.link:link
{
color:#farbederschrift;
text-decoration: none;
height : höhe in px;
width : breite in px;
background-image : url(bild was du haben willst);
font-family : "schrift art";
font-size : schrift größe in px;
}a.link:hover
{
color:#farbederschrift;
text-decoration: none;
height : höhe in px;
width : breite in px;
background-image : url(bild was du haben willst);
font-family : "schrift art";
font-size : schrift größe in px;
}gruß basti
-
Hmm, mit CSS habe ich noch nichts gemacht... *schäm* Ich habe folgendes mal zusammengefrickelt, aber es klappt vorne und hinten nicht - logisch, bei meiner Ahnungslosigkeit ;) Was muss ich noch definieren?
<style type="text/css">
<!--a.link:link
{
color:#000000;
text-decoration: none;
height : 21;
width : 120;
background-image : 2003/images/buttons/Arches-2.gif;
font-family : arial;
font-size : 8;
}a.link:hover
{
color:#000000;
text-decoration: none;
height : 21;
width : 120;
background-image : 2003/images/buttons/Arches-1.gif;
font-family : arial;
font-size : 8;
}-->
</style>
</head><body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<a class="link" href="BayArea.htm" target="Hauptframe" alt="Arches" width=120 height=21 border=0>Arches</a>
</tr>
</body>Sers,
also wenn du das in den css Bereich in der Navi rein schreibst müsste
des so hinhauen!!
wichtig ist, das du in jeden <a href="bla bla"> folgendes
reinschreibst: class="link" sieht dann so aus:
<a class="link" href="bla bla">a.link:link
{
color:#farbederschrift;
text-decoration: none;
height : höhe in px;
width : breite in px;
background-image : url(bild was du haben willst);
font-family : "schrift art";
font-size : schrift größe in px;
}a.link:hover
{
color:#farbederschrift;
text-decoration: none;
height : höhe in px;
width : breite in px;
background-image : url(bild was du haben willst);
font-family : "schrift art";
font-size : schrift größe in px;
}gruß basti
-
Hallo Stefan
Hmm, mit CSS habe ich noch nichts gemacht... *schäm* Ich habe folgendes mal zusammengefrickelt, aber es klappt vorne und hinten nicht - logisch, bei meiner Ahnungslosigkeit ;) Was muss ich noch definieren?
1. bei CSS _musst_ du die Einheit angeben, in deinem Fall also px.
height: 21px;
2. lies bitte: http://selfhtml.teamone.de/css/eigenschaften/hintergrund.htm#background_image
Übrigens ein Link (<a..>) kennt kein alt-Attribut, du wolltest sicher "title" schreiben.
Schlage beim Schreiben deiner Seiten öfter mal http://selfhtml.teamone.de/html/referenz/attribute.htm und http://selfhtml.teamone.de/html/referenz/elemente.htm nach.
MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-