Bei mouseover Text an anderer Stelle einblenden

html.de-Forum HTML, XHTML & CSS
1

Hallo liebe Wissenden,

ich möchte in meiner Tabelle 4 Bilder in einer Zeile anzeigen, bei mouseover über einem der Bilder soll 2 Zeilen darunter ein Text eingeblendet werden, der für jedes Bild anders ist.

Bei meiner bisherigen (erfolglosen) Suche im Netz bin ich auf ein paar Schnipsel gestoßen und habe mir nun folgendes zusammengebastelt, was aber (aufgrund meiner Unwissenheit) leider nicht funktioniert.

So lasse ich das Bild einblenden:

<td width="25%" align="center" height="1" valign="top"><img border="0" src="img/downloads.gif" width="35" height="35" onmouseover="document.getElementById('test').firstChild.data='meintext'" onmouseout="document.getElementById('test').firstChild.data='&nbsp;'"></td>Und so versuche ich den Text einzublenden:

<td width="100%" align="center" height="12" valign="top" colspan="4" document.getElementById('txt').firstChild.data></td>

Danke für jede Hilfe!!

Liebe Grüße

2 

<style type="text/css">

.info
{
    display                : none
}

A:hover .info
{
    DISPLAY                : block;
    BACKGROUND            : none transparent scroll repeat 0% 0%;
    margin-LEFT            : 30%;
    PADDING-BOTTOM        : 0px;
    COLOR                    : black;
    PADDING-TOP            : 210px;
    POSITION                : absolute;
    TOP                    : 0px;
    HEIGHT                : 50px;
}
</style>

<a href="bild.jpg">Bild bei hover<span class="info"><img src="bild.jpg"></span></a><br><br>
<a href="dein Link">Text bei hover<span class="info">Text bei hover</span></a>
3

Hallo sysop,

leider ist das nicht das was ich suche. So wie ich Deinen Code verstehe habe ich die Möglichkeit bei einem Mouseover einen Text anzeigen zu lassen. Ich möchte aber 4 Bilder nebeneinander anordnen und bei Mouseover von einem der Bilder einen Text 2 Zeilen weiter unter anzeigen lassen. Für ein anderes Bild soll ein anderer Text an gleicher Stelle kommen.

Bin für weitere Hilfe dankbar!!

4

Du greifst per JavaScript auf die ID „test“ zu. Wo ist diese ID? Ich sehe sie nicht in deinem Code-Schnippsel.

5

Hallo threadi,

ich wollte nur nicht einfach einen Thread erstellen ohne mich vorher mal ansatzweise informiert zu haben. Wie lege ich die ID an bzw. definiere ich sie?

Gruß und danke

6

Da Du eine Tabellenzelle dafür missbrauchst, geht es bei dir so:

<td id="meineid">

Das Attribut id kann in nahezu jedem anderen Element auch eingefügt werden und ermöglicht so den Direktzugriffe auf das Objekt per JavaScript.

7

Hi. Bin ganz neu hier.

Problem:
Ich würde gerne meine Navigationsleiste mit den Seitenlinks etwas aufpeppen. Ich will, dass wenn man mit der Maus über einen solchen Link fährt, eine kleine „Unterbox“ oder ein kleines Menü erscheint, wo dann weitere Links stehen.

Hilfe fänd ich echt klasse!

8

Hallo.

Hier gibts jede Menge Beispiele: CSSplay.
Im Seitenquelltext kann man sich ansehen wie das gemacht wurde.

Falls es Probleme gibt bitte fragen.

Gruss
Elroy

9

tut mir leid, aber auf der seite blick ich irgendwie nicht durch. :confused:

andere methode?.

10

Gibt es nicht. Wo ist das Verständnisproblem bei den Beispielen?

11

Hallo
Dein Beispiel Oben

.info { display : none } A:hover .info { DISPLAY : block; BACKGROUND : none transparent scroll repeat 0% 0%; margin-LEFT : 30%; PADDING-BOTTOM : 0px; COLOR : black; PADDING-TOP : 210px; POSITION : absolute; TOP : 0px; HEIGHT : 50px; }

Bild bei hover


Text bei hoverText bei hover

Ist super. Nur möchte ich das der Text fest steht und der hover Text re daneben erscheint. Ist das Möglich?
Danke für die Hilfe Ingo

12

Versuche es so:

[CODE]
div.test-hover {
display: inline-block;
position: relative;
}

    div.test-hover div.hover-text {
        display: none;
        padding: 0 1em;
        background-color: white;
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 100%;
    }

    div.test-hover:hover div.hover-text {
        display: block;
    }
</style>
<div class="test-hover">Dein Text
    <div class="hover-text">Der Hover-Text</div>
</div>

[/CODE]Aber bedenke, dass es auf Touch-Geräten kein Hover gibt und der Text unsichtbar bleibt.

13

Dieser Thread ist vom 22. September 2010 :frown:

14

Aber bedenke, dass es auf Touch-Geräten kein Hover gibt und der Text unsichtbar bleibt.

Hover ist quasi Touch.