Bilder-Hovereffekt der dazu Text anzeigt

[BraCay]

Hi,
ich mache gerade ein projekt im Untericht Projektmanagemant und ich will ein Programm auf Webbasis machen. Keine normale Navigation, sondern Button. Und wenn man über diese Button rüberfährt, soll ein kleiner text zentriert beim Button erscheinen

+-------+
|       |
|   o   |
|       |
+-------+

Beim Hovereffekt

+-------+
|       |
| Home  |
|       |
+-------+

Ich hoffe das ist verständlich. Kann mir jemand den fertigen Script dazu geben. Sollte halt mit einem Bild kompatibel sein. Für was anderes wird es nicht benötigt. Gibt sicherlich schon einen fertigen Script aber suche jetzt ganze 2 Stunden danach, vergebens^^

Vielen Danke schonmal =)

 

[webber979]

So wie ich e verstanden habe möchtes du einen HoverEffekt erzeugen
Soll nur der Text oder Text+Bild angezeigt sein?
Du könnest mit Gimp über das Bild einen Text schreiben.
Dann musst du noch den Hover effekt bei CSS schreiben.
In der CSS Datei schreibst du

a.Bild{
   height: 20px; //Die Höhe
   width:100px;  //Die Breite
   background-image:url("pfad/zu/Bild.jpg"); //Dein Bild
}

a.Bild:hover{
   background-image:url("pfad/zu/Bilddas mit Text ist.jpg"); //Dein Bildin dem auch Tet ist
}

und in HTML

<img src="Dein Bild.jpg" class="Bild" border="0" />Hier kann Text stehen, muss aber nicht</a>

 

[BraCay]

Das würde ich schon gerne mit Java Script regeln wollen. Diese Methode hatte ich auch mit css gemacht, aber dann ist die Quali nicht so toll

 

[Gilles]

Das würde ich schon gerne mit Java Script regeln wollen. Diese Methode hatte ich auch mit css gemacht, aber dann ist die Quali nicht so toll

Ich verstehe nicht was das mit der Qualität zu tun hat, ob du JS oder CSS nimmst.
Jedenfalls würde ich dir raten solch simplen Sachen noch über CSS zu machen.
Hier wäre solch ein Beispiel:

       #button1 {
                height: 29px;
                width: 150px;
                text-indent: 400px;
                overflow: hidden;
                background: url(bild.png) no-repeat;
            }
            
       #button1:hover {
        text-indent: 0px;
        background: none;
      }

<a href="test.html"><input type="button" id="button1" value="Home" /></a>

Habs ausgetestet. Funktioniert wunderbar :)

 

[BraCay]

Achsooooo meinste das. Ich dachte ein zweites Bild wo schon der Text drinne steht xD

Ein problem gibt es noch, wenn der Text länger wird, was amche ich dann?

Zudem würde ich den value text gerne in einem kleinen kästchen haben, der sich von der Farbe des Bildes abhebt^^

 

[webber979]

Du kannst ja beim hover button die größe des gewünschten Kästchens angeben und als Farbe
backround-color:#FFFFF
das läuft aber mit css.
Das einfachste Methode ist aber ein zweites Bild bei Gimp zu machen.
Dann kannst du es ja meinentwegen mit Javascript machen.
Wenn du den code wissen willst schreib mir einfach eine Nachricht.
Um ehrlich zu sein ich mache es auch mit Java-script.
webber979

 

[Gilles]

Das Ganze mit Bildern zu lösen halte ich nicht für empfehlenswert. Hier die Gründe wieso:
- Unschärfe bei schlechter Bildqualität
- "Große" Bilder bei guter Qualität (müssen somit erst einmal geladen werden)
- Bei 2 Bildern muss das Hover-Bild auch erst einmal geladen werden, wenn man mit der maus drüber fährt
- Schlecht wartbar. Nach dem Motto: "Ah ich wollte da doch einen anderen Text haben" oder "Hm ich will meine Seite nun auch auf Englisch haben"
- Man verweigert dem Benutzer damit seine Schriftgröße einzustellen. Bzw das Bild wird dann pixelig, wenn es vegrößert wird.
- Dann noch die Frage: Was ist mit Leuten die kein Javascript aktiviert haben? Die sehen keine Veränderung in der Navigation?

Wenn du ein Beispiel (z.B. eine Skizze) posten könntest: "Bild vorher" , "Bild nachher" könnten wir uns vielleicht mehr drunter vorstellen