[CSS:] Link erzeugt Grafik mit hover

  1. maceis

    maceis Thread Starter MacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    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!
     
    maceis, 15.11.2005
    #1
  2. cordney*

    cordney* MacUser Mitglied

    Mitglied seit:
    22.04.2003
    Beiträge:
    756
    Zustimmungen:
    24
    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*
     
    cordney*, 15.11.2005
    #2
  3. maceis

    maceis Thread Starter MacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    Danke für den Hinweis.

    Ich möchte es aber gerne mit CSS lösen.
     
    maceis, 15.11.2005
    #3
  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.
     
    dms, 15.11.2005
    #4
  5. maceis

    maceis Thread Starter MacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    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>
     
    maceis, 15.11.2005
    #5
  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.
     
    dms, 15.11.2005
    #6
  7. maceis

    maceis Thread Starter MacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    Danke für den Hinweis.
    Ich werd mal sehen, ob ich es in CSS/HTML hinbekomme.
     
    maceis, 16.11.2005
    #7
  8. moses_78

    moses_78 MacUser Mitglied

    Mitglied seit:
    08.04.2005
    Beiträge:
    1.264
    Zustimmungen:
    22
    *uraltfadenausgrab*

    Dieses müsste auch im IE funktionieren.
     
    moses_78, 03.03.2006
    #8
  9. maceis

    maceis Thread Starter MacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    Das geht doch einfacher mit dem title Attribut (wenn ich das jetzt auf die Schnelle richtig verstanden habe).
     
    maceis, 03.03.2006
    #9
  10. moses_78

    moses_78 MacUser Mitglied

    Mitglied seit:
    08.04.2005
    Beiträge:
    1.264
    Zustimmungen:
    22
    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.
     
    moses_78, 03.03.2006
    #10
Die Seite wird geladen...
Ähnliche Themen - [CSS Link erzeugt
  1. bolshi
    Antworten:
    1
    Aufrufe:
    898
    Difool
    09.10.2013
  2. knastmoench
    Antworten:
    12
    Aufrufe:
    2.535
    knastmoench
    05.01.2013
  3. Goya
    Antworten:
    12
    Aufrufe:
    1.713
    macfan97
    13.10.2012
  4. Cobato
    Antworten:
    5
    Aufrufe:
    1.287
    SignoreRossi
    15.09.2011
  5. .specter.
    Antworten:
    0
    Aufrufe:
    809
    .specter.
    09.09.2011