[CSS:] Link erzeugt Grafik mit hover

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von maceis, 15.11.2005.

  1. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.660
    Zustimmungen:
    596
    MacUser seit:
    24.09.2003
    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!
     
  2. cordney*

    cordney* MacUser Mitglied

    Beiträge:
    755
    Zustimmungen:
    24
    MacUser seit:
    22.04.2003
    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*
     
  3. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.660
    Zustimmungen:
    596
    MacUser seit:
    24.09.2003
    Danke für den Hinweis.

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

    dms

    Nur ne Idee:

    CSS:
    Code:
    .hoverelement img {
       display:none;
    }
    .hoverelement:hover img {
       display:inline;
    }
    HTML:
    Code:
    <div class="hoverelement">Test<img src="biene.gif" style="position:absolute;top:100px;left:100px;" /></div>
    Sollte funktionieren, jedoch ungetestet.
     
  5. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.660
    Zustimmungen:
    596
    MacUser seit:
    24.09.2003
    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:
    Code:
    ...
    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:
    Code:
    ...
            <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>
     
  6. dms

    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.
     
  7. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.660
    Zustimmungen:
    596
    MacUser seit:
    24.09.2003
    Danke für den Hinweis.
    Ich werd mal sehen, ob ich es in CSS/HTML hinbekomme.
     
  8. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.321
    Zustimmungen:
    22
    MacUser seit:
    08.04.2005
    *uraltfadenausgrab*

    Dieses müsste auch im IE funktionieren.
     
  9. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.660
    Zustimmungen:
    596
    MacUser seit:
    24.09.2003
    Das geht doch einfacher mit dem title Attribut (wenn ich das jetzt auf die Schnelle richtig verstanden habe).
     
  10. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.321
    Zustimmungen:
    22
    MacUser seit:
    08.04.2005
    Du hast doch die Frage gestellt :D

    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.
     
Die Seite wird geladen...

Diese Seite empfehlen