Bild durch Bild ersetzten! (a:hover)

Prof. Awesome · #1 (**permalink**) 16.03.2011, 13:27

Aloha Leutz,

ich hab ein Bild am Rand meiner HP das mitscrollt, wenn man mit der Maus drüber fährt ändert sich das Bild in ein anderes geht man runter ist wieder das alte da!

zur Veranschaulichung...

...Bild mit Text "Ihr wollt uns ein Feedback hinterlassen"
ändert sich beim drüber fahren auf
...Bild mit Text "Dann klick mich"

soweit funktioniert das alles auch! Problem, durch den klick öffnet sich via mailto: funktion der z.B thunderbird...

geht man jetzt zurück auf die Seite dann bleibt das Bild geändert also in "stufe 2"!Wie vermeide ich das, ich möchte das Bild immer zum Grundzustand zurück wechselt!

Ich hoffe ich hab das verständlich rübergebracht! :/

HTML-Code:

.popup {
background-image: url("Grafiken/Test1.png");
width:218px;
height:363px;
right:0px;
bottom:0px;
position:fixed;
background-repeat:no-repeat;
} 

.popup a:active, a:hover, a:focus{
background-image: url("Grafiken/Test2.png");
background-repeat:no-repeat;
outline:none;
}

Danke schonmal!

ballibum · #2 (**permalink**) 16.03.2011, 13:33

hast du mal das a:active weggelassen?bin mir aber selber sehr unsicher

Prof. Awesome · #3 (**permalink**) 16.03.2011, 13:40

Zitat:

Zitat von ballibum

hast du mal das a:active weggelassen?bin mir aber selber sehr unsicher

jopp hab ich schon mal probiert, aber dann gehts leider garnicht mehr! :<

ballibum · #4 (**permalink**) 16.03.2011, 13:52

ergänze mal beim oberen .popup a , also einfach nen a dran hängen

Prof. Awesome · #5 (**permalink**) 16.03.2011, 13:57

Zitat:

Zitat von ballibum

ergänze mal beim oberen .popup a , also einfach nen a dran hängen

Mmmh ne dann verschwindet der Link komplett von der Bildfläche! :/

ballibum · #6 (**permalink**) 16.03.2011, 14:04

das ist arg merkwürdig, ich habe etwas ähnliches bei mir auf der homepage, da funktioniert es

ich habe ein div in dem sich mehrer divs befinden....jedes dieser einzelnen divs hat zwei bilder, diese ändern sich wenn mit der maus über sie gegangen wird. eventuell schaust du dir das mal an:

Home oben rechts

vielleicht hilft es auch, wenn du statt class eine id angibst

andir · #7 (**permalink**) 16.03.2011, 14:08

Code:

.popup a:active, a:hover, a:focus{

wenn du popup a ansprechen willst, dann bitte so

Code:

.popup a:active, .popup a:hover, .popup a:focus

Anders geht es nicht.

in-flames · #8 (**permalink**) 16.03.2011, 14:11

das sollte die lösung sein. du musst dem a tag noch die klasse zuweisen.

Code:

<style>
.popup {
background:url("bild1.jpg") no-repeat;
width:218px;
height:363px;
display:block;
}

a.popup:active, a.popup:hover, a.popup:focus{
background: url("bild2.jpg") no-repeat;
}
</style>

Prof. Awesome · #9 (**permalink**) 16.03.2011, 14:22

Danke für die ganzen Antworten erstmal, aber es klappt noch nicht!
In der CSS sieht es jetzt so aus:

HTML-Code:

.popup{
background-image: url("Grafiken/Test1.png");
width:218px;
height:363px;
right:0px;
bottom:0px;
position:fixed;
background-repeat:no-repeat;
} 

a.popup a:active, a.popup a:hover, a.popup a:focus{
background-image: url("Grafiken/Test2.png");
background-repeat:no-repeat;
outline:none;
}

Im Html Doc so:

HTML-Code:

<a href="mailto:xxxxxx.net" class="popup"></a>

in-flames · #10 (**permalink**) 16.03.2011, 14:25

du musst die a klassen auch so definieren z.b.:

Code:

a.public:hover{}

dann sollte es funktionieren.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild ersetzten durch Bild-nr. +1	luki.boy	Javascript & Ajax	3	13.04.2011 09:13
Seite links ausrichten	like.no.other	CSS	10	26.01.2011 01:10
Ungewöhnlicher abstand beim clearen von floats	adrianno	CSS	14	16.09.2009 14:20
Hilfe bei Positionierung eines Menüs	opa-rudi	CSS	0	18.11.2008 11:21
#boxes a:hover.info: 2.posting mit css !!!	marioN	CSS	5	25.01.2004 17:04