[CSS:] Link erzeugt Grafik mit hover

Diskutiere mit über: [CSS:] Link erzeugt Grafik mit hover im Web-Programmierung Forum

  1. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert 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
    Registriert 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.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    Danke für den Hinweis.

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

    dms Gast

    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.645
    Zustimmungen:
    596
    Registriert 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 Gast

    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.645
    Zustimmungen:
    596
    Registriert 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.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    *uraltfadenausgrab*

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

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert 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.322
    Zustimmungen:
    22
    Registriert 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...
Ähnliche Themen - [CSS Link erzeugt Forum Datum
Verständnisfrage zu CSS-Klasse(n) Web-Programmierung 09.10.2013
Javascript Text verschwinden lassen (display:none) Web-Programmierung 31.12.2012
CSS Menü erstellen (lassen) Web-Programmierung 15.09.2011
SASS, SCSS-> CSS direkt auf FTP speichern Web-Programmierung 09.09.2011
onclick: css class ändern Web-Programmierung 09.05.2011

Diese Seite empfehlen

Benutzerdefinierte Suche