[CSS:] Link erzeugt Grafik mit hover

[maceis]

halo zusammen,

ich habe vor einiger Zeit mal eine Anleitung gelesen, wo mit CSS und einem hover Element an einer freien Stelle (relativ weit entfernt) eine Grafik eingeblendet wurde (in dem Beispiel war es eine Biene, IIRC).
Leider finde ich die Anleitung nicht mehr.

Vielleicht kennt jemand so etwas und kann mir einen Link posten.

Danke!

 

[cordney*]

Hab jetzt keine Anleitung parat, aber im Prinzip machst Du es per JavaScript. Du bindest also in Deinen Link den EventHandler onMouseOver ein. Darin sagst Du: this.document.bildname.src='bild.jpeg'.

Grüße, cordney*

 

[maceis]

Danke für den Hinweis.

Ich möchte es aber gerne mit CSS lösen.

 

[dms]

Nur ne Idee:

CSS:

.hoverelement img {
   display:none;
}
.hoverelement:hover img {
   display:inline;
}

HTML:

<div class="hoverelement">Test<img src="biene.gif" style="position:absolute;top:100px;left:100px;" /></div>

Sollte funktionieren, jedoch ungetestet.

 

[maceis]

Danke für den Vorschlag.

Das funktioniert, ich habe aber die style Angabe im img Tag auch in die CSS Datei geschrieben.

Überrascht war ich, weil absolute in diesem Fall nicht absolute ist, sondern relativ zum nächst übergeordneten div Container.
Da macht aber nichts, Hauptsache man hat einen festen Bezugspunkt.
----
uups:
zu früh gefreut:
Ich sehe grade, dass es zwar mit Safari, nicht aber mit dem IE klappt.
Woran das liegt, ist mir im Augenblick noch nicht klar - Das "li:hover {background-color: lightyellow;}" funktioniert im IE auch nicht.
Unten steht mein aktueller Code.
Wäre schön, wenn mal jemand einen Blick drauf werfen könnte.

CSS:

...
a:link.links, a:visited.links {
    display: block;
    color: lightyellow;
    text-decoration: none;
}

a:hover.links {
    color: crimson;
/*  background-color: lightyellow; */
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
li {
    display: block;
    width: 120px;
    padding: 3 5 3 5;
    margin-bottom: 5px;
    border: 1px solid black;
    background-color: crimson;
    
}
li:hover {background-color: lightyellow;}

.test img {
    display:none;
}
.test:hover img {
    display:inline;
    position: absolute;
    top:300px;
    left:-10px;
}
...

HTML:

...
        <div id=navi>
            <ul>
                <div class="test">
                    <li><a href="index.html" class=links>Home</a>
                    <img src="/pics/bild.jpg">
                </div>      
                <div class="test">
                    <li><a href="team.html" class=links>Das Team</a>
                    <img src="/pics/bild2.jpg">
                </div>      
                <li>...
                <li>...
                <li>...
            </ul>       
        </div id=navi>

 

[dms]

Ja, ich erinner mich gerade wieder. Der IE kann :hover nur bei Links. Es gibt einen htc-Hack, der es dennoch ermöglicht. http://www.xs4all.nl/~peterned/csshover.html

Ist natürlich weit gefehlt, wenn Du es mit purem CSS lösen willst. Aber ich bezweifle ehrlich gesagt dass es eine andere Lösung ohne JS/htc gibt.

Evtl. kannst Du Dein HTML-Konstrukt so umbauen dass die hover-Elemente wirklich Links sind. Keine Ahnung ob das dann aber wiederum auf die untergeordneten Images wirkung hat.

 

[maceis]

Danke für den Hinweis.
Ich werd mal sehen, ob ich es in CSS/HTML hinbekomme.

 

[moses_78]

*uraltfadenausgrab*

Dieses müsste auch im IE funktionieren.

 

[maceis]

Das geht doch einfacher mit dem title Attribut (wenn ich das jetzt auf die Schnelle richtig verstanden habe).

 

[moses_78]

Du hast doch die Frage gestellt

Nun ja, ich habe diesen Artikel gefunden, und war begeistert, wie
gut diese Variante funktioniert. Vielleicht war sie noch jemandem
nicht bekannt

Ausser halte ich diese Tooltips für wesentlich praktischer als das
title-Attribut.