Seite 1 von 2
Suche eine Möglichkeit zur Linkgestaltung
Verfasst: 21.07.2004 19:13
von exweised
Hallo
,
ich suche eine Möglichkeit zur Linkgestaltung.
Ich möchte den Link ganz normal als Textlink anzeigen lassen, dass ganze auf einer Grafik. Das sieht ungefair so aus:
Code: Alles auswählen
<table style="background-image:url(background.gif)">
<tr align="center">
<td width="25%"><a href="link.htm">linkname</a></td>
<td width="25%"><a href="link2.htm">linkname2</a></td>
<td width="25%"><a href="link3.htm">linkname3</a></td>
<td width="25%"><a href="link4.htm">linkname4</a></td>
</tr>
</table>
Jetzt möchte ich, dass wenn man über einen Link fährt, sich der Hintergrund ändert. Aber nur hinter dem jeweiligem Link, plus vielleicht noch 2 Pixel links und rechts. Ist der Link Aktiv ausgewählt, soll auch die Grafik bestehen bleiben, die ja auch angezeigt wird, wenn man drüber fährt.
Ich habe schon überall gegooglet, aber nichts passendes dazu gefunden. Teilweise waren auch Dailerseiten dabei. Man, Suchmaschinen kann man echt in die Tonne klopfen.
Wenn mir jemand weiter helfen kann, wäre ich sehr Dankbar.
Verfasst: 22.07.2004 09:40
von D@ve
Ich hab nicht ganz verstanden, was Du meinst... Also wenn Du die Grafik ändern willst, musst Du die zerstückeln und als Hintergrund in jede einzelne Tabellenzelle einfügen und dann zB. ber CSS oder Javascript umswitchen.
Gruß, Dave
Verfasst: 22.07.2004 09:49
von Amlor
Hmm.. als Ansatz.. Du kannst ja noch bei den <td> noch jeweils ein Hintergrund angeben ->
Mach den erst einmal transparent und bei onmouse vom link tauschst Du dann den mit der 'Hoover-Grafik' aus. Bin mir aber nicht sicher ob das geht...
Aber 2 Fragen:
Warum muss der Link als Text sein ???
Warum eine durchgehende Grafik ???
-> mit einfachen Grafiken ist es ja nun wirklich nicht schwer
-> wenn sie geteilt ist, ist es dann schon gar kein Ding mehr
Verfasst: 22.07.2004 18:33
von exweised
Ok, habe mich ein wenig komisch ausgedrückt.
Also, ich habe einfach einen ganz normalen Link. Wenn man jetzt über diesen mit der Maus fährt, soll im Hintergrund dieses Links eine Grafik angezeigt werden. Das habe ich einfach per CSS gelöst:
Code: Alles auswählen
a.link:hover { color:#000000; text-decoration:underline; background-image:url(link_over.gif); }
Funktioniert auch, blos ist das nur so groß, wie der Linkname selbst.
Wie bekomme ich das jetzt noch um 3 Pixel nach aussen hin vergrößert?
Verfasst: 22.07.2004 19:04
von D@ve
exweised hat geschrieben:Ok, habe mich ein wenig komisch ausgedrückt.
Also, ich habe einfach einen ganz normalen Link. Wenn man jetzt über diesen mit der Maus fährt, soll im Hintergrund dieses Links eine Grafik angezeigt werden. Das habe ich einfach per CSS gelöst:
Code: Alles auswählen
a.link:hover { color:#000000; text-decoration:underline; background-image:url(link_over.gif); }
Funktioniert auch, blos ist das nur so groß, wie der Linkname selbst.
Wie bekomme ich das jetzt noch um 3 Pixel nach aussen hin vergrößert?
Logisch. Du musst, wie ich und mein Vorposter bereits gesagt haben, den hover style in die tabellenzellen einordnen. Sonst kann das nicht gehen.
Gruß, Dave
Verfasst: 22.07.2004 19:24
von exweised
Du meinst anstatt:
so:
Das funktioniert leider überhaupt nicht.
Verfasst: 22.07.2004 21:00
von D@ve
hmmm ich glaube dass geht nur mit Mozillla... probier mal das hier. Ist ein Versucht wert (wenn auch ein nicht ganz so eleganter JS-Workaround):
Code: Alles auswählen
td.normal
{
background-image=trallala.jpg
}
td.active
{
background-image=hopsassa.jpg
}
.
.
.
<td class="normal" onmouseover="this.className='active'; "
onmouseout="this.className='normal';"><a href="link.php">link</a></td>
Gruß, Dave
Verfasst: 22.07.2004 21:19
von exweised
Ich benutze Mozilla und damit ging es nicht.
Werden bei deinem Beispiel jetzt alle Links automatisch immer so sein? Oder nur wenn ich die Zelle als class="normal" definiere?
Verfasst: 22.07.2004 22:27
von D@ve
exweised hat geschrieben:Ich benutze Mozilla und damit ging es nicht.
Werden bei deinem Beispiel jetzt alle Links automatisch immer so sein? Oder nur wenn ich die Zelle als class="normal" definiere?
nur wenn Du sie als "normal" definierst und den mousover-code einfügst... zumindestens theoretisch. War nur eine spontante Idee, weiß nicht ob sie wirklich funzt...
Gruß, Dave
Verfasst: 23.07.2004 12:11
von fagus
hallo hast du es mal mit padding versucht?:
Code: Alles auswählen
.link:hover { color:#000000; text-decoration:underline; background-image:url(link_over.gif);padding:5px}
oder sonst versuchs mal damit:
td:hover { /* deine css-definitionen */ }
anstatt td:active