Tutorials

Button mit ladeanzeige Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
anzeigen
Button mit ladeanzeige
Button mit Ladeanzeige

4353 - lucas - 24.01.2010 20:13 Uhr - Version: 4 - - verlinken als BB-Code


HI,

hier zeig ich euch wie Ihr euer Formular mit einer Ladeanzeige (gif-Bild) Pimt ^^

Zu erst braucht ihr ein Formular eurer Wahl, und der Button bekommt onclick="showcssboxwhileuploading()"
1
<input name="nsubmit" value="Hochladen" onclick="showcssboxwhileuploading()" type="submit">


und im head wird ein js eingebunden
1
<script type="text/javascript" src="lade.js"></script>


in der js-Datei ( hier "lade.js" ) steht dann
1
2
3
4
5
6
7
8
9
function showcssboxwhileuploading()
{
    var elem = document.getElementById('whileuploading');
    if (elem.style.display=="") {
        elem.style.display="none";
    } else {
        elem.style.display="";
    }
}


nun müsst ihr nur noch eine div bauen die wen man auf den Button klickt angezeigt wird
z.B.
1
2
3
<div id="whileuploading" style="display:none;">
<img src="http://c-f.lima-city.de/upload/inc/img/loading.gif">
</div>

wichtig ist display:none;

Natürlich könnt ihr die div so gestalten wie ihr wollt, ich hab sie in der Demo 70% transparent gemacht
und über eine andere div gelegt

und fertig ist es Smily NR:8


Bei fragen einfach fragen

Mitglieder-Kommentare


#1 von KröteGAMES
Sehr schönes Tut!
Kann man bestimmt mal gebrauchen!

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)