mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 25.06.2025 06:35 Benutzername: Passwort: Auto-Login

Thema: Ebene einblenden bei Mousover und an Mauszeiger halten vom 29.06.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Ebene einblenden bei Mousover und an Mauszeiger halten
Autor Nachricht
baumeisterBOB
Threadersteller

Dabei seit: 08.09.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 29.06.2004 12:02
Titel

Ebene einblenden bei Mousover und an Mauszeiger halten

Antworten mit Zitat Zum Seitenanfang

Hallo,

ich möchte bei mousover eines Textlinks eine Ebene einblenden. Solange sich die Maus über dem Link befindet soll die Ebene eingeblendet bleiben und der Maus folgen. Beim mouseout soll sie wieder verschwinden. Hatte schon mal ein Script, weiß aber nicht mehr woher bzw. wo es jetzt ist

Hoffe ich hab mich einigermaßen verständlich ausgedrückt....

Grüße und danke...
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 48
Geschlecht: Männlich
Verfasst Di 29.06.2004 12:48
Titel

Antworten mit Zitat Zum Seitenanfang

Also hier schon mal die erste Hälfte.
Das ist ein altes Script, daß ich mal schnell angepasst habe. Einblenden der Textebene und ausblenden funktioniert.
Jetzt müßtest Du nur nur den Mausfolger-Teil schreiben.
Das Problem dabei ist natürlich immer, daß man den Code für die verschiedenen Browser anders schreiben muß. Damit dieses Script hier auch in Netscape 4.7, im alten IE und in aktuellen Browsern läuft, mußte man den Code drei mal schreiben...

Tja und solche Mausverfolger machte ich am liebsten mit Flash. Das ginge ruckzuck damit...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
   <title>Layer</title>

   <style type="text/css">
   
   a      {
            font-family:verdana,arial,helvetica,sans-serif;
            font-size:9pt;
            color:#004080;
            text-decoration:none;
            font-weight:bold;
         }
   
   a:hover   {
            text-decoration:underline;
         }
   
   a:active{
            color:#666666;
            text-decoration:none;
         }
   
   
   
   #text1   {
            position:absolute;left:100;top:200;
            font-family:verdana,arial,helvetica,sans-serif;font-size:13px;color:#000000;
            visibility:hidden;
         }
   
   #text2   {
            position:absolute;left:100;top:200;
            font-family:verdana,arial,helvetica,sans-serif;font-size:13px;color:#000000;
            visibility:hidden;
         }
   
   #text3   {
            position:absolute;left:100;top:200;
            font-family:verdana,arial,helvetica,sans-serif;font-size:13px;color:#000000;
            visibility:hidden;
         }
   
   #text4   {
            position:absolute;left:100;top:200;
            font-family:verdana,arial,helvetica,sans-serif;font-size:13px;color:#000000;
            visibility:hidden;
         }
   
   </style>

   <script type="text/javascript">

   function zeigText(ziel)
   {
      if (document.all)
      {
         document.all[ziel].style.visibility = 'visible';
      }
      else if (document.layers)
      {
         document.layers[ziel].visibility = 'show';
      }
      else if (document.getElementById)
      {
         document.getElementById(ziel).style.visibility = 'visible';
      }
   }
   
   
   function textWeg(ziel)
   {
      if (document.all)
      {
         document.all[ziel].style.visibility = 'hidden';
      }
      else if (document.layers)
      {
         document.layers[ziel].visibility = 'hide';
      }
      else if (document.getElementById)
      {
         document.getElementById(ziel).style.visibility = 'hidden';
      }
   }

   </script>
</head>


<body>

<a href="#" onmouseover="zeigText('text1')" onmouseout="textWeg('text1')">Text 1</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onmouseover="zeigText('text2')" onmouseout="textWeg('text2')">Text 2</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onmouseover="zeigText('text3')" onmouseout="textWeg('text3')">Text 3</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onmouseover="zeigText('text4')" onmouseout="textWeg('text4')">Text 4</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


<div id="text1">Hier steht irgendein Text</div>

<div id="text2">Hier steht irgendein Text<br> Hier steht irgendein Text<br> Hier steht irgendein Text</div>

<div id="text3">oder der Inhalt der Seite,<br> auf die der Link gesetzt ist</div>

<div id="text4">blablabla<br>blablabla</div>

</body>
</html>
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Nimroy
Community Manager

Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 47
Geschlecht: Männlich
Verfasst Di 29.06.2004 13:11
Titel

Antworten mit Zitat Zum Seitenanfang

Nur der Interesse halber: Wie soll es zu einem MouseOut kommen, wenn die Ebene der Maus folgt?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
baumeisterBOB
Threadersteller

Dabei seit: 08.09.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 29.06.2004 13:29
Titel

Antworten mit Zitat Zum Seitenanfang

@rob
danke für den Code schau ich mir gleich mal an.
ja mit flasch wärs wirklich kein problem. aber: "wir machen hier eine business seite die zielgruppe könnte ja kein flash haben und dann ist ein tragendes element nicht verfügbar." Zitat Chef Menno!


@Nimroy
die verfolgt ihn nur wenn ich mir der Maus innerhalb des textlinks bin sobald ich draussen bin -> mouseout -> ebene weg


Zuletzt bearbeitet von baumeisterBOB am Di 29.06.2004 13:34, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Nimroy
Community Manager

Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 47
Geschlecht: Männlich
Verfasst Di 29.06.2004 13:51
Titel

Antworten mit Zitat Zum Seitenanfang

Danke.

@deinem Chef *balla balla* ^^
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Imagemap mit Mousover
Problem mit JS mousover
Als Anfänger Galerie mit MousOver in Flash - machbar?
mousover DIV ein-/ausblenden Problem (z-index, verzögerung)
[JS] popup im Vorderdgrund halten
Mauszeiger mit-capturen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.