Suche eine Möglichkeit zur Linkgestaltung

[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.

[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

[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

[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?

[D@ve]

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

[exweised]

Du meinst anstatt:

Code: Alles auswählen

<td><a href="link.htm" class="link">linkname</a></td>

so:

Code: Alles auswählen

<td class="link"><a href="link.htm">linkname</a></td>

Das funktioniert leider überhaupt nicht.

[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

[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?

[D@ve]

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

[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