WinFuture-Forum.de: Mouseover Button mit CSS - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Mouseover Button mit CSS wie gehts genau?


#1 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 09. Mai 2011 - 20:39

Hallo alle zusammen.

Ich werkel hier den ganzen Nachmittag schon ein einem Mouseover Button rum...
Das Problem: Es geht nicht (richtig).

Habe bisher das versucht:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
a.home {
	background-image:url(buttons/home_on.png);
	background-size:100%;
	background-repeat:no-repeat;
}
</style>
</head>

<body>
<a class="home" href="#">Button</a>
</body>
</html>



Mein Problem: Das Bild wird nur hinter dem Text angezeigt. Ohne Text nix Bild. Aber das Bild für den Button sieht so aus
Eingefügtes Bild
1. Der Text vom Link (<a>Text</a>) steht darüber.
2. Das Bild ist nur so groß wie der Text, also nicht zu erkennen :D

kann mir einer helfen?

wenn das funktioniert, soll der Button bei Mouseover so
Eingefügtes Bild
und beim klicken so
Eingefügtes Bild
aussehen.


wäre klasse wenn mir (mal wieder) einer helfen kann.
0

Anzeige



#2 Mitglied ist offline   slurp 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.342
  • Beigetreten: 25. September 08
  • Reputation: 133
  • Geschlecht:Männlich

geschrieben 09. Mai 2011 - 20:48

Zwar kein CSS, aber mit der Methode bin ich immer sehr gut gefahren:

<a href="LINK_HIER" onmouseover="austausch1.src='MOUSEOVERBILD.XXX';" onmouseout="austausch1.src='NORMALBILD.XXX';">

<img border="0" src="NORMALBILD.XXX" name="austausch1"></a>

Info: austausch1 muss bei den nächsten Buttons natürlich geändert werden (austausch2, usw)

Und dann lässt man die Bilder direkt beim laden der Seite direkt cachen, dann gibts auch keine Verzögerung:

<script language="JavaScript">
<!--
button1= new Image();
button1.src = "NORMALBILD.XXX"
button2= new Image();
button2.src = "MOUSEOVERBILD.XXX"

usw
</script>

Also, wäre mein alternativer Vorschlag.

Dieser Beitrag wurde von slurp bearbeitet: 09. Mai 2011 - 20:48

0

#3 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 09. Mai 2011 - 20:53

nicht dass ich das jetzt falsch verstehe:
das erste ist unabhängig vom zweiten?
0

#4 Mitglied ist offline   Ludacris 

  • Gruppe: Moderation
  • Beiträge: 4.668
  • Beigetreten: 28. Mai 06
  • Reputation: 218
  • Geschlecht:Männlich

geschrieben 09. Mai 2011 - 21:09 

a.button{
	 background: url(images/normal.jpg) no-repeat;
	 text-align:center;
}
a:selected.button{
	 background: url(images/pressed.jpg) no-repeat;
	 text-align:center;
}
a:hover.button{
	 background: url(images/pressed.jpg) no-repeat;
	 text-align:center;
}

so könnte es gehn :D
0

#5 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.296
  • Beigetreten: 08. April 06
  • Reputation: 887
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 10. Mai 2011 - 04:59

Denke mal die elegangeste Variante ist:

füge beide Bilder zusammen in eine Datei (rechts "normal", links "hover-variante").

mit

background-position

legst du dann fest von wo an die Grafik gezeigt werden soll

im eigendlichen Quelltext legst du dann fest welches Bild für die aktuelle Box verwendet werden soll.

Angehängte Datei  HOVER_BILD_EFFEKT.zip (2,95K)
Anzahl der Downloads: 175

Der Vorteil dieser Variante:

Das Bild für den hover-effekt muss nicht erst nachgeladen werden.

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 10. Mai 2011 - 05:00

0

#6 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.296
  • Beigetreten: 08. April 06
  • Reputation: 887
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 11. Mai 2011 - 14:25

So könnte es dann zum Beispiel in diesem Falle ausschauen:
Angehängte Datei  Dieser_Fall.rar (321,13K)
Anzahl der Downloads: 127

Mögliche Positionesangaben sind meines Wissens:

left
right
top
bottom


Somit kannst du mindestens 4 unterschiedliche Effekte und möglichkeiten innerhalb einer einzigen Grafik unterbringen
0

#7 Mitglied ist offline   Texer 

  • Gruppe: aktive Mitglieder
  • Beiträge: 23
  • Beigetreten: 15. September 02
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Saalfeld
  • Interessen:PHP, Motocross (Freestyle)

geschrieben 12. Mai 2011 - 09:55

Das mit der Position is ne geile Idee, denk aber an W3C.

#button {height:30px;width:100px;line-height:30px;display:block;text-align:center;background:url(link.jpg);}
#button:hover {background-position:top right;}



<a href="http://meine_url.de" id="button">mein Text</a>

Ankauf Toner | Ankauf leere Toner
0

#8 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 12. Mai 2011 - 11:27

@ sdh und Texer

klasse, so läufts.

danke euch beiden
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0