Picture Hover ?? Wenn ja wie ?

[Hellsing]

Hallo ich habe bei einem freund gesehn das sich die bilder per maus move oder auch hover genant ändern und habe leider keine ahnung wie ich das anstellen soll ich hab es mit

HTML
_____________________________________
<div id="download1"
<img src="img/download.png">
</div>


CSS
_______________________________________
#download1 img:hover{
Background-image:url(img/download2.png)
}

Versucht aber weil es im hintergrund ist und ich nicht weiß wie ich es in den vordergrund stelle bringt mir das wennig ..
Ich bedannke mich schonmal an alle die Hilfreiche antworten posten.

1. Ja das geht | Nein das geht nicht ?
2. Wie geht es ?

 

[prm]

Eine Variante ist z.B. diese:
Bild-Hover-Effekt

Eine weitere findest du hier unter Ziffer 2: Link-Buttons. Anstelle eines Links kannst du als "Platzhalter" z.B eine Raute # verwenden.

 

[vast]

1. ja das geht, aber nicht so ;)

2. Es gibt da verschiedene Möglichkeiten. Beispielsweise könntest du #download1 ein Hintergrundbild und width+height zuweisen, und dann das Bild darin bei hover per display:none; ausblenden.

Ich nehme aber nun an, das in #download1 ggf. was zum Downloaden sein soll, also warum nicht gleich mit einem Link arbeiten:

HTML:

 <div id="download1"
  <a class="downlink" href="#"></a>
</div>

CSS:

#download1 a {
  display:block; 
  width: 150px; /* hier Breite des Bildes */
  height: 150px; /* hier Höhe des Bildes */
  background-repeat:no-repeat;
  background-position: 0 0;
}

a.downlink:link,
a.downlink:visited,
a.downlink:active {
  background-image: url(path/to/image1);
}
a.downlink:hover,
a.downlink:focus {
  background-image: url(path/to/image2);
}

wenn man hier mit einem <a>-Tag arbeitet, klappt der :hover auch in uralten Browsern.

Noch ein Tipp: wenn du Bild1 und Bild2 in einem Bild untereinander zusammenfasst, kannst du auch bei :hover per background-position das zweite Bild anzeigen.
Das hat den Vorteil, dass beim hovern nicht noch erst das zweite Bild nachgeladen werden muss.

 

[Hellsing]

@vast Hallo ich habe dein post gelessen und finde das mit bild position hört sich gut an kannst du mir vll sagen wie ich das mache oder vll per skype das ganze genau erklären,
Vielen dank an alle für die tollen posts :)

Skype: VisualBasic08Team

 

[vast]

im Prinzip ist das ganz einfach, du müsstest wie gesagt Bild 1 und 2 zunächst übereinander (oder nebeneinander) in einem Bild vereinen.
Das kann man prinzipell mit beliebig vielen Images machen, um statt 20 Bildern (==20 http-requests) nur 1 Bild zu laden. Per background-position bestimmt man dann den sichtbaren Bereich.

Nehmen wir an, dein Bildchen ist 150x150px gross. Dann springst du in dein Bilbearbeitungsprogramm, öffnest Bild 1 und Bild 2.
In Bild 1 änderst du dann die canvas size (Arbeitsfläche) auf 200% Höhe und kopierst dein 2tes Bild dort hinein.
Dann positionierst du die so, dass Bild 1 oben am Rand bündig ist und Bild 2 unten bündig ist - in der Mitte sollten die sich dann genau treffen.

Nun hast du ein Bild, welches 300px hoch ist und 150px breit, und beide deiner Bilder beinhaltet.

Jetzt zum code:

HTML:

 <div id="download1">
  <a class="downlink" href="#"></a>
</div>

CSS:

#download1 a {  
  display:block; 
  width: 150px; /* hier Breite eines Bildes */
  height: 150px; /* hier Höhe eines Bildes */
  background-repeat:no-repeat;
  background-image: url(path/to/image);
}

a.downlink:link,
a.downlink:visited,
a.downlink:active {
    background-position: 0 0;  /* Bild ist oben links und das Elternelement  ist 150px hoch und breit - nur diesen Bereich kann man sehen. */
}
a.downlink:hover,
a.downlink:focus {
   background-position: 0 -150px;  /* Das Bild wird nun auf der y-Achse 150px nach oben "gezogen". Sichtbar ist das "zweite Bild" */
}

Das Ganze wird hier nochmal ausführlich beschrieben.

ich hoffe das bringt dich erstmal weiter.

 

[Hellsing]

vielen dank das hat mir sehr geholfen