Button in Form eines Hyperlinks

[Mr.Zylinder]

Hallo,

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

Auf meiner Homepage gibt es links eine Navigationsleiste, die mit einer Tabelle aufgebaut ist. Außerdem gibt es auf der Page ein Login und ein Gästebuch (Alles selbst programmiert, daher frei änderbar).

Ein Feld der Navigationsleiste:
<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>

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. 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=...>)

Vielen Dank schon mal für die Hilfe.

Jacob

[Christoph Schnauß]

hallo,

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

Erläutere doch bitte, was eine Navigation mit einer Tabelle zu tun haben muß.

Außerdem gibt es auf der Page ein Login und ein Gästebuch (Alles selbst programmiert, daher frei änderbar).

Das scheint für deine Frage völlig nebensächlich.

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.

Der EventHandler ist ja auch nichts, was mit CSS realisiert wird.

Dann bin ich auf die Lösung <a href='javascript:document.form.submit()'>TEXT</a> gestoßen.

Vergiß es ganz schnell wieder. Das ist keine Lösung.

Nun stellt sich allerdings das Problem: Wie setzte ich das name-Attribut?

<a href='...' name='...'>  -  aber darum geht es nicht wirklich. So ganz genau verstehen wird man deine Frage wohl erst, wenn du mal einen link zu deiner "Problemseite" angibst und man sich den Quelltext in Gänze anschauen kann, um genau zu verstehen, welche Effekte du erreichen möchtest.

Grüße aus Berlin

Christoph S.

[Joscelyn]

Hmpf............ ich vermute es ist mit.. CSS bzw divs möglich?

[Joscelyn]

entschuldigung ich hab mich vertan.... sorry *hust...

[Robert Bienert]

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