Textlink mit Bild-Hover-Effekt

R

RuthG

Mitglied
Hallo,

wahrscheinlich gibt's davon schon haufenweise Hilfestellungen ich weiß nur leider nicht wie man so was nennt.

Ich suche eine Möglichkeit ein Bild darzustellen, wenn ich den Mauszeiger über einen Textlink bewege bzw. darauf klicke. Am schönsten fände ich eine Lösung die mir das Bild gleich neben dem Mauszeiger schwebend anzeigt.
Oder das beim Anklicken ein Popup sich öffnet in der Größe des Bildes.

Kann mir da jemand weiterhelfen?
Danke, LG Ruth
 
Danke für den Tipp. Genau so was habe ich gesucht. Das einzige Problem ist nur, dass sich das Bild immer rechts von der Maus befindet. Manchmal aber verschwindet dadurch das Bild (teilweise) aus dem Sichtfeld. Gibt es auch eine Möglichkeit das sich das Bild am Sichtfeld orientiert?

Danke, LG Ruth
 
RuthG hat gesagt.:
Danke für den Tipp. Genau so was habe ich gesucht. Das einzige Problem ist nur, dass sich das Bild immer rechts von der Maus befindet. Manchmal aber verschwindet dadurch das Bild (teilweise) aus dem Sichtfeld. Gibt es auch eine Möglichkeit das sich das Bild am Sichtfeld orientiert?
Zum Vergrößern anklicken....
Die gibt es, mittels einer absoluten Positionierung.

=> http://www.brunildo.org/test/CPopA.html (basiert auf reinem CSS, kommt also ohne JS aus) :)

Abgewandeltes Beispiel für die ersten drei oberen Demo-Links (= CSS-Selektor #nav1 a .pop {...}):

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Absolutely Positioned Pure CSS PopUps</title>
<style type="text/css">
body {
        font-family: Arial, Helvetica, sans-serif;
        color: #000;
        background-color: #fff;
        margin: 0;
        padding: 0.5em;
        line-height: 1.2;
}
.nav {
        float: left;
        width: 13em;
}
.nav a {
        display: block;
        color: #00f;
        background-color: #fcc;
        margin-bottom: 0.5em;
        padding: 0.5em;
        text-decoration: none;
}

.nav a:hover {
        color: #c00;
        border-width: 0; 
}

#nav1 a .pop {
        display: block;
        color: #000;
        background-color: #fcc;
        width: 11em;
        padding: 0.5em;
        border: 0.5em #f00 solid;
        position: absolute;
        top: auto;
        right: 0; /* von mir editiert, anstelle von left:13.7em */
        z-index: 10; 
        visibility: hidden;
}
#nav1 a:hover .pop {
        visibility: visible;
}

#nav2 a .pop {
        display: none;
}
#nav2 a:hover .pop {
        display: block;
        color: #000;
        background-color: #fcc;
        width: 11em;
        padding: 0.5em;
        border: 0.5em #f00 solid;
        position: absolute;
        top: auto;
        left: 13.7em;
        z-index: 10;
}

.main {
        margin-left: 13.5em;
        border: solid 0.5em #999;
        background-color: #dfd;
        padding: 0.5em;
}
pre {
        margin: 0.8em 2em;
        padding: 0;
}
</style>
<!--[if lt IE 8]><style>
.nav a {
        zoom: 1;
/*        _height: 0; fa male a IE5.0 */
}
</style><![endif]-->
</head>

<body>

<div><a name="a"></a><a name="b"></a><a name="c"></a></div>

<div class="nav" id="nav1">
        <a href="#a">
                Link number one
                <span class="pop">
                        This is a long explanation of link one, blah, blah , blah, ...
                </span>
        </a>
        <a href="#b">
                Link number two Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                <span class="pop">
                        This is an explanation of link two, due, zwei, 2, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                </span>
        </a>
        <a href="#c">
                Link number three
                <span class="pop">
                        This is about link three, link three is a very interesting link, blah blah blah, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor.
                </span>
        </a>
</div>
<div class="main">
        The boxes at the left have associated CSS popups, with relevant styles:
<pre>
#nav1 a .pop {
        display: block;
        position: absolute;
        top: auto;
        visibility: hidden;
}
#nav1 a:hover .pop {
        visibility: visible;
}</pre>
        They work in IE5.5+/Win, Moz, Saf, Op7+, IE5/Mac<br/>
        Don't work in IE5.0/Win, Op6
</div>
<div style="clear:both">&nbsp;</div>

<div class="nav" id="nav2">
        <a href="#a">
                Link number one
                <span class="pop">
                        This is a long explanation of link one, blah, blah , blah, ...
                </span>
        </a>
        <a href="#b">
                Link number two Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                <span class="pop">
                        This is an explanation of link two, due, zwei, 2, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                </span>
        </a>
        <a href="#c">
                Link number three
                <span class="pop">
                        This is about link three, link three is a very interesting link, blah blah blah, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor.
                </span>
        </a>
</div>
<div class="main">
        The boxes at the left have associated CSS popups, with relevant styles:
<pre>
#nav2 a .pop {
        display: none;
}
#nav2 a:hover .pop {
        display: block;
        position: absolute;
        top: auto;
}</pre>
        They work in IE5+/Win, Moz, Saf, Op8+, IE5/Mac<br/>
        Don't work in Op6; rendering problems in Op7 <!-- eliminabili con position:relative su 'a' -->
</div>
<div style="clear:both">&nbsp;</div>


<p><a href="./">CSS tests home</a></p>
</body>
</html>

Anstelle des nachfolgenden Textes bindest du hier eben ein Bild ein.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück