Hoover durch background-position

Billbos

Hallo,

ich habe vor, folgende Hintergrundgrafik durch background-postion so zu verschieben, dass sich zwei verschiedene Versionen ergeben!

In diesem Falle ist die Grafik 290px lang und 332 Pixel hoch. Als Einzelgrafik hätte sie den Wert 290px*166px.
Der obere Teil soll immer angezeigt werden und die blaue Facebook schrift beim darüberfahren.
Irgendwo ist bei mir im CSS bzw. im HTML ein Fehler?!?!

MFG

HTML

<a href=""><img class="facebookindex" src="img/facebook_index.png" /></a>
                         <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>

CSS

Code

img.facebookindex a {
    background: url(../img/facebook_index.png) no-repeat;
    background-position: 0 0;
    width: 290px;
    height: 166px;
    }

img.facebookindex a:hover {
    background-position: 290px -166px;
    width: 290px;
    height: 166px;
    }

Alles anzeigen

synaptic

du bindest das gleiche bild als img ein, was du als BG hast...

threadi

Und ein img-Element hat kein Kind-Element, so wie Du es hier definierst:

Code

img.facebookindex a {

sejuma

http://www.ohne-css.gehts-gar.net/0026.php

Billbos

Danke schonmal für eure Tips!
Ich verstehe das mit der zweiten class nicht ganz. Hier mein Ansatz.

Code

img.facebookindex {
    width: 290px;
    height: 166px;
    display: block;
    margin: 0 auto;
    }


img.facebookindex  {
    background: url(../img/facebook_index.png) no-repeat;
    }

img.facebookindex:hover {
    background-position: 0 -166px;
    }

Alles anzeigen

HTML

<a href="#" class="facebookindex"></a>

Unregistriert

Mensch Billbos, du bist noch nicht mal in der Lage, einen CSS-Code von A nach B zu kopieren und die Namen anzupassen! Wenn du dabei schon Schwierigkeiten hast, dann verwende die gleichen Namen wie bei dem Link von Sejuma.

threadi

Wenn Du das "img." im CSS weglässt, sollte es klappen.

Unregistriert

Zitat von threadi

Wenn Du das "img." im CSS weglässt, sollte es klappen.

Auch das wird nicht reichen.

Billbos

leider klappt es beim weglassen des .img auch nicht! Ich habe jetzt zwar den Freiraum für das Bild aber es für nicht angezeigt!

Unregistriert

Du hast also jetzt:

Code

facebookindex {
    width: 290px;
    height: 166px;
    display: block;
    margin: 0 auto;
    }


facebookindex  {
    background: url(../img/facebook_index.png) no-repeat;
    }

facebookindex:hover {
    background-position: 0 -166px;
    }

Alles anzeigen

Bei sejuma steht

Code

.foto-link
 {
 width: 290px;
 height: 190px;
 display: block;
 margin: 0 auto;
 }


 .foto1
 {
 background: url(tor.jpg) no-repeat;
 }


 .foto-link:hover
 {
 background-position: 0 -190px;
 }

Alles anzeigen

Bei dir steht

Code

<a href="#" class="facebookindex"></a>

Bei sejuma

Code

<a href="#" class="foto-link foto1"></a>

Da fällt dir wirklich nichts auf?

Da das ja nicht der erste Thread von dir ist, in dem du eine gewisse Form von Begriffstutzigkeit an den Tag legst, solltest du dir wirklich mal Gedanken darüber machen, ob du dir nicht ein anderes Hobby suchst!

Billbos

So funktioniert es, aber ich möchte doch gerne wissen, wieso der von mir gewählte name nicht funktioniert?

Unregistriert

Boah!!!

.facebookindex
.facebookindex
.facebookindex:hover

3x der gleich Klassenname

.foto-link
.foto1
.foto-link:hover

Hier sind aber 2 Klassennamen!

Billbos

Ja schon klar!!!! Nur mir war einfach unklar wieso ich jetzt zwei Klassenamen vergeben soll. Schließlich funktioniert eine Navigation auch nicht einfach wenn ich #navi1 ul .... und plötzlich #navi2 li ....!
Danke dir trotzdem!

Unregistriert

Du bist echt zu dumm oder?

Sorry. Aber das ist nicht dein erster Thread in dem du es nicht einmal hinbekommst die einfachsten Grundlagen anzuwenden.

Such dir lieber etwas womit du geistig klar kommst.

Vllt. ne runde schaukeln aufm Spielplatz oder so.

Billbos

haha du bist auch ein ganz komischer immer unregistriert, anstatt deinen normalen Account zu benutzen! TROTTEL!

unknownsoldier_

Ne ich bin nicht unregistriert, kann mich hier wo ich gerade bin nur net einloggen.

Und mein Text war 100% ernstgemeint.

sejuma

Du kannst auch auf die Klasse .foto1 verzichten und die Grafik .fotolink zuweisen:

Code

.foto-link {
	width: 290px;
	height: 190px;
	display: block;
	margin: 0 auto;
       background: url(img/0026/tor.jpg) no-repeat;
}

Wenn du jedoch mehrere solcher Hovereffekte mit jeweils anderen Fotos aber gleicher Größe hast, dann ist die zusätzliche Klasse .foto1, .foto2 usw. sinnvoll.
Du kannst dann nämlich .fotolink und .fotolink:hover als "Konstante" verwenden und musst nicht jedesmal deren Hintergrundgrafik anpassen.
Viele Wege führen nach Rom.

Billbos

Ich danke dir vielmals!

Tags