nicht angemeldet
Format für <input type... definieren
1 0 0 0 
Gernot Back
0
0 0 0 
MudGuard
0 0 0 0 0 0 0 0 0 0 
Der Martin
0 0 0 Der Martin
0 0
0
Format für <input type... definieren
Hallo,
kann ich über css einem input-Feld eines bestimmten Typs Eigenschaften zuweisen?
Also falls type="text" andere Eigenschaften als bei type="image" etc.?
Danke
Staffi
-
Hi,
kann ich über css einem input-Feld eines
bestimmtenTyps Eigenschaften zuweisen?ja. Achte allerdings darauf, in welchen Browsern das funktioniert.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
danke für die schnelle Antwort!Achte allerdings darauf, in welchen Browsern das funktioniert.
Meinst Du da insbesondere, dass es im IE6 noch nicht funktioniert?
Ist der noch weit verbreitet?
Gibt es für den ein Umweg?
Staffi-
Moin,
Ist der noch weit verbreitet?
Nein, als weit verbreiteten Browser würde ich ihn nicht mehr bezeichnen.
MfG
MarkX. -
Hallo Staffi,
bastele dir doch für unzulängliche Browser etwas mit der JavaScript-Bibliothek deiner Wahl zusammen.
meist verwenden die als Selektoren sogar solche, die man von CSS her schon kennt.
http://docs.jquery.com/Selectors/attributeEquals#attributevalue
http://www.prototypejs.org/api/utility/dollar-dollarGruß Gernot
--
super me -
Hi,
Meinst Du da insbesondere, dass es im IE6 noch nicht funktioniert?
Ist der noch weit verbreitet?ja und ja.
Gibt es für den ein Umweg?
Nicht ohne das HTML auf die Evolutionsstufe eines Nacktmulls zurückzuentwickeln. Es sei denn natürlich, Du machst Dich von JavaScript abhängig, wie bereits vorgeschlagen wurde.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Es sei denn natürlich, Du machst Dich von JavaScript abhängig, wie bereits vorgeschlagen wurde.
Das möchte ich auch nicht unbedingt, da ich hier im Forum häufig den Vorschlag gelesen habe, gerade "hover" mit CSS zu realisieren.
Da lasse ich lieber die IE 6 -User außen vor, sofern ich es mit CSS noch hinbekomme.
Staffi-
Hi,
»» Es sei denn natürlich, Du machst Dich von JavaScript abhängig, wie bereits vorgeschlagen wurde.
Da lasse ich lieber die IE 6 -User außen vor, sofern ich es mit CSS noch hinbekomme.ich habe mich missverständlich ausgedrückt. Gemeint war eine Abhängigkeit von JavaScript _nur für den IE 6_, in deren Folge alle nicht-JavaScript-IE-6-Nutzer außen vor bleiben. Dies erkaufst Du im Wesentlichen durch einen Performance-Verlust, wieder nur auf diese Benutzergruppe beschränkt.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
Hi,
ich habe jetzt mit Deiner Hilfe ein kleines Beispiel erstellt (s.u.)
Es passiert dabei etwas seltsames:
In Netscape steht innerhalb des Bildes der Text "Fragen senden",
in Mozilla steht innerhalb des Bildes der Text "Daten absenden",
in Opera kommt kein solcher Text, aber in der Version 9.02 kommt an der Cursor-Position die Sanduhr, wenn ich über das Bild fahre (und bleibt, wenn ich das Bild verlasse).
Hat dazu jemand eine Idee?
Vielen Dank im voraus.
Staffi<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> div.k #kontakt { display: block; width: 100px; height: 25px; background: url(knorm.jpg) no-repeat; } div.k #kontakt:hover { background: url(khover.jpg) no-repeat; } img { border: none; } </style> </head> <body> ..... <div class="k"> <form action="http://www.example.test/bin/k.pl" method="post"> <input type="image" id="kontakt"> <input type="hidden" name="p1" value="e"> </form> </div> ..... <div class=gb"> ..... </div> </body> </html>-
Mahlzeit Staffi,
In Netscape steht innerhalb des Bildes der Text "Fragen senden",
in Mozilla steht innerhalb des Bildes der Text "Daten absenden",
in Opera kommt kein solcher Text, aber in der Version 9.02 kommt an der Cursor-Position die Sanduhr, wenn ich über das Bild fahre (und bleibt, wenn ich das Bild verlasse).Beachte das "<http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=Beachten Sie:>". Nicht alle Browser können (richtig) mit CSS-Pseudoklassen umgehen (die sich nicht auf <a>-Elemente beziehen).
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Hallo EKKi,
»» In Netscape steht innerhalb des Bildes der Text "Fragen senden",
»» in Mozilla steht innerhalb des Bildes der Text "Daten absenden",
»» in Opera kommt kein solcher Text, aber in der Version 9.02 kommt an der Cursor-Position die Sanduhr, wenn ich über das Bild fahre (und bleibt, wenn ich das Bild verlasse).Der Bildwechsel erfolgt ja korrekt in allen o.g. Browsern,
also hat es nach meiner Meinung nichts mit dem Hinweis zu tun.
So long
Staffi
-
-
Hi,
In Netscape steht innerhalb des Bildes der Text "Fragen senden",
in Mozilla steht innerhalb des Bildes der Text "Daten absenden",
in Opera kommt kein solcher Text, aber in der Version 9.02 kommt an der Cursor-Position die Sanduhr, wenn ich über das Bild fahre (und bleibt, wenn ich das Bild verlasse).
Hat dazu jemand eine Idee?
<input type="image" id="kontakt">Da das Bild nicht geladen werden kann (es fehlt das src-Attribut), wird der alt-Text angezeigt - der aber auch fehlt. Da setzen die diversen Browser dann halt bei einem so wichtigen Element wie dem Submit eines Formulars ihren eigenen Notfall-Alt-Text ein.
Opera kommt mit der Situation wohl überhaupt nicht klar.Warum verwendest Du type="image", wenn Du dann gar kein Bild angibst?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
Warum verwendest Du type="image", wenn Du dann gar kein Bild angibst?
Ja, das war der Grund für den zusätzlichen Text.
Ich habe es jetzt ohne die Zeile versucht
(so:<form action="http://www.example.test/bin/k.pl" method="post" id="kontakt"> <input type="hidden" name="p1" value="e"> </form> ~~~) Da klappt aber der link nicht mehr. Staffi-
Hi,
Da klappt aber der link nicht mehr.
das könnte daran liegen, dass in dem Code kein einziger Link steckt.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Warum wird im Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> #kontakt { display: block; width: 100px; height: 25px; background: url(knorm.jpg) no-repeat; } #kontakt:hover { background: url(khover.jpg) no-repeat; } img { border: none; } </style> </head> <body> <form action="http://www.example.test/bin/k.pl" method="post" id="kontakt"> <input type="hidden" name="p1" value="e"> </form> </body> </html>die in action angegebene Adresse nicht aufgerufen, wenn auf den button geklickt wird?
Gruß
Staffi-
Tach,
die in action angegebene Adresse nicht aufgerufen, wenn auf den button geklickt wird?
welcher Button?
mfg
Woodfighter-
Tach,
die in action angegebene Adresse nicht aufgerufen, wenn auf den button geklickt wird?
welcher Button?
um ein Formular abzuschicken, brauchst du entweder ein Input-Element oder ein Button Element vom Typ submit oder image http://de.selfhtml.org/html/formulare/formularbuttons.htm.
mfg
Woodfighter-
Hallo,
weiter oben im thread war das image-tag vorhanden mit den mir inzwischen bewussten Nebeneffekten.
Wie kann ich daher den hover-Effekt mit CSS für das image im folgenden Beispiel realisieren?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> #kontakt { display: block; width: 100px; height: 25px; background: url(knorm.jpg) no-repeat; } #kontakt:hover { background: url(khover.jpg) no-repeat; } img { border: none; } </style> </head> <body> <form action="http://www.example.test/bin/k.pl" method="post" id="kontakt"> <input type="image" id="kontakt" src="knorm.jpg"> <input type="hidden" name="p1" value="e"> </form> </body> </html>-
Autsch!
Das id="kontakt" im form-Tag war zuviel, also:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> #kontakt { display: block; width: 100px; height: 25px; background: url(knorm.jpg) no-repeat; } #kontakt:hover { background: url(khover.jpg) no-repeat; } img { border: none; } </style> </head> <body> <form action="http://www.example.test/bin/k.pl" method="post"> <input type="image" id="kontakt" src="knorm.jpg"> <input type="hidden" name="p1" value="e"> </form> </body> </html> -
Tach,
Wie kann ich daher den hover-Effekt mit CSS für das image im folgenden Beispiel realisieren?
mit einem Button-Element vom Typ submit könntest du das, der IE in Version 6 wird dir dann allerdings kein Name/Value-Paar übergeben.
mfg
Woodfighter-
Hallo,
mit einem Button-Element vom Typ submit könntest du das, der IE in Version 6 wird dir dann allerdings kein Name/Value-Paar übergeben.
Das sah auf den ersten Blick gut aus, aber dann kamm im letzten Absatz:
Im übrigen gilt für diese Buttons das gleiche, was schon für ihre herkömmlichen Kollegen gesagt wurde: Ohne JavaScript sind sie komplett funktionslos, und sie treten deshalb in der Realität äußerst selten auf.Dann könnte ich den hover-Effekt gleich mit Javascript machen, was ich aber vermeiden wollte.
Gruß
Staffi-
Hi,
»» mit einem Button-Element vom Typ submit könntest du das, der IE in Version 6 wird dir dann allerdings kein Name/Value-Paar übergeben.
Das sah auf den ersten Blick gut aus, aber dann kamm im letzten Absatz:
Im übrigen gilt für diese Buttons das gleiche, was schon für ihre herkömmlichen Kollegen gesagt wurde: Ohne JavaScript sind sie komplett funktionslos, und sie treten deshalb in der Realität äußerst selten auf.ja, da hat dich jemand auf die falsche Fährte gelockt. Der verlinkte Artikel gilt für Buttons, die eine beliebige Funktion auslösen sollen, also
<button type="button" ...>
Die haben tatsächlich keine eigene Funktion, sondern man muss ihnen einen onclick-Handler verpassen und kann dann Javascript-Aktionen damit auslösen.
Hier geht es aber um Buttons zum Absenden des Formulars, also
<button type="submit" ...>
Und diese Variante funktionert sehr wohl ohne Javascript. Die Anmerkung, dass der IE6 das nicht korrekt unterstützt, wirkt auch hier etwas abschreckend; sie will nichts weiter sagen, als dass der IE6 bei diesen Buttons nicht name=value überträgt, sondern name=<beschriftung>. Solange dein Formular nur einen Button dieses Typs enthält, ist das aber egal.
So long,
Martin--
Viele Fachleute vertreten die Ansicht, jedes Feature eines Programms, das sich nicht auf Wunsch abstellen lässt, sei ein Bug.
Außer bei Microsoft. Da ist es umgekehrt.-
Hi,
Hier geht es aber um Buttons zum Absenden des Formulars, also
<button type="submit" ...>
das klingt ja vielversprechend!
Da werde ich mich mal daran machen.
Danke
Staffi -
Hi,
im von Jens Holzkämper zitierten
Beispiel ändert sich der Button etwas beim Überfahren mit der Maus. Ich habe in dem Beispiel weder Javascript noch CSS entdeckt, also nehme ich an, dass dies eine Standardeigenschaft ist?
In Deinem Beispiel ist dies aber nicht der Fall.
Kann man dies ebenfalls erreichen oder noch besser:
Kann man mit CSS das Bild des Buttons ersetzen, wenn er mit dem Cursor überfahren wird?Hoping for answer
Staffi-
Hallo,
im von Jens Holzkämper zitierten
Beispiel ändert sich der Button etwas beim Überfahren mit der Maus.tut er das?
Ich habe in dem Beispiel weder Javascript noch CSS entdeckt, also nehme ich an, dass dies eine Standardeigenschaft ist?
Keine Ahnung, was du für einen Browser verwendest; vielleicht hat der einen eigenen Hervorhebungseffekt. Ich sehe jedenfalls weder in IE noch im Opera etwas derartiges. Vielleicht auch ein XP-Luna-Effekt?
In Deinem Beispiel ist dies aber nicht der Fall.
Das ist nicht, was ich verlinkt habe. Ich erwähnte <button type="submit">, nicht <input type="image">.
Kann man mit CSS das Bild des Buttons ersetzen, wenn er mit dem Cursor überfahren wird?
Ja, sicher. Du könntest *zwei* Bilder einsetzen, einem von beiden eine Klasse geben und die Anzeige per CSS umschalten.
HTML:
<button type="submit"><img src="image1.jpg" alt=""><img src="image2.jpg" alt="" class="hover"></button>CSS:
button img.hover { display: none; }
button:hover img { display: none; }Im Fall des graphischen Buttons (input type="image") ist es noch einfacher. Da könntest du als Bild im src-Attribut ein volltransparentes (und damit unsichtbares) Bild angeben, und den optischen Effekt unterschiedlicher Bilder beim hover mit unterschiedlichen Hintergrundbildern realisieren.
Fast überflüssig zu erwähnen, dass der IE6 (und älter) das nicht mitmacht, weil er :hover nur für Links unterstützt.
Ciao,
Martin--
Lebensmotto der Egoisten:
Was ist so schlimm daran, dass jeder nur an sich selbst denkt? Dann ist doch an alle gedacht!-
Hi,
Im Fall des graphischen Buttons (input type="image") ist es noch einfacher. Da könntest du als Bild im src-Attribut ein volltransparentes (und damit unsichtbares) Bild angeben, und den optischen Effekt unterschiedlicher Bilder beim hover mit unterschiedlichen Hintergrundbildern realisieren.
Fast überflüssig zu erwähnen, dass der IE6 (und älter) das nicht mitmacht, weil er :hover nur für Links unterstützt.
Nicht überflüssig hingegen zu erwähnen, dass damit der Button einfach "weg" ist, wenn der Browser kein CSS unterstützt oder es deaktiviert ist.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
Nicht überflüssig hingegen zu erwähnen, dass damit der Button einfach "weg" ist, wenn der Browser kein CSS unterstützt oder es deaktiviert ist.
Bitte nicht auch noch das!
Javascript könnte deaktiviert sein,
CSS könnte deaktiviert sein,
der Browser könnte es nicht verstehen.
Was kommt noch, was mir die Lust verdirbt?
Etwa: Der Anwender hat gar keinen Browser oder keinen PC?Gruß
Staffi-
Tach,
Etwa: Der Anwender hat gar keinen Browser
z.B. http://de.wikipedia.org/wiki/Googlebot
oder keinen PC?
http://de.wikipedia.org/wiki/IPhone
mfg
Woodfighter -
Hi,
Nicht überflüssig hingegen zu erwähnen, dass damit der Button einfach "weg" ist, wenn der Browser kein CSS unterstützt oder es deaktiviert ist.
Bitte nicht auch noch das!
Javascript könnte deaktiviert sein,
CSS könnte deaktiviert sein,
der Browser könnte es nicht verstehen.
Was kommt noch, was mir die Lust verdirbt?Wenn du nicht lernst, grundsätzliche Funktionalität mit den grundsätzlich vorhandenen Techniken (also eigentlich nur: HTML) bereitzustellen, und Erweiterungen mit optionalen Techniken immer so zu gestalten, dass die Funktionalität auch noch gegeben ist, wenn diese nicht verfügbar sind - dann wird es immer Nutzer geben, denen du die Lust darauf, deine Seite zu nutzen, verdirbst.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-
-
Hallo,
»» Kann man mit CSS das Bild des Buttons ersetzen, wenn er mit dem Cursor überfahren wird?
Ja, sicher. Du könntest *zwei* Bilder einsetzen, einem von beiden eine Klasse geben und die Anzeige per CSS umschalten.
HTML:
<button type="submit"><img src="image1.jpg" alt=""><img src="image2.jpg" alt="" class="hover"></button>CSS:
button img.hover { display: none; }
button:hover img { display: none; }Ich fürchte, ich bringe jetzt die einzelnen Möglichkeiten durcheiander?
Mein Coding sieht jetzt so aus<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Klick-Buttons definieren (Bild) - input, type, button, img</title> <style type="text/CSS"> button img.hover { display: none; } button:hover img { display: none; } </style> </head> <body> <h1>Verweise einmal anders</h1> <form action=""> <div> <button name="Klickmich" type="submit" value="Verzeigen" onclick="window.location.href='http://www.example.test'"> <p> <img src="image1.jpg" alt=""><img src="image2.jpg" alt="" class="button"> <br> </p> </button> </div> </form> </body> </html>Jetzt ergibt sich folgendes:
1. Beide Bilder werden nebeneinander angezeigt
2. Um die Bilder ist ein grauer Rahmen (Button-Aussehen)
3. Bewege ich die Maus auf den Rahmen, so vershhwinden die Bilder und es bleibt der stark verschmälerte Rahmen
4. Bewege ich den Curso über die Bilder, so flackert das Ganze
Gruß
Staffi-
Hi,
»» »» Kann man mit CSS das Bild des Buttons ersetzen, wenn er mit dem Cursor überfahren wird?
»» HTML:
»» <button type="submit"><img src="image1.jpg" alt=""><img src="image2.jpg" alt="" class="hover"></button>
»» CSS:
»» button img.hover { display: none; }
»» button:hover img { display: none; }Ich fürchte, ich bringe jetzt die einzelnen Möglichkeiten durcheiander?
weiß ich nicht, aber ich sehe, dass wir beide nicht aufgepasst haben. Wenn ich button:hover img { display: none; } notiere, dann werden selbstverständlich *beide* Bilder beim Hovern ausgeblendet, denn der Selektor trifft ja auf beide zu. Ich muss also *beiden* Bildern eine unterschiedliche Klasse geben, so dass ich sie beide gezielt selektieren und wechselweise ein- und ausblenden kann. Das bekommst du jetzt aber selbst hin ...
<form action="">
<div>
<button name="Klickmich" type="submit"
value="Verzeigen" onclick="window.location.href='http://www.example.test'">
<p>
<img src="image1.jpg" alt=""><img src="image2.jpg" alt="" class="button">
<br>
</p>
</button>
</div>
</form>Warum du die Bilder nochmal in einen Absatz verpackst, ist mir schleierhaft; ebenso, warum du vor dem Absatzende noch ein <br> unterbringst (ist an dieser Stelle wirkungslos).
Und warum hat dein Bild die Klasse "button", obwohl das CSS "hover" anspricht? - Das ist dein Teil des Fehlers, den ich eingangs meinte.- Beide Bilder werden nebeneinander angezeigt
Logisch. Durch den "falschen" Klassennamen wird keins selektiert, was dann verschwinden könnte.
- Um die Bilder ist ein grauer Rahmen (Button-Aussehen)
Klar. Ist ja der Sinn der Sache.
- Bewege ich die Maus auf den Rahmen, so vershhwinden die Bilder und es bleibt der stark verschmälerte Rahmen
Mein Fehler, siehe oben.
- Bewege ich den Curso über die Bilder, so flackert das Ganze
Das dürfte auch damit zusammenhängen.
Schönen Sonntag noch,
Martin--
Die späteren Ehen sind oft glücklicher als die erste, weil das natürliche Ende bereits absehbar ist.
(George Bernhard Shaw)-
Hi,
super,
jetzt ist es schon fast perfekt.
Hover funktioniert (ausser bei IE6, was ja klar war)
Mit button {width:103px; height:32px; }
habe ich noch den Button verkleinert, damit der Rand um mein Bild
nicht zu groß ist.
Der Button wird in Firefox und IE6 einwandfrei dargestellt (Bild zentriert innerhalb des Button),
im Opera allerdings ragt das Bild rechts etwas über den Button hinaus und links ist daher zuviel Platz im Button.
align: center oder text-align:center im img-tag hat da nichts verändert.
Hast du dafür noch eine Lösung parat?
Schönen Sonntag noch,Staffi
-
-
-
Tach,
Kann man mit CSS das Bild des Buttons ersetzen, wenn er mit dem Cursor überfahren wird?
ja:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Button-Beispiel</title> <style type="text/css"> button{ display:block; width:100px; height:100px; background-color:red; color:black; } button:hover{ background-color:black; color:red; } </style> </head> <body> <form action=""> <p> <button type="submit">Klick mich</button> </p> </form> </body> </html>Hintergrundbilder gehen analog, der IE6 spielt natürlich nicht mit, weil er :hover nur bei Links unterstützt.
mfg
Woodfighter
-
-
-
-
-
-
-
-
-
-
-
-
-