Anzeige

Grafik als weiterbutton

Grafik als weiterbutton | PSD-Tutorials.de

Erstellt von Asiaticket, 13.09.2008.

  1. Asiaticket

    Asiaticket Noch nicht viel geschrieben

    Dabei seit:
    26.06.2006
    Beiträge:
    2
    Grafik als weiterbutton
    ahoi,

    nun Folgendes, ich will eine Bildergalerie erstellen, nichts weltbewegendes.

    Ein iframe in dem das aktuelle Bild angezeigt wird und einen vor sowie einen Zurückbutton.
    Die Buttons sind Bilder (jpg).
    nun ich hab mir jetzt schon genügend den Kopf zerbrochen wie das klappen kann... ja und auf google.de war ich schon...

    ich bin allerdings nur auf die möglichkeit gestoßen mit Java script (was ich nicht behersche) eine solche gallerie zu erstellen:




    <html>
    <head>
    <title>www.tutorials.de</title>
    <meta name="author" content="Quaese">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <table BORDER=0 CELLPADDING=0>
    <caption><b>Bilder Show</b></caption>
    <tr>
    <td WIDTH="100%" height="100%"><img SRC="bg.jpg" NAME="bilder" height=750
    width=600 nosave></td>
    </tr>

    <tr>
    <td WIDTH="100%" height="100%"><form method="POST" name="rotater">
    <cnter><script language="JavaScript1.1">
    var photos=new Array ()
    var which=0

    //hier die Fotos eintragen, egal wie viele!

    photos[0]="bild0.gif"
    photos[1]="bild2.gif"
    photos[2]="bild3.gif"
    photos[3]="bild3.gif"

    function backward(){
    if (which>0){
    window.status=""
    which--
    document.images.bilder.src=photos[which]
    }
    }

    function forward (){
    if (which<photos.length-1){
    which++
    document.images.bilder.src=photos[which]
    }
    else window.status="Letzte Bild"
    }
    </script>
    <input type="button" value="zurück" name="B2" onClick="backward()">
    <input type="button" value="weiter" name="B1" onClick="forward()"></form></center>
    </td>
    </tr>
    </table>



    Das Prinzip sagt mir zu nur wird hier allerdings als "input type" ein standart windoof button verwendet.. was ich ja nicht will..
    nun ich hoffe ihr könnt mir weiterhelfen!


    grüße grüße
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Grafik als weiterbutton
    #2      
  3. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Grafik als weiterbutton
    AW: Grafik als weiterbutton



    Du kannst doch deine Buttons per css so formatieren, wie du willst...


    css
    Code (Text):
    1.  
    2.  
    3. <style type="text/css">
    4.  
    5. input.vor
    6.  
    7. {
    8. width:100px;
    9. height:25px;
    10. background-image:url(vor.jpg);
    11. background-position: 0 0;
    12.  
    13. }
    14.  
    15.  
    16. input.rueck
    17.  
    18. {
    19. width:100px;
    20. height:25px;
    21. background-image:url(rueck.jpg);
    22. background-position: 0 0;
    23.  
    24. }
    25.  
    26.  
    27. </style>
    28.  
    29.  
    Höhen, Weiten und Bildadresse anpasse



    HTML:
    1.  
    2. <input type="button" value="zurück" name="B2" onClick="backward()" class="rueck">
    3. <input type="button" value="weiter" name="B1" onClick="forward()" class="vor">
    4.  


    wenn in den Grafiken vor und zurück steht, dann einfach das value="zurück" oder "weiter" rauskicken...
     
    #3      
  4. kskoberharz

    kskoberharz Helper

    Dabei seit:
    29.04.2006
    Beiträge:
    286
    Geschlecht:
    männlich
    Grafik als weiterbutton
    AW: Grafik als weiterbutton

    oder deinen div als button nehmen ;)

    #btn_next
    {
    width: 25px;
    height: 25px;
    background-image:url('/images/deinbild.jpg');
    }
    #btn_back
    {
    width: 25px;
    height: 25px;
    background-image:url('/images/deinbild.jpg');
    }

    <div id="btn_next" onClick="forward();"></div>
    <div id="btn_back" onClick="backward();"></div>
     
    #4      
  5. netbandit

    netbandit Aktives Mitglied

    12
    Dabei seit:
    18.05.2008
    Beiträge:
    1.145
    Geschlecht:
    männlich
    Grafik als weiterbutton
    AW: Grafik als weiterbutton

    oder <img src="weiter.jpg" onClick="forward()">

    oder <a href="javascript:forward()"><img src="weiter.jpg"></a>

    oder <a href="javascript:forward()">weiter</a>

    oder...
     
    #5      
  6. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Grafik als weiterbutton
    AW: Grafik als weiterbutton

    Mach ne schicke Gallerie mit PHP die ist wunderschön dynamisch...
     
    #6      
x
×
×
teststefan