|
|||
Mehrere hover mit verschiedenen Grafiken?
hallo,
ich würde gerne folgendes realisieren: Zitat:
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; } |
Sponsored Links |
|
|||
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 |
Sponsored Links |
|
|||
Zitat:
Zitat:
"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." |
|
||||
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.
|
|
|||
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. |
|
|||
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> |
|
|||
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; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
Multi-Level Navigation mit Grafiken | koncrete | CSS | 3 | 02.08.2008 03:28 |
CSS Navigation - Problem mit IE6 | pcklinik | CSS | 4 | 18.09.2007 13:04 |
Darstellungsproblem CSS Navigation im IE7 | pcklinik | CSS | 7 | 09.09.2007 18:25 |
CSS Einsteiger bittet um Hilfe | pcklinik | CSS | 0 | 06.09.2007 15:40 |