Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 16

Thema: Wie mit hover ein Textfenster öffnen?

  1. #1
    HTML Newbie
    Registriert seit
    07.06.2008
    Ort
    Schramberg
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Wie mit hover ein Textfenster öffnen?

    Hallo,

    wie kann ich beim Überfahren eines Gebietes mit dem
    Mauscursor ein Fenster öffnen?

    Mein vergeblicher Versuch endete so:



    <html>

    <head>

    <style type="text/css">
    a.info
    {
    position:relative;
    z-index:1;
    color:#000000;
    text-decoration:none;
    }

    a.info:hover
    {
    z-index:2;
    }

    a.info span
    {
    display: none;
    }

    a.info:hover span
    {
    display:block;
    position:absolute;
    top:0em;
    left:2em;
    width:490;
    border:1px solid #12127D;
    background-color:#ff6600;
    color:#000000;
    text-align: left;
    padding: 5px;
    font-size: 0.8em;
    }
    </style>
    </head>

    <body bgcolor="#000080">

    <div>
    <map name="hauptfeld">
    <area shape="circle" coords="330,057,057" href="Erde.htm" alt="">

    <a class="info" href="#">
    <area shape="rect" coords="221,348,437,370">
    <span>
    <p align="justify">
    Hier steht der Text, der in einem Fenster erscheinen soll.
    </p>
    </span>
    </a>
    </map>



    [img]bilder/hauptfeld.gif[/img]
    </p>
    </div>
    </body>
    </html>
    Dank für Hinweise,
    Werner.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard

    mit javascript gibt es eine menge evemt-ereignisse und abfragen wie zB elementspezifische mauspositionen, etc...

    http://de.selfhtml.org
    Something big is coming. And there will be pirates and ninjas and unicorns...

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    und solange der bereich den du mit diesem effekt versehen willst ein link ist geht das auch mit der css-eigenschaft hover...
    http://css4you.de
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    07.06.2008
    Ort
    Schramberg
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Danke für die Hinweise.
    Mir fehlt leider nur der Hinweis, wie ich das Fenster nur über
    dem angegebenen Map-Bereich öffnen kann.
    <area shape="rect" coords="221,348,437,370">
    Siehe:
    http://www.guenzl.net/privates/versuch.gif

    Dieses ist eine "map". Klickt man auf einen der Texte in einem der gelben
    Hintergründe, wird je einen Link zu einem weiteren HTML-File geöffnet.
    So gut.

    Nun soll sich ein Textfenster öffnen, dann wenn sich der Mauskursor
    über einem rechteckigen Bereich eines der roten Pfeile befindet, und
    dann wieder verschwinden, wenn der Kursor diesen Bereich verlässt.

    Werner.

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    die entsprechenden lösungen hängen von der methode ab, die du nutzen willst..
    bei javascript geht des anders, als bei css!
    du musst dich entscheiden, womit du deine infos realisieren willst....
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    07.06.2008
    Ort
    Schramberg
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von synaptic
    die entsprechenden Lösungen hängen von der Methode ab,
    die du nutzen willst..
    bei javascript geht des anders, als bei css!
    du musst dich entscheiden, womit du deine Infos realisieren willst....
    Man rät mir von Javascript ab, weil viele Browser bzw. Nutzer dies blocken.
    Also konzentriere ich mich auf CSS, siehe mein Anfangspost.

    Werner.

  8. #8
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    ja dann musst du des so machen wie in sejumas link beschrieben, jedoch musste halt die position immer so abändern, daß die infos an der gleichen stelle auftauchen
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    In dem von mir genannten Link wird die Positionsangabe damit definiert:
    a.info:hover span
    {
    display:block;
    position:absolute;
    top:2em;
    left:2em;

    width:15em;
    border:1px solid #12127D;
    background-color:#fc0;
    color:#000;
    text-align: center;
    padding: 5px;
    font-size: 0.8em;
    }
    Wenn sich unterschiedliche Infofenster mit unterschiedlichen Positionen öffenen sollen, dann müsstest du entsprechend viele CSS-Klassen bilden.
    Z.B. die erste wie im Beispiel beschrieben.
    Dann kopierst du den ganzen CSS-Code nochmal und ersetzt "info" mit "info2", "info3" usw.
    Im HTML-Teil ebenso auf "class="info2" usw. verweisen.

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    07.06.2008
    Ort
    Schramberg
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Dank für den Hinweis.

    Zitat Zitat von sejuma
    In dem von mir genannten Link wird die
    Positionsangabe
    des erscheinenden Tooltips
    damit definiert:

    a.info:hover span
    {
    display:block;
    position:absolute;
    top:2em;
    left:2em;

    width:15em;
    border:1px solid #12127D;
    background-color:#fc0;
    color:#000;
    text-align: center;
    padding: 5px;
    font-size: 0.8em;
    }
    Das aber ist -- zunächst -- nicht das Problem. Nicht beim
    Überfahren eines Textes oder Wortes soll der Tooltip erscheinen,
    sondern beim Überfahren des Areals in der ImageMap:
    www.guenzl.net/privates/versuch.gif
    das ich im Beispiel grau hinterlegt habe und das mit Coords
    beschrieben wird.

    Wie ich es sehe, müssten also die Koordinaten des grauen Feldes
    irgendwo stehen.

    Werner.

Ähnliche Themen

  1. Antworten: 4
    Letzter Beitrag: 09.06.2008, 19:37
  2. hover
    Von gast im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 24.10.2007, 09:30
  3. Hover
    Von Prinz im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 06.05.2007, 21:44
  4. a hover....
    Von Dark_Dog im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 11.04.2007, 16:50
  5. Hover?
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 22.08.2004, 23:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •