[HTML/CSS] mit Grafik verlinken (a:hover)

[-Hajo-]

hallo,

ich bin auf der suche nach einer Möglichkeit, wie ich eine grafik als verweis verwenden kann. dabei wollte ich es so machen, dass beim hovern über das bild/den link ein anderes bild erscheint.

ich finde leider partot kein richtiges Bsp.(sonst haette ichs mir da rauskopiert)

beim selfhtml u.ä. hab ich schon alles durchforstet.
die navi fkt hilft mir nich viel, weil ich vor das bild keinen text setzen will, und somit das bild nich als background einbinden kann.

gibts da was, wie man das möglichst simpel lösen kann? Java würde ich nur sehr ungerne einbinden.

 

[Mr. Snoot]

AW: [HTML/CSS] mit Grafik verlinken(a:hover)

Hi,

ist im Grunde relativ einfach; zudem kannst du es gleich so machen, dass der "Hover-Bild" nicht erst noch geladen werden muss wenn man mit der Maus drüberfährt.

Siehe dazu diesen Thread: https://www.computerbase.de/forum/threads/buttons-vorher-laden-und-nicht-erst-beim-mouseover.241847/
Ein konkretes Beispiel findest du in Post #6.

 

[-Hajo-]

danke erstmal,

ich haette da aber noch das verlangen, den link nur als bild und nich mit schrift im vordergrund zu machen. kann man sowas wie unsichtbaren text schreiben, das dann der link is, und eben das hintergrundbild sich aendert.

 

[Crizzo]

danke erstmal,

ich haette da aber noch das verlangen, den link nur als bild und nich mit schrift im vordergrund zu machen. kann man sowas wie unsichtbaren text schreiben, das dann der link is, und eben das hintergrundbild sich aendert.

das musst du sogar machen, dass der IE den "hover-effekt" nur für Text akzeptiert

http://www.css4you.de/hover.html

http://xhtmlforum.de/43885-hovereffekt-grafik-vorladen.html

http://wellstyled.com/css-nopreload-rollovers.html

 

[PuppetMaster]

Nur für <a>-Tags, meinst du wohl. Dabei spielt es afaik keine Rolle, ob die nun Text oder Grafiken enthalten.

 

[-Hajo-]

das musst du sogar machen, dass der IE den "hover-effekt" nur für Text akzeptiert

http://www.css4you.de/hover.html

http://xhtmlforum.de/43885-hovereffekt-grafik-vorladen.html

http://wellstyled.com/css-nopreload-rollovers.html

ich weiß, dass es gut gemeint war, aber das hilft mir nicht wirklich weiter.

ich möchte die grafik ja überhaupt nicht in den hintergrund eines anderen elements machen. nur wenns keine andere möglichkeit gibt, dann würde ich nämlich gerne ein objekt verwenden, dass in der ansicht nich angezeigt wird.

letztenendes ist die grundfrage immer noch:
ist es ohne java möglich, ein bild einzubinden, dass beim hovern seine position verändert, allerdings nicht im hintergrund eines anderen objekts sondern im vordergrund?

wenn das nicht geht, und nur durch navi und background-image gelöst werden kann, bräuchte ich ein transparentes element, bei dem a:hover interpretiert wird(also text).

 

[PuppetMaster]

Ich bin mir nicht sicher, ob ich dich richtig verstanden hab, habe aber mal ein kleines Beispiel erstellt.

 

[-Hajo-]

Ja, das ist genau das, was ich brauche, vielen dank.

ich hatte nur das problem, dass ich das auch versucht habe, das zu machen, hat aber net geklappt.

also, nochmal danke

 

[-Hajo-]

ich hab das jetzt ausprobiert, aber irgendwie klappt das ganze nicht.

hier mal die entsprechenden zeilen aus html und css:

html:

[...]
<a href="./band.html" class="btnband"></a>
[...]

css:

[...]
a.btnband {
display: block;
background: url(pics/button_1band);
width: 150px;
height: 150px;
}

a.btnband:hover {
background-position: 0px -150px;
}

a.btnband:active {
background-position: 0px -300px;
}

[...]


die verweise hab ich alle schon kontrolliert.
was mach ich falsch.

 

[PuppetMaster]

background: url(pics/button_1band);

Fehlt da nicht noch ne Dateiendung?

 

[-Hajo-]

jo, die endung wars,....


geht jetzt.
kanns sein, dass die hintergrundbilder sich nicht als display: inline anzeigen lassen?
liegt das daran, dass ich nich mehrere verschiedene hintergruende in einer zeile angeben kann?