Button in Form eines Bildes

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Button in Form eines Bildes

    Hallo FSBler!

    Ich muss eine Website erstellen. Dabei bin ich auf folgendes Problem gestoßen.

    Ausgangsbasis: Ich hab eine Navigationsleiste mit mehreren Buttons in Form von Bildern. Um das ganze optisch aufzuwerten möchte ich, dass wenn ich mit der Maus über den Button fahre, sich die Hintergrundfarbe ändert, sprich ein anderes Bild geladen wird. Wenn ich wieder wegfahre, soll da Bild in seinen ursprünglichen Zustand zurückkehren. Bis dahin funktioniert alles.

    Mein Problem: Ich möchte aber auch, dass wenn ich auf einen Button klicke, dieser "aktiv" bleibt - also den selben Zustand annimmt wie wenn ich mit der Maus darüber fahren würde. Dieser Zustand soll so lange aktiv bleiben, bis ich auf einen anderen Button klicke. Leider hab ich keine Ahnung, wie das funktionieren soll. :(

    Ich hoffe, ihr versteht, was mein Problem ist und hoffe, dass ihr mir helfen könnt. ;)

    Bin für jede Hilfe dankbar.

    mfg
    housefr3@k
    [SIZE="2"]
    [COLOR="DarkRed"] **** "Ich wollte mich geistig mit ihm duellieren, da merke ich, dass er unbewaffnet ist." ****[/color]
    [/SIZE]
  • Ich hatte sowas mal vor ewigen Zeiten per JavaScript realisiert.

    Auf der Seite sind oben 5 Buttons Die die Farbe bei Mauskontakt wechseln und darunter eine Vorschau. In dieser bleibt immer das Bild stehen das zum betreffenden Button passt.
    Also, angenommen du fährst über den Button 1. Dann wechselt der die Farbe und in der Vorschau steht das Bild 1. Das Bild bleibt so lange stehen bis du über einen anderen Button fährst. Der Button selbst behält die Farbe zwar nicht, aber das könnte man ja durchaus daraus zurechtbasteln.
    Ich hänge dir mal den Code an, vielleicht kannst du ja was damit anfangen.

    Edit: Ich seh grad, der Button behält seine Farbe auch.

    HTML-Quellcode

    1. <html><head>
    2. <script language="JavaScript">
    3. <!--
    4. Normal1 = new Image();
    5. Normal1.src = "buttonoff.gif";
    6. Aktiv1 = new Image();
    7. Aktiv1.src = "buttonon.gif";
    8. Normal2 = new Image();
    9. Normal2.src = "vorschau.jpg";
    10. Aktiv2 = new Image();
    11. Aktiv2.src = "1.jpg";
    12. Aktiv3 = new Image();
    13. Aktiv3.src = "2.jpg";
    14. Aktiv4 = new Image();
    15. Aktiv4.src = "3.jpg";
    16. Aktiv5 = new Image();
    17. Aktiv5.src = "4.jpg";
    18. Aktiv6 = new Image();
    19. Aktiv6.src = "5.jpg";
    20. function Bildwechsel(Bildnr,Bildobjekt)
    21. {
    22. window.document.images[Bildnr].src = Bildobjekt.src;
    23. }
    24. //-->
    25. //-->
    26. </script>
    27. </head><body>
    28. <div class="inhalt">
    29. <p><table width="95%" cellspacing=25 align="center"><tr><td>
    30. <a href="1.html" target="_blank" onMouseOver="Bildwechsel(0,Aktiv1) ; Bildwechsel(1,Normal1) ;
    31. Bildwechsel(2,Normal1) ; Bildwechsel(3,Normal1) ; Bildwechsel(4,Normal1) ; Bildwechsel(5,Aktiv2)">
    32. <img src="buttonoff.gif" border=0 alt="Link 1"></a>
    33. </td><td>
    34. <a href="2.html" target="_blank" onMouseOver="Bildwechsel(1,Aktiv1) ; Bildwechsel(0,Normal1) ;
    35. Bildwechsel(2,Normal1) ; Bildwechsel(3,Normal1) ; Bildwechsel(4,Normal1) ; Bildwechsel(5,Aktiv3)">
    36. <img src="buttonoff.gif" border=0 alt="Link 2"></a>
    37. </td><td>
    38. <a href="3.html" target="_blank" onMouseOver="Bildwechsel(2,Aktiv1) ; Bildwechsel(1,Normal1) ; Bildwechsel(0,Normal1)
    39. ; Bildwechsel(3,Normal1) ; Bildwechsel(4,Normal1) ; Bildwechsel(5,Aktiv4)">
    40. <img src="buttonoff.gif" border=0 alt="Link 3"></a>
    41. </td><td>
    42. <a href="4.html" target="_blank" onMouseOver="Bildwechsel(3,Aktiv1) ; Bildwechsel(1,Normal1) ; Bildwechsel(2,Normal1)
    43. ; Bildwechsel(0,Normal1) ; Bildwechsel(4,Normal1) ; Bildwechsel(5,Aktiv5)">
    44. <img src="buttonoff.gif" border=0 alt="Link 4"></a>
    45. </td><td>
    46. <a href="5.html" target="_blank" onMouseOver="Bildwechsel(4,Aktiv1) ; Bildwechsel(1,Normal1) ; Bildwechsel(2,Normal1)
    47. ; Bildwechsel(3,Normal1) ; Bildwechsel(0,Normal1) ; Bildwechsel(5,Aktiv6)">
    48. <img src="buttonoff.gif" border=0 alt="Link 5"></a>
    49. </td></tr></table><br>
    50. <table width="200" border=10 bgcolor=#FFFFFF align="center"><tr><td><img src="vorschau.jpg" border=0 alt="Vorschau" width=500
    51. height=340></td></tr></table></p>
    52. </div>
    53. </body></html>
    Alles anzeigen

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Shadowww ()

  • Wieso mit JavaScript lösen, wenn's auch mit CSS (und weniger Code) geht:

    PHP-Quellcode

    1. <style type="text/css">
    2. .irgendwas {
    3. background-image: url('pfad/image.png');
    4. }
    5. .irgendwas:hover {
    6. background-image: url('pfad/image_hover.png');
    7. }
    8. .irgendwas:active {
    9. background-image: url('pfad/image_active.png');
    10. }
    11. </style>
    12. <p class="irgendwas">Button-Text</p>
    Alles anzeigen

    Hover ist das element, wo du gerade drüber bist und active, das welches gerade angeklickt (aktiv) ist ;)

    Schau dir dazu mal folgende Seite an: Pseudo-Klassen: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

    mfg
    snip3r

    PS: Bei fragen: einfach posten.
    Rechteübersicht * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion * Chat * User helfen User
    Patrioten reden nur davon, dass sie für ihr Land sterben, niemals davon, dass sie für ihr Land töten. (Bertrand Russell)
  • Mein Vorschlag hierzu:

    Also für so eine Problemstellung bietet Dreamweaver eigentlich sehr gute Effekte mit den "Rollover" Funktionen wo man den vorher/nachher Effekt sehr fein einstellen kann - da ist auch z.b. ein Hell/Dunkel bzw. grau/farbig Effekt sehr leicht und sehr schön lösbar.
  • Hi,
    erstmal vielen Dank für die zahlreichen Lösungsvorschläge.

    Leider wurde mein Problem dadurch nicht gelöst :(
    Die Buttons sollen nämlich auch "aktiv" bleiben, nachdem man darauf geklickt hat und zwar so lange, bis man auf einen anderen der 5 Buttons klickt. Derzeit ist er nur für den Augenblick aktiv, wenn man mit der Maus darüber fährt oder ihn anklickt.
    Korrigiert mich, falls ich mir ihren sollte, aber mit den CSS-Pseudoklassen "hover", "active", "linke", "visited", "focus" hab ich es nicht lösen können.

    Ich hoffe, es gibt trotzdem wen, der mir weiterhelfen kann.

    mfg
    housefr3@k
    [SIZE="2"]
    [COLOR="DarkRed"] **** "Ich wollte mich geistig mit ihm duellieren, da merke ich, dass er unbewaffnet ist." ****[/color]
    [/SIZE]
  • Problem mit Buttons

    @ all:
    Es scheint, als drück ich mich falsch aus :confused:
    neuer Versuch:
    Die Buttons stellen bestimmte Bereiche dar. Aus Gründen der Übersicht möchte ich, dass der Button so lange aktiv bleibt (selber Zustand einnimmt, wie wenn man darüber fährt oder ihn anklickt) bis man in einen anderen Bereich wechselt, sprich auf einen anderen Button klickt. Also auch noch, wenn ich mir bsp-weise den Content, der durch den Klick auf den Button angezeigt wird, durchlese.
    Ich hoffe, ihr könnt euch jetzt ungefährt vorstellen, was ich meine.
    [SIZE="2"]
    [COLOR="DarkRed"] **** "Ich wollte mich geistig mit ihm duellieren, da merke ich, dass er unbewaffnet ist." ****[/color]
    [/SIZE]

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von housefr3@k ()

  • öhm, arbeitest du mit Frames?
    Wenn nicht ist das doch Kinder-Kacke :D
    Auf Seite A nimmst du im Menü an der Stelle von seite_a.jpg seite_a_active.jpg, auf Seite B nimmst du im Menü an der Stelle von seite_b.jpg seite_b_active.jpg und so weiter und mit dem :hover Ding wurde dir ja bereits gezeigt. Wenn du aber Frames benutzt, also das Menü immer das selbe ist, kommst du um JavaScript nicht herum.

    Gruß
    Broken Sword