zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild durch Bild ersetzten! (a:hover)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.03.2011, 14:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2011
Ort: Nürnberg
Beiträge: 19
Prof. Awesome befindet sich auf einem aufstrebenden Ast
Standard Bild durch Bild ersetzten! (a:hover)

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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.03.2011, 14:33
Neuer Benutzer
neuer user
 
Registriert seit: 26.07.2010
Beiträge: 23
ballibum befindet sich auf einem aufstrebenden Ast
Standard

hast du mal das a:active weggelassen?bin mir aber selber sehr unsicher
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.03.2011, 14:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2011
Ort: Nürnberg
Beiträge: 19
Prof. Awesome befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ballibum Beitrag anzeigen
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! :<
Mit Zitat antworten
  #4 (permalink)  
Alt 16.03.2011, 14:52
Neuer Benutzer
neuer user
 
Registriert seit: 26.07.2010
Beiträge: 23
ballibum befindet sich auf einem aufstrebenden Ast
Standard

ergänze mal beim oberen .popup a , also einfach nen a dran hängen
Mit Zitat antworten
  #5 (permalink)  
Alt 16.03.2011, 14:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2011
Ort: Nürnberg
Beiträge: 19
Prof. Awesome befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ballibum Beitrag anzeigen
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! :/
Mit Zitat antworten
  #6 (permalink)  
Alt 16.03.2011, 15:04
Neuer Benutzer
neuer user
 
Registriert seit: 26.07.2010
Beiträge: 23
ballibum befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 16.03.2011, 15:08
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #8 (permalink)  
Alt 16.03.2011, 15:11
Benutzerbild von in-flames
Neuer Benutzer
neuer user
 
Registriert seit: 09.03.2011
Beiträge: 28
in-flames befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #9 (permalink)  
Alt 16.03.2011, 15:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2011
Ort: Nürnberg
Beiträge: 19
Prof. Awesome befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.03.2011, 15:25
Benutzerbild von in-flames
Neuer Benutzer
neuer user
 
Registriert seit: 09.03.2011
Beiträge: 28
in-flames befindet sich auf einem aufstrebenden Ast
Standard

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

Code:
a.public:hover{}
dann sollte es funktionieren.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:06 Uhr.