kostenloser Webspace werbefrei: lima-city


HTML / PHP Buttons wechseln bei Maus

lima-cityForumProgrammiersprachenPHP, MySQL & .htaccess

  1. Autor dieses Themas

    g********e

    Hey,
    ich bin schon den ganzen Tag am Verzweifeln wie ich einen Button mache wo wen ich mit der Maus drüber gehe, dass dan ein anderes Bild erscheint, also genauer halt der selbe Button nur "gedrückt". Meine Vorlagen sind:
    http://www.giga-score.lima-city.de/picturs/menu-klickon.gif
    http://www.giga-score.lima-city.de/picturs/menu-klickoff.gif
    und noch ein paar nur mit Text ^^ auf den Button ;)


    fände es toll wen jemand einen Code für HTML hätte, Skripts oder so würden auch gehen und als letzten Ausweg würde das ganze auch in PHP gehen ^^°

    LG Giga-Score
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. computerkurs2011

    Kostenloser Webspace von computerkurs2011

    computerkurs2011 hat kostenlosen Webspace.

    Dafür kannst du auch CSS benutzen.

    einklienes Beispiel:

    #button {
    background-image: url(http://www.giga-score.lima-city.de/picturs/menu-klickon.gif);
    }
    
    #button:hover {
    background-image: url(http://www.giga-score.lima-city.de/picturs/menu-klickoff.gif);
    }


    Hoffe das der Code geht. Kannst du dann in HTML mit einem <div> Tag einbinden. Beispiel <div id="button" title="Menue">...</div>

    MfG cpk2011

    --
    Falls Fehler im Code sind, dann möchte ich mich dafür entschuldigen.

    Beitrag zuletzt geändert: 10.3.2012 12:31:14 von computerkurs2011
  4. Autor dieses Themas

    g********e

    computerkurs2011 schrieb:
    Dafür kannst du auch CSS benutzen.

    einklienes Beispiel:

    #button {
    background-images: url(http://www.giga-score.lima-city.de/picturs/menu-klickon.gif);
    }
    
    #button:hover {
    background-images: url(http://www.giga-score.lima-city.de/picturs/menu-klickoff.gif);
    }


    Hoffe das der Code geht. Kannst du dann in HTML mit einem <div> Tag einbinden. Beispiel <div id="button" title="Menue">...</div>

    MfG cpk2011

    --
    Falls Fehler im Code sind, dann möchte ich mich dafür entschuldigen.


    So weit eigentlich alles gut, nur eine Frage, bin ziemlich noobly mit css und Skripts und wie leite ich das ein? Ich weiß das das mit <style> ... </style> geht, aber wo muss ich das hin schreiben?

    LG Giga-Score
  5. m******************r

    style-tags gehören normalerweise in den head-tag:

    <!DOCTYPE html>
    <html>
        <head>
            <style type="text/css">
                ...
            </style>
        </head>
        <body>
              ...
        </body>
    </html>
  6. es heißt aber
    background-image
    ...ohne S.
  7. Autor dieses Themas

    g********e

    sorry jetzt bin ich Verwirrt...


    hatt vielleicht jemand einen Code den ich einfach nur einfügen kann und die Elemente (Bilder URLs) drin Platzieren kann?

    fände ich echt nett

    LG
    Giga-Score
  8. <!DOCTYPE html>
    <html>
    
    <head>
        <title>Titel</title>
        <meta charset="ISO-8859-1" />
        <style>
            #button {
                background-image: url(http://www.giga-score.lima-city.de/picturs/menu-klickon.gif);
                width: 260px;
                height: 35px;
            }
            #button:hover {
                background-image: url(http://www.giga-score.lima-city.de/picturs/menu-klickoff.gif);
            }
    
        </style>
    
    </head>
    
    <body>
        <div id="button" title="button"></div>
    </body>
    </html>


    Das müsste gehen...
  9. Autor dieses Themas

    g********e

    silentsmile schrieb:
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Titel</title>
        <meta charset="ISO-8859-1" />
        <style>
            #button {
                background-image: url(http://www.giga-score.lima-city.de/picturs/menu-klickon.gif);
                width: 260px;
                height: 35px;
            }
            #button:hover {
                background-image: url(http://www.giga-score.lima-city.de/picturs/menu-klickoff.gif);
            }
    
        </style>
    
    </head>
    
    <body>
        <div id="button" title="button"></div>
    </body>
    </html>


    Das müsste gehen...


    hey,
    funktionbiertt

    danke =D

    jetzt muss ich nur noch wissen wie ich das zentriere also in den "center" kriege


    LG
  10. <div id="button" title="button" align="center"></div>


    align="center" beim <div< tag einfügen.

    Beitrag zuletzt geändert: 10.3.2012 16:58:17 von silentsmile
  11. Autor dieses Themas

    g********e

    sry,
    funktioniert nichts, also nicht so wies funktionieren soll.... Da kommen überall die gleichen bilder obwohl ich unterschiedliche Links angegeben habe und in den Center geht nichts....
    http://giga-score.lima-city.de/zukunft/games-reviews.html

    Und so sieht der ganße Code aus:
    <FONT FACE="Comic Sans MS" SIZE="4" align="center">
    <div align="center" style="text-align: center;">
    <body background="http://giga-score.lima-city.de/pictures/background.png">
    <IMG SRC="http://giga-score.lima-city.de/pictures/logo2.png" ALT="Neues Logo"><br />
    </div>
    
    <!-- Startseite -->
    <!DOCTYPE html>
    <html>
    <head>
        <title>Titel</title>
        <meta charset="ISO-8859-1" />
        <style>
            #button {
                background-image: url(http://www.giga-score.lima-city.de/picturs/startseite-klickon.gif);
                width: 260px;
                height: 35px;
            }
            #button:hover {
                background-image: url(http://www.giga-score.lima-city.de/picturs/startseite-klickoff.gif);
            }
        </style>
    </head>
    <body>
        <div id="button" title="startseite" align="center"></div>
    </body>
    </html>
    <!-- PC-F -->
    <!DOCTYPE html>
    <html>
    <head>
        <title>Titel</title>
        <meta charset="ISO-8859-1" />
        <style>
            #button {
                background-image: url(http://www.giga-score.lima-city.de/picturs/pcf-klickon.gif);
                width: 260px;
                height: 35px;
            }
            #button:hover {
                background-image: url(http://www.giga-score.lima-city.de/picturs/pcf-klickoff.gif);
            }
        </style>
    </head>
    <body>
        <div id="button" title="pc-f" align="center"></div>
    </body>
    </html>
    
    <!-- Kontakte -->
    <!DOCTYPE html>
    <html>
    <head>
        <title>Titel</title>
        <meta charset="ISO-8859-1" />
        <style>
            #button {
                background-image: url(http://www.giga-score.lima-city.de/picturs/kontakte-klickon.gif);
                width: 260px;
                height: 35px;
            }
            #button:hover {
                background-image: url(http://www.giga-score.lima-city.de/picturs/kontakte-klickoff.gif);
            }
        </style>
    </head>
    <body>
        <div id="button" title="kontakte" align="center"></div>
    </body>
    </html>
    
    <!-- ENDE -->
    <br /><br />
    <b>Spiele Bewertung</b><br />
    <br />
    <br />
    <br />
    <a href="http://www.giga-score.lima-city.de/zukunft/projekte.html">Zurück zu "Projekte in Aussicht"</a>
    <br />
    </FONT>


    Währe nice wen mir jemand helfen könnte

    LG
  12. Hi giga-score

    Habe mir das soeben einmal angesehen, so kann es leider nicht funktionieren.

    Es fehlt schon am grundsätzlichen Seitenaufbau (z.B. gehört der ganze Kopfteil an den Anfang des Dokuments, mehrere Doctype-Teile sind pro Dokument nicht erlaubt).

    Am besten du siehts dir nocheinmal Tutorials im Internet an oder benutzt ein CMS.
    Sehr gut ist jenes Tutorial von SelfHTML: http://de.selfhtml.org/
    Du könntest auch einen WYSIWYG-Editor benutzen, der erledigt für dich (manchmal schön, manchmal weniger schön) die formeleien in HTML.

    Beste Grüsse
    Meron
  13. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    Joah, das wird nix, weil Du quasi immer vollständige html-dokumente aneinanderreihst. Es gibt an sich immer nur ein head- und body-tag. alles style-Zeug kommt in den head-Bereich, der rest dann in den body.

    Ich würde außerdem statt den Hintergrund zu ändern mit Bildern arbeiten. Hat den Vorteil, daß man auch verschiedene Knöpfe (ohne 1000 css-id-Zeugs) machen und daß man die Grafiken besser anpassen kann (meine persönliche Ansicht dazu). Ist aber wohl eher Geschmacksache ,,,
    Hab auch mal fix ein Beispiel gebastelt :holy:

    Ich schließ mich aber der Meinung an, daß Du Dir bei selfhtml erstmal die Grundlagen anschaust. Nur zusammenguttenbergen geht früher oder später mit sicherheit gegen den Baum.
  14. Eigentlich kann man das ganze recht einfach gestalten, ohne grosses drum rum :)

    <img src="startbild1" onmouseover="this.src='startbild2';" onmouseout="this.src='startbild1';" />


    Bei startbild1 gehört das erste Bild rein, welches angezeigt wird, ohne das etwas passiert.
    Dabei bitte den kompletten Pfad angeben z.B. http://www.irgend.wo/images/startbild1.jpg

    Das gleiche macht man für startbild2 und anschliessend wieder für startbild1.

    Bitte beachten, das man bei PHP-Nutzung die normalen Anführungszeichen mit einem >> \ << auskommentieren muss, da sonst die echo-abfrage nicht richtig funktioniert.

    Bei normalem HTML sollte der Code anstandslos funktionieren :)

    best wishes
    Ralf

    Beitrag zuletzt geändert: 3.4.2012 17:43:26 von ikariamx
  15. Dann hat aber derjenige der kein Javascript an hat die Ar***karte gezogen, weil dein Script da nicht funktioniert. Die Lösung mit CSS ist deutlich besser
  16. Dann hat aber derjenige der kein Javascript an hat die Ar***karte gezogen, weil dein Script da nicht funktioniert. Die Lösung mit CSS ist deutlich besser


    Da hast du in gewissen Maße schon recht.
    Ich habe gerade mal in meinem Browser Javascript deaktiviert.
    Das Mouseover funktioniert dann zwar nicht, aber man bekommt dann einen Hinweis darauf, das kein javascript aktiviert ist.
    Der erste Button wird dann allerdings immer noch angezeigt......

    Ist ja auch nur ein Vorschlag, wie man sowas lösen kann und ich werde mich hüten etwas als das nonplusultra hinzustellen...

    best wishes
    Ralf
  17. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!