mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 12:08 Benutzername: Passwort: Auto-Login

Thema: formular submitten --> rollover button vom 08.05.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> formular submitten --> rollover button
Seite: Zurück  1, 2
Autor Nachricht
pRiMUS

Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht: Männlich
Verfasst Mi 09.05.2007 09:40
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

<button>
<p>jetzt kommt ein submit button mit rollover dings</p>
<img src="foo.jpg" onmouseover="tauschebild(); return false;" onmouseout="tauschebildzurueck(); return false;" />
<p>wo auch noch ganz viel anderer scheiss drinstehen kann</p>
</button>


wieso einfach, wenns auch kompliziert geht.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
der-dave
Threadersteller

Dabei seit: 08.05.2007
Ort: Montabaur
Alter: 44
Geschlecht: Männlich
Verfasst Mi 23.05.2007 14:44
Titel

Antworten mit Zitat Zum Seitenanfang

@schachbrett:

habe es endlich getestet! du hattest recht. damit wäre es realisierbar, wenn man ausschließlich eine grafik als button verwendet.

da ich die site mittlerweile aber weitesgehend barrierefrei gestaltet habe, sollte der button mit dem das formular submittet wird, nur im hintergrund aus einer grafik bestehen. dh. die grafik soll nicht den text "senden" beinhalten...

hast du da noch eine idee?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Account gelöscht


Ort: -
Alter: -
Verfasst Mi 23.05.2007 15:25
Titel

Antworten mit Zitat Zum Seitenanfang

Die Grafik hat doch immer nochn alt-Attribut?
 
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Mi 23.05.2007 15:59
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
Die Grafik hat doch immer nochn alt-Attribut?

Ja, das alt-Attribut wird in dem Code oben allerdings nicht gesetzt, was schlicht und einfach falsch ist.

Das Image-Tag erfordert zwingend das alt-Attribut. Man kann es leer lassen, darf es aber nicht weglassen, wenn man validen Code haben möchte.
  View user's profile Private Nachricht senden
Account gelöscht


Ort: -
Alter: -
Verfasst Mi 23.05.2007 16:05
Titel

Antworten mit Zitat Zum Seitenanfang

Alternativ kann man seine Buttons eigentlich auch schön mit Javascript ersetzen... ist ja kein Problem, solange man sich um ne ordentliche Fallback-Lösung kümmert.

Da gabs doch mal die Seite, die das eindrucksvoll zeigt (allerdings noch mit fremdartigen Steuerattributen). http://www.m-boehmer.de/22-extended-dhtml-controls/

Ich hab mal in fünf Minuten das Prinzip versucht zu verstehen, das ist dabei rausgekommen. Sollte mit und ohne JS funzen...

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Testseite</title>   
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script src="lib/prototype/prototype.js" type="text/javascript"></script>
      <script language="javascript" type="text/javascript">
         //<![CDATA[
         Event.observe ( window, "load", function ( onLoadEvent )
         {
            var Submit = Class.create();
               Submit.prototype = {
                  
                  ref         : {},
                  replace      : {},
                  initialize   : function ( ref, replace )
                  {
                     this.ref = $(ref);
                     this.replace = $(replace);
                     this.bind();
                  },
                  bind      : function ( )  {
                     var self = this;
                     Event.observe ( this.replace, "click", function (clickEvent) {
                        Event.stop(clickEvent);
                        self.ref.up("form").submit();
                     });
                  },
                  toggle       : function () {
                     this.ref.up(0).insertBefore ( this.replace, this.ref );
                     var rem = this.ref.remove();
                     this.ref = this.replace;
                     this.replace = rem;
                  }
               }
            
            var newElem = document.createElement ( 'a' );
               newElem.href="#";
               with ( newElem.style ) {
                  width = "200px";
                  height = "200px";
                  backgroundColor="#00ff00";
                  display="block";
               }
               newElem.update("Absenden");
            
            var test = new Submit ($( 'submit' ), newElem );
            
            Event.observe ( $('toggle'), 'click', function (clickEvent) {
               test.toggle();
            });
         });
         //]]>
      </script>
      <style type="text/css" media="screen">
         /*<![CDATA[*/
            label {
               float:left;
               margin-right:10px;
            }
            form {
               overflow:auto;
            }
            button {
               border:0px;
            }
         /*]]>*/
      </style>
   </head>
   <body>
      <form id="meinFormular" action="auswert.php" method="post" enctype="multipart/form-data">
         <fieldset>
            <legend>Blah:</legend>
            <p><label for="form_trallala">Trallala:</label> <input id="form_trallala" type="text" name="trallala" /></p>
            <p>
               <input type="submit" name="submit" id="submit"/>
            </p>
         </fieldset>
      </form>
      <p><a href="#" id="toggle">Wechsle mich!</a></p>
   </body>
</html>
 
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Mi 23.05.2007 17:31
Titel

Antworten mit Zitat Zum Seitenanfang

der-dave hat geschrieben:
da ich die site mittlerweile aber weitesgehend barrierefrei gestaltet habe, sollte der button mit dem das formular submittet wird, nur im hintergrund aus einer grafik bestehen. dh. die grafik soll nicht den text "senden" beinhalten...


Wo ist denn das Problem? Der Text steht nach wie vor im value-Attribut.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Flash8: Rollover bei Button
RollOver-Button Problem
Button mit Textanimation per AS bei rollOver
Rollover Button + Spiegelung
submit-button als bild mit rollover
Flash: Problem mit Button RollOver
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.