HTML / PHP Buttons wechseln bei Maus
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
ansicht
beispiel
benutzen
bewertung
bild
button
code
dokument
editor
einbinden
entschuldigen
fehler
http
image
jemand
karte
projekt
sicherheit
tag
url
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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 -
style-tags gehören normalerweise in den head-tag:
<!DOCTYPE html> <html> <head> <style type="text/css"> ... </style> </head> <body> ... </body> </html> -
es heißt aber
...ohne S.background-image -
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 -
<!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... -
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 -
<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 -
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 -
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 -
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
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. -
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 -
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
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
