Robert Bienert: Button in Form eines Hyperlinks

Beitrag lesen

Moin!

ich bin schon seit langem auf der Suche nach einer Lösung für folgendes Problem:

Dann las mal herschauen:

Auf meiner Homepage gibt es links eine Navigationsleiste, die mit einer Tabelle aufgebaut ist.

Wieso nimmst du keine Liste, das ist eine Leiste nur ohne e. Außerdem ist eine Liste von der Semantik her sehr viel passender als eine Tabelle, weil eine Navigation normalerweise keinen tabellarischen Inhalt enthält.

Ein Feld der Navigationsleiste:

So:

<td style="background-image:url(button.gif); width:128px; height:30px; cursor:pointer; color:#8E8E8E; padding-bottom:2px;" align=center valign=middle onclick="location.href='SEITE.PHP'" onmouseover="this.style.background='url(button_over.gif)'; this.style.color='#C0C0C0';"; onmouseout="this.style.background='url(button.gif)'; this.style.color='#8E8E8E';">LINK-TEXT</td>

Weißt du eigentlich, wofür es in HTML http://de.selfhtml.org/html/verweise/index.htm@title=Anker gibt? Damit sähe dieser verkorkste Code (nur der Link) so aus:

<a style="background-image:url(button.gif); width:128px; height:30px; color:#8E8E8E; padding-bottom:2px;" align="center" href="SEITE.PHP" onmouseover="this.style.background='url(button_over.gif)'; this.style.color='#C0C0C0';"; onmouseout="this.style.background='url(button.gif)'; this.style.color='#8E8E8E';">LINK-TEXT</a>

Wenn du dann noch http://de.selfhtml.org/css/index.htm@title=CSS richtig einsetzt, erhältst du richtig eleganten Code™:

  
<!-- [ref:self811;css/formate/einbinden.htm@title=Im Kopf der Datei oder in einem externen Stylesheet]: -->  
[code lang=css]  
a:link {  
    background-image: url(button.gif);  
    color:#8E8E8E; padding-bottom:2px;  
    width:128px; height:30px;  
    text-align: center;  
}  
a:visited { /* Styles für besuchte Links */ }  
a:hover {  
    background-image: url(button_over.gif);  
    color: #C0C0C0  
}  
a:active { /* Beim Anklicken des Links */ }  

<!-- Irgendwo im <body>: -->
<a href="SEITE.PHP">LINK-TEXT</a>
[/code]

Nun möchte ich die Submit-Button genauso gestalten wie die Links der Navigationsleiste. Dazu habe ich zuerst versucht den ursprünglichen HTML-Button mit CSS zu gestalten. Dabei funktioniert bei mir allerdings kein onmoueover.

onmouseover ist für JavaScript gedacht und hat mit CSS erst einmal nicht viel zu tun. Was funktioniert denn nicht genau?

Dann bin ich auf die Lösung <a href='javascript:document.form.submit()'>TEXT</a> gestoßen. Nun stellt sich allerdings das Problem: Wie setzte ich das name-Attribut? (<input type=submit NAME=...>)

Mit einem versteckten Formularfeld wäre eine Lösung. Denke allerdings daran, dass Benutzer ohne Javascript mit deinem Formular nichts anfangen können.

Vielen Dank schon mal für die Hilfe.

Keine Ursache.

Viele Grüße,
Robert