html text show hilfe

html.de-Forum HTML, XHTML & CSS
1

Hallo Zusammen!

Ich möchte gerne eine Liste erstellen. Keine einfach liste ul oder li.

Es soll hinterher beim onemouseover auf dem Link denn Artikeltext rechts anzeigen, je nach Link verändert sich der Text.

Beim verlassen mit dem mauszeiger, sprich onmouseout sollte der eigendliche Text der standart mässig festgelegt wurde wieder angezeigt werden.

Ich hoffe, ich versteht was ich damit meine…:wink:

Brauche genau 4 Listenelemente

Was habe für möglichkeiten um das zu realisieren?

Html und Css sind für mich eigendlich kein Problem.

Leider habe da momentan schwierigkeiten mit.

Danke schonmal für die Antworten

Gruß

2

Javascript lässt grüßen :smiley: Thread sollte vll. verschoben werden. Ich kann dir aber leider nicht helfen :frowning:

3

Toll, genau das, was ich nicht sehen wollte…weiter so

4

bei onMouseOver text anzeigen, und bei onMouseOut wieder verschwinden lassen!? @ tutorials.de: Tutorials, Forum & Hilfe

Das könnte dir vielleicht helfen.

5

Danke für denn wunderbaren link, ich kanns jetzt endlich :wink:

6

Das sollte doch streng genommen auch mit CSS gehen…

7

Das denke ich mittlerweile auch, bekomme es zwar hin.

Er zeigt bloß jedes mal denn selben inhalt…

wie kann man das gruppieren bsp.

  1. Links. 4 Unterschiedliche Texte mit inhalt

In CSS währe es injedemfall besser für mich.

Aber wenn es nur mit Java machbar ist…dann so

gruß

8

Bin schon weiter…

Habe nun alles soweit fertig, auch das mit dm verschiedenen inhalt, habs irgendwie hinbekommen…

Jetzt möchte ich das er beim drüberfahren auch denn jeweiligen berreich das hintergrundbild ändert.

Momentan habe alle layers die class text_right, wenn ich da jetzt ein Background-image mache übernimmt er das gleich für alle 4 layers, (4 Links in einem Block)

Möchte das bei jedem layer das hintergrund geändert wird, wenn das nicht geht vlt. die hintergrundfarbe…

So sieht dr Code dazu aus.

 
  • Link1
  • Link2
  • Link3
  • Link4
    • -----------------------------------------------------------------------------------------------------------

    #CSS

    #show {
    padding:0;
    }
    div#show li:hover {
    background-color:#FC0;
    }
    .text_right_layer1 {
    width:650px;
    height:151px;
    background-color:#CCC;
    float:right;
    position:relative;
    }
    div#show li.layer1 {
    list-style-type:none;
    color:#fff;
    padding:10px;
    background-color:#6CF;
    text-align:center;
    font-family:Tahoma, Geneva, sans-serif; font-size:14px; font-weight:bold;
    border-bottom-color:#CCC; border-bottom-style:solid; border-bottom-width:thin;
    }
    div#show li.layer1:hover {
    background-color:#FC0;
    }
    div#show li.layer2 {
    list-style-type:none; color:#fff; padding:10px; background-color:#6CF; text-align:center; font-family:Tahoma, Geneva, sans-serif; font-size:14px;
    font-weight:bold; border-bottom-color:#CCC; border-bottom-style:solid; border-bottom-width:thin;
    }
    div#show li.layer2:hover {
    background-color:#F60;
    }
    div#show li.layer3 {
    list-style-type:none; color:#fff; padding:10px; background-color:#6CF; text-align:center; font-family:Tahoma, Geneva, sans-serif; font-size:14px;
    font-weight:bold; border-bottom-color:#CCC; border-bottom-style:solid; border-bottom-width:thin;
    }
    div#show li.layer3:hover {
    background-color:#6F6;
    }
    div#show li.layer4 {
    list-style-type:none; color:#fff; padding:10px; background-color:#6CF; text-align:center; font-family:Tahoma, Geneva, sans-serif; font-size:14px;
    font-weight:bold; border-bottom-color:#CCC; border-bottom-style:solid; border-bottom-width:thin;
    }
    div#show li.layer4:hover {
    background-color:#CF0;
    }

    Danke für jeden Tipp!

    9

    „text_right“ ist keine Klasse sondern eine ID.

    In welchem Bereich willst Du das Hintergrundbild ändern? Bei der ID „text_right“ oder beim Link?

    10

    inhalt als text_right…

    die links sind ok, es geht einzig und allein um die ausgabe rechts positioniert.

    mfg

    11

    Der HTML-Code den Du hier zeigst ist nicht vollständig. Da fehlt um die Liste noch ein

      und dieses müsstest Du links floaten, wenn diese „Tabs“ links und der Inhalt rechts sein sollen.