Autor |
Nachricht |
pRiMUS
Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht:
|
Verfasst Mi 09.05.2007 09:40
Titel
|
|
|
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.
|
|
|
|
|
der-dave
Threadersteller
Dabei seit: 08.05.2007
Ort: Montabaur
Alter: 44
Geschlecht:
|
Verfasst Mi 23.05.2007 14:44
Titel
|
|
|
@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?
|
|
|
|
|
Anzeige
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Mi 23.05.2007 15:25
Titel
|
|
|
Die Grafik hat doch immer nochn alt-Attribut?
|
|
|
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Mi 23.05.2007 15:59
Titel
|
|
|
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.
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Mi 23.05.2007 16:05
Titel
|
|
|
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:
|
Verfasst Mi 23.05.2007 17:31
Titel
|
|
|
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.
|
|
|
|
|
|
|
|
Ä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
|
|