Web-Spirit Sebastian Gollus

<a href="/kontakt" id="kontakt">Kontakt</a>

a#kontakt{

display:block;

width:16px;

height:16px;

background: transparent url(kontakt.gif) 0px 0px no-repeat;

text-indent:-9000%;

}

a:hover#kontakt{

background: transparent url(kontakt.gif) 0px -16px no-repeat;

}

Carabon

1

am 25.04.2009 um 17:31 Uhr.
Ahhh genau, ich wusste doch wie es geht. Vielen Dank ;D

pArken

2

am 11.10.2009 um 23:26 Uhr.
Super Tipp! Werde ich gleich mal umsetzen. Dürfte eigentlich auch flotter funktionieren als ne Javascript Lösung, da ja bei beiden die vollen Grafiken erst vorgelanden werden, ich mir dann aber hier das Script erspare.

Norixz

3

am 03.12.2009 um 17:21 Uhr.
Mensch...man lernt ja nie aus...
Herzlichen Dank für diese Info!

andrea

4

am 03.01.2010 um 14:03 Uhr.
Vielen Dank für diese Idee!
Es funktioniert super - aber ich frage mich - wg der Barrierefreiheit:
Wohin mit dem Text?
Ich hab´s mir jetzt lange angeschaut ... bisher dazu aber keine Lösung gefunden.
Ich hoffe, es ist nicht unhöflich! Aber ich komme einfach nicht selbst drauf ^^
Ich würde mich jedenfalls sehr (!) über weiterführende Hilfe freuen. :-)

sLG andrea

Alexa Frankfurt

5

am 04.01.2010 um 01:49 Uhr.
Hm, ist ja fein, Wenn ich aber mit einem der gängigen Editoren arbeite klappt das bei mir nicht !?

Sebastian

6

am 06.01.2010 um 00:35 Uhr.
Hallo Andrea,

du kannst gerne Text verwenden und diesen mit einem negativen Texteinzug visuell verschwinden lassen:

text-indent:-9000%;

Madman-Maniac

7

am 21.01.2010 um 21:51 Uhr.
Absolut genial. Großes Lob!

@Andrea: Reicht dazu nicht wie bei anderen Bildern auch der Alternativ-Text aus dem alt-Attribut?

@Alexa: Du solltest evtl. einen anderen Editor versuchen ;) Notepad++ oder Weaverslave wären da zu empfehlen. Oder ganz profan den Windoof-Editor nehmen. Wenn das nicht klappt, probier's vorsorglich mal mit einem anderen Browser. Schlägt auch das fehl, liegt der Fehler wohl im Quelltext versteckt.

Madman-Maniac

8

am 21.01.2010 um 21:58 Uhr.
Nachtrag:
*argh* ohne img-Tag hilft das alt-Attribut nicht viel. Es ließe sich aber auch ein Blindpixel mit alt-Attribut einbauen. Aber das title-Attribut wäre möglich, oder?
Ich bezweifle auch gerade die Validität leerer Links. Von daher ist Sebastians Vorschlag doch die beste Lösung.
Tut einfach so, als hätte ich dazu nix geschrieben :P

Sebastian

9

am 22.01.2010 um 09:11 Uhr.
@Madman-Maniac: Wie bereits ober geschrieben, kannst du in den Link auch einen Text packen, sodass die Validität wieder gegeben ist. Dann einfach den Text mit einem negativen Texteinzug versehen. Ich habe es oben im Code mal angepasst.

Coeliel

10

am 22.03.2010 um 23:05 Uhr.
ich hab das ganze auch einmal gemacht und es ging ohne probleme, ich hab aber 3 buttons bei denen das funktionieren soll. also hab ich denen unterschiedliche ids gegeben und das einfach im css angepasst.

<a href=\"obertshausen.html\" id=\"obertshausen\"><img src=\"bilder/button2_1.jpg\"/></a>
<a href=\"3Jahre.html\" id=\"3Jahre\"><img src=\"bilder/button3_1.jpg\"/></a><a href=\"10Jahre.html\" id=\"10Jahre\"><img src=\"bilder/button1_2.jpg\"/></a>

mein html text

a#obertshausen{

display:block;
width:341px;
height:590px;
background: transparent url(bilder/button2_1.jpg) 0px 0px no-repeat;
text-indent:-9000%;

}

a:hover#obertshausen{

background: transparent url(bilder/button2_2.jpg) 0px -16px no-repeat;

}

a#10Jahre{

display:block;
width:341px;
height:590px;
background: transparent url(bilder/button3_1.jpg) 0px 0px no-repeat;
text-indent:-9000%;

}

a:hover#10Jahre{

background: transparent url(bilder/button3_2.jpg) 0px -16px no-repeat;

}

a#3Jahre{

display:block;
width:341px;
height:590px;
background: transparent url(bilder/button1_1.jpg) 0px 0px no-repeat;
text-indent:-9000%;

}

a:hover#3Jahre{

background: transparent url(bilder/button1_2.jpg) 0px -16px no-repeat;

}

und mein css.

bei der id obertshausen geht es, bei den anderen beiden nicht >_< und ich weiß nicht warum. wäre nett wenn mir da jemand helfen könnte.

Coeliel

11

am 22.03.2010 um 23:08 Uhr.
hah es geht ;)

Alexa Frankfurt

12

am 28.10.2010 um 00:07 Uhr.
@Madman-M: Danke!

Gerry

13

am 26.06.2011 um 02:59 Uhr.
Funktioniert! Aber: die Tatsache, daß dort ein display:block steht, also der Dokumentenfluß an dieser Stelle floats aufhebt/beendet, bereitet mir ein Problem, denn das Ursprungsbild (fürs Layout notwendigerweise links gefloated) steht somit an einer völlig falschen Stelle und die folgenden floats werden ebenfalls zerschossen zerschoßen...

Wie kann ich den Effekt hinbekommen ohne daß der Dokumentenfluß (layout) zertört wird?
Irgendwelche Ideen?

Gruß

Gerry .

Sebastian

14

am 27.06.2011 um 12:08 Uhr.
Versuche es mal mit display: inline-block; oder ohne block aber dafür mit padding.

Alex

15

am 12.09.2011 um 22:26 Uhr.
... also ich hatte das Problem wie Gerry...
Hab es wie folgt gelöst:

in dem DIV, wo die 3 Links (mit bildern) drin waren ... 3 divs mit float:left; erstellt... und schon gings ;)

trici

16

am 11.10.2011 um 12:41 Uhr.
ICh versteh asolut nicht wie das geht. Muss ich mir erst ein Programm runterladen? Und wenn ja wie füge ich dann die Bilder ein. Ich verzweifle hier noch:(

tomy

17

am 27.12.2011 um 22:13 Uhr.
Hey
vielen dank genau danach habe ich gesucht bei mir hat alles super geklappt Bild wechselt ohne probleme bei MouseOver