zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mehrere hover mit verschiedenen Grafiken?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.09.2013, 17:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2013
Beiträge: 8
heisenberg befindet sich auf einem aufstrebenden Ast
Standard Mehrere hover mit verschiedenen Grafiken?

hallo,

ich würde gerne folgendes realisieren:

Zitat:
3 Grafiken, die je aus zwei Bildern bestehen (eines in Farbe, das andere in s/w) sollen nebeneinander liegen und je beim drüber fahren von s/w auf farbe wechseln.
So, das funktioniert auch bei der ersten Grafik, aber die anderen werden mir nicht einmal angezeigt?

HTML-Code:
<div id='area'>
<ul>
<li><a href=''><img src='grafik1.png' alt='' title='' /></a></li>
<li><a href=''><img src='grafik2.png' alt='' title='' /></a></li>
<li><a href=''><img src='grafik3.png' alt='' title='' /></a></li>
</ul>
</div>
HTML-Code:
#area {
width:50px;
height:50px;
overflow:hidden;
}
#area a {
text-decoration:none;
width:100px;
}
#area a img {
border:0;
}
#area a:hover {
margin-left:-50px;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.09.2013, 21:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

deine area hat die masse 50x50. wieso??
ergo werden die anderen grafiken eventuell einfach weggeblendet.
__________________
Das Leben ist wie ein Hermeneutischer Zirkel - man muss es erst verstanden haben bevor man es verstehen kann
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.09.2013, 22:08
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.026
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Du versuchst die Elemente zu bewegen, das ist keine gute Idee. Eigentlich brauchst du den Link nur ein einziges Mal, diesen aus optischen Gründen zu duplizieren läuft dem Prinzip einer semantischen Dokumentenstruktur entgegen.

Ein üblicher Lösungsansatz ist, die verschiedenen Stati in einer Grafik abzuspeichern und die Grafik dann entsprechend des aktuellen Zustands zu verschieben.
Mit Zitat antworten
  #4 (permalink)  
Alt 30.09.2013, 10:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2013
Beiträge: 8
heisenberg befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mymaksimus Beitrag anzeigen
deine area hat die masse 50x50. wieso??
ergo werden die anderen grafiken eventuell einfach weggeblendet.
Habe 50x50 entfernt und tatsächlich sehe ich jetzt auch die anderen Grafiken. Leider sehe ich aber auch beide Bilder (s/w und Farbe) gleichzeitig. Beim hovern sehe ich dann aber nur, wie es soll, das farbige.

Zitat:
Zitat von inta Beitrag anzeigen
Du versuchst die Elemente zu bewegen, das ist keine gute Idee. Eigentlich brauchst du den Link nur ein einziges Mal, diesen aus optischen Gründen zu duplizieren läuft dem Prinzip einer semantischen Dokumentenstruktur entgegen.

Ein üblicher Lösungsansatz ist, die verschiedenen Stati in einer Grafik abzuspeichern und die Grafik dann entsprechend des aktuellen Zustands zu verschieben.
Ich muss ehrlich gestehen das ich das nicht richtig verstanden habe. Wieso brauche ich nur einen Link? Schliesslich führt jeder Link zu einem anderen Verweiss.

"Es sind drei Links, jeder mit einer anderen URL. Jeder Link hat eine unterschiedliche Grafik, die jeweils aus zwei Bildern (das eine ist s/w, das andere in Farbe) besteht. Beim darüber fahren soll die s/w Grafik die Position mit dem Farbigen wechseln."
Mit Zitat antworten
  #5 (permalink)  
Alt 30.09.2013, 10:40
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.026
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Ok, dann habe ich dein Anliegen nicht ganz verstanden. Beim Hover bewegst du das a-Element, warum? Du möchtest wenn ich das jetzt richtig verstanden habe nur die Grafik bewegen. Ich würde dir dazu raten die Grafik in den Hintergrund zu legen, dann musst du nur die Position der Hintergrundgrafik beim Hover verändern.
Mit Zitat antworten
  #6 (permalink)  
Alt 30.09.2013, 13:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Das Übliche Vorgehen wäre, dass du keine img-Tags verwendest, sondern z.B. den Links, also den a-Tags, eine feste Breite und Höhe gibst (und display block), und die Grafik als css-background zuweist. Beim Hovern änderst du dann nur das background-image. Du müsstest also mit 6 Grafiken (2 pro Link) arbeiten.

Noch idealer wäre das ganze mit "Sprites", das ist aber vielleicht noch etwas zu kompliziert.
Mit Zitat antworten
  #7 (permalink)  
Alt 01.10.2013, 02:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2013
Beiträge: 8
heisenberg befindet sich auf einem aufstrebenden Ast
Standard

Ich hab das jetzt mal so aufgebaut, doch irgendwie funktioniert das nicht richtig. Die Grafik wird einfach nicht angezeigt. Wenn ich über die Stelle mit dem Cursor fahre, wird aber auf den Link reagiert. (?)

Was läuft hier nur schief?

HTML-Code:
a.link:link,
a.link:visited,
a.link:hover{
	display: block;
	width: 50px;
	height: 50px;
	background-image: url(../img/grafik-1.png) no-repeat;
}
a.link:hover{ background-image: url(../img/grafik-2.png) no-repeat; }
HTML-Code:
<li><a class='link' href='https://www.domain.de' title=''></a></li>
Mit Zitat antworten
  #8 (permalink)  
Alt 01.10.2013, 08:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Sieht eigentlich richtig aus. Vielleicht stimmt der Bildpfad nicht. Hast du mal geschaut, ob das Bild überhaupt gefunden wird? Kannst du z.B. mit Firebug oder Chromebug prüfen.
Mit Zitat antworten
  #9 (permalink)  
Alt 01.10.2013, 21:03
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

du hast a.link:hover 2x drin, mit beiden Grafiken.
Beschränke dich erstmal auf a und a:hover. Die Klasse link ist auch überflüssig.
Es reicht doch #area a und #area a:hover.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.10.2013, 09:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2013
Beiträge: 8
heisenberg befindet sich auf einem aufstrebenden Ast
Standard

Der Pfad zur Grafik ist korrekt, deswegen verstehe ich das auch ünerhaupt nicht.

Hab das ganze mal nach dem letzten Vorschlag überarbeitet, aber leider das selbe Ergebnis.

Kann es vielleicht auch eine andere Fehlerquelle geben, die gar nichts mit diesem CSS-Code zu tun hat?

HTML-Code:
<div id='area'>
<ul>
<li><a href=''></a></li>
<li><a href=''></a></li>
</ul>
</div>
HTML-Code:
#area a:link {
	display: block;
	width: 50px;
	height: 50px;
	background-image: url(grafik-1.png) no-repeat;
}
#area a:hover { 
	display: block;
	width: 50px;
	height: 50px;
	background-image: url(grafik-2.png) no-repeat;
}
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
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 19:51
Multi-Level Navigation mit Grafiken koncrete CSS 3 02.08.2008 02:28
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 17:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 14:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:11 Uhr.