[Erledigt] Mouseover richtig deaktivieren!?

owii · 30.12.2009, 11:31

Hallo,

erstmal sorry für den Threadtitel, ka wie ich es genauer beschreiben soll

Die Situation:

Ich habe einen simplen Mouseover-Effekt, bei diesem Effekt erscheint ein Layer auf der Seite.

Bild1

Bild2

Auf Bild 1 seht ihr die Grafik mit dem Mouseover-Effekt, bei Bild 2 das Layer welches sich öffnet.

Zitat:

function visibilitySpracheIN(a)
{
document.getElementById(a).style.visibility = "visible";
}
function visibilitySpracheOUT(a)
{
document.getElementById(a).style.visibility = "hidden";
}

Das Problem:

Das Problem ist: wenn ich von der Grafik in Bild 1 runtergehe und eine Sprache im Layer wählen möchte (Bild2) verschwindet das Layer logischerweise wegen:

Zitat:

onmouseout="visibilitySpracheOUT('sprache')"

Was kann ich jetzt machen damit man die Maus NACH UNTEN in das Layer reinbewegen kann?

Aber wenn ich die Maus nach RECHTS, LINKS oder OBEN bewege das Layer verschwindet?

Und, natürlich muss das Layer auch verschwinden wenn ich die Maus aus dem LAYER raus bewege.

Kann mir bitte jemand helfen? Oder nur nen kleinen Tipp geben?

Eine Idee von mir war jetzt 4 unsichtbare Layer drumherum zu definieren mit dem visibilitySpracheOUT-Befehl, aber es muss doch einfacher gehen? Vorallem muss man die koordinaten dann jedes mal ändern wenn eine neue Sprache dazu kommt. Wobei man dass auch berechnen könnte.

Twols · 30.12.2009, 12:28

Erfinde doch das Rad nicht neu und nimm eine Liste. Dein Dropdown ist eine Liste zweiter Ebene, die erste Ebene wird "gehovert" solange du dich auf der unteren Ebene befindest.

Code:

<ul class="level-1">
<li>
     <ul class="level-2">
           <li></li>
           <li></li>
     </ul>
</li>
<li></li>
<li></li>
</ul>

Wenn du mit der Maus über dem <li> des layer-1 bist, zeigst du layer-2 an. Wenn du dann mit der Maus über layer-2 bist, wird kein Mouse-Over ausgelöst, layer-2 ist ein Kind von layer-1. Mouse Over ist erst dann wenn du beide Listen verlässt.

Funktioniert übrigens mit reinem CSS auch. Gibt's an die 10^10 Beispiele im Netz.

owii · 30.12.2009, 12:38

Mh... verstehe ich jetzt nicht direkt auf anhieb.

Ich habe aber auch ein Tabellen-Design und kein CSS-Design. Macht dass dabei einen Unterschied?

Chriz · 30.12.2009, 13:40

Hallo,

finde ich eine gute Idee von Twols, hab das ganz früher (Jahr 2000?!) immer mit einem Timeout geskriptet, der vom onmouseout ausgelöst wird und nach Ablauf prüft, ob man den Bereich verlassen hat (oder sich über anderen gültigen Bereichen bewegt). So ist das aber natürlich eleganter.

Twols · 30.12.2009, 13:43

Nein. Es gibt sowas wie CSS-Design nicht. Du benutzt CSS sowieso zum stylen der Elemente, egal ob dein Layout mit Tabellen oder Floats erstellt wurde.

Schau dir das an: A List Apart: Articles: Drop-Down Menus, Horizontal Style

Gibt's bestimmt irgendwelche Generatoren, die ein DropDown automatisch erstellen und CSS ausspucken.

nikosch · 30.12.2009, 13:46

Im Endeffekt brauchst DU Dir nur gängige Dropdownmenüs anzusehen, Suckerfish ist so eines. Listen zu verwenden ist semantische korrekt(er) und deshalb heute quasi-Standard. Als netten Nebeneffekt hast Du auch in der Ansicht ohne Stylesheets eine sinnvolle Auswahlstruktur.

[edit] Zu langsam.

owii · 30.12.2009, 15:23

So, ich glaube ich habe gemacht was ihr meint, also ich habe eine Übergeordnete Tabelle gemacht und mitlerweile komme ich auf den Ersten Menüpunkt (EN) aber sobald ich auf DK/FR möchte ist ende (das Layer verschwindet einfach wieder)

Selbstverständlich habe ich den Code (onmouseout="visibilitySpracheOUT('sprache')") immer nur 1x eingebaut! aber das sind alle stellen die ich versucht habe.Ich weiss echt nicht weiter *cry*

Die Mouseover-Effekte von den Grafiken habe ich auch schon testweise rausgenommen weil die sich evtl nicht vertragen aber funktioniert auch nicht -.- Ich habe sogar extra diese Change-Grafik nochmal mit ins Layer gepackt so dass ich da keinen Mouseover-Effekt mehr habe sondern die Orginal Grafik einfach überdeckt wird ... damit ich auch wirklich alles "in einem Paket" habe aber ...

Code:

// Layer startet

<div id="sprache" class="sprachew" onmouseout="visibilitySpracheOUT('sprache')" >

// Übergeordnete Tabelle startet

<table width="478" onmouseout="visibilitySpracheOUT('sprache')" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right" onmouseout="visibilitySpracheOUT('sprache')">

// die 3 Sprachen welche man wählen kann
    
    <table width="86" onmouseout="visibilitySpracheOUT('sprache')" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td onmouseout="visibilitySpracheOUT('sprache')" align="right">

    <img src="Bilder/de-navi-6-mouseover.jpg" width="86" height="40" />
    <a href="#" class="hidefocus"><img src="Bilder/change-en.gif" onmouseover="this.src='Bilder/change-en-mouseover.gif';" onmouseout="this.src='Bilder/change-en.gif';" alt="Change EN" name="Change EN" width="86" height="25" border="0" /></a>
    <a href="#" class="hidefocus"><img src="Bilder/change-dk.gif" onmouseover="this.src='Bilder/change-dk-mouseover.gif';" onmouseout="this.src='Bilder/change-dk.gif';" alt="Change DK" name="Change DK" width="86" height="25" border="0" /></a>
    <a href="#" class="hidefocus"><img src="Bilder/change-fr.gif" onmouseover="this.src='Bilder/change-fr-mouseover.gif';" onmouseout="this.src='Bilder/change-fr.gif';" alt="Change FR" name="Change FR" width="86" height="25" border="0" /></a>

   </td>
  </tr>
</table>

// 3 Sprachen wählen - ENDE

</td>
  </tr>
</table>

// Übergeordnete Tabelle - ENDE

</div>

// Layer - ENDE

Twols · 30.12.2009, 15:44

Keine Tabelle, eine Liste! <ul>

Das was du da machst, ist furchtbar, lies doch einfach nach, wie man ein Dropdown-Menu mit Listen und CSS macht.

Hier ist es sehr gut erklärt: A List Apart: Articles: Drop-Down Menus, Horizontal Style

Tabellen sind nur dafür da, um tabellarischen Inhalt anzuzeigen, keine Navigation im Header damit zu erstellen.

Wenn du schon das Rad selbst erfinden möchtest, dann wenigstens ein rundes.

P.S.: Am Besten erst lernen, dann anwenden: http://www.galileodesign.de/katalog/...314A4VU97xHe-g

owii · 30.12.2009, 19:39

Ab und zu weiss ich echt nicht was in meinem Kopf vor sich geht

Danke! Es funktioniert!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Umlaute mit Request richtig übertragen	Lebenssonde	JavaScript, Ajax und mehr	4	28.07.2009 15:10
Mouseover über JS oder CSS?	halskrause	JavaScript, Ajax und mehr	3	04.07.2009 23:34
parameter von interfaces in klassen richtig mit anwenden?	litterauspirna	PHP Tipps 2009	27	30.06.2009 20:58
[Erledigt] Javascript-Code in einem document.write richtig durchführen + richtiges Po	BartTheDevil89	JavaScript, Ajax und mehr	15	29.11.2008 14:08
PNG's werden im IE6 nicht richtig angezeigt!	litterauspirna	Off-Topic Diskussionen	6	15.09.2008 15:13
PHP richtig lernen!	TeazY	PHP Tipps 2008	5	01.02.2008 21:50
Headerwechsel per Mouseover	tinchen	HTML, Usability und Barrierefreiheit	8	26.11.2006 23:06
[Erledigt] Modularisierung: Wie macht man es richtig?		PHP-Fortgeschrittene	1	12.03.2006 16:00
magic_quotes_gpc deaktivieren		PHP-Fortgeschrittene	2	04.01.2006 20:43
[Erledigt] Lieg ich da richtig?		Datenbanken	4	31.08.2005 13:21
[Erledigt] VARIABLEN WERDEN NICHT RICHTIG VERARBEITET!!!! HILFE		PHP Tipps 2005-2	6	02.07.2005 18:32
PHP funktioniert nicht richtig?!		PHP Tipps 2005-2	26	11.06.2005 09:05
Bild in Zeile bei Mouseover ändern	Tschuu	HTML, Usability und Barrierefreiheit	7	11.03.2005 12:42
Variable wird nicht richtig übergeben		PHP Tipps 2005	17	16.01.2005 16:51
Formular, welches prüft, ob eingegebene Antwort richtig....		PHP Tipps 2004	10	15.08.2004 22:18


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

30.12.2009, 12:28
Twols Neuer Benutzer Registriert seit: 25.12.2009 Beiträge: 11 PHP-Kenntnisse: Fortgeschritten	Erfinde doch das Rad nicht neu und nimm eine Liste. Dein Dropdown ist eine Liste zweiter Ebene, die erste Ebene wird "gehovert" solange du dich auf der unteren Ebene befindest. Code: <ul class="level-1"> <li> <ul class="level-2"> <li></li> <li></li> </ul> </li> <li></li> <li></li> </ul> Wenn du mit der Maus über dem <li> des layer-1 bist, zeigst du layer-2 an. Wenn du dann mit der Maus über layer-2 bist, wird kein Mouse-Over ausgelöst, layer-2 ist ein Kind von layer-1. Mouse Over ist erst dann wenn du beide Listen verlässt. Funktioniert übrigens mit reinem CSS auch. Gibt's an die 10^10 Beispiele im Netz.

30.12.2009, 12:38
owii Benutzer Registriert seit: 01.05.2009 Beiträge: 43 PHP-Kenntnisse: Anfänger	Mh... verstehe ich jetzt nicht direkt auf anhieb. Ich habe aber auch ein Tabellen-Design und kein CSS-Design. Macht dass dabei einen Unterschied?

30.12.2009, 13:40
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Hallo, finde ich eine gute Idee von Twols, hab das ganz früher (Jahr 2000?!) immer mit einem Timeout geskriptet, der vom onmouseout ausgelöst wird und nach Ablauf prüft, ob man den Bereich verlassen hat (oder sich über anderen gültigen Bereichen bewegt). So ist das aber natürlich eleganter.

30.12.2009, 13:43
Twols Neuer Benutzer Registriert seit: 25.12.2009 Beiträge: 11 PHP-Kenntnisse: Fortgeschritten	Nein. Es gibt sowas wie CSS-Design nicht. Du benutzt CSS sowieso zum stylen der Elemente, egal ob dein Layout mit Tabellen oder Floats erstellt wurde. Schau dir das an: A List Apart: Articles: Drop-Down Menus, Horizontal Style Gibt's bestimmt irgendwelche Generatoren, die ein DropDown automatisch erstellen und CSS ausspucken.

30.12.2009, 13:46
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Im Endeffekt brauchst DU Dir nur gängige Dropdownmenüs anzusehen, Suckerfish ist so eines. Listen zu verwenden ist semantische korrekt(er) und deshalb heute quasi-Standard. Als netten Nebeneffekt hast Du auch in der Ansicht ohne Stylesheets eine sinnvolle Auswahlstruktur. [edit] Zu langsam. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

30.12.2009, 15:44
Twols Neuer Benutzer Registriert seit: 25.12.2009 Beiträge: 11 PHP-Kenntnisse: Fortgeschritten	Keine Tabelle, eine Liste! <ul> Das was du da machst, ist furchtbar, lies doch einfach nach, wie man ein Dropdown-Menu mit Listen und CSS macht. Hier ist es sehr gut erklärt: A List Apart: Articles: Drop-Down Menus, Horizontal Style Tabellen sind nur dafür da, um tabellarischen Inhalt anzuzeigen, keine Navigation im Header damit zu erstellen. Wenn du schon das Rad selbst erfinden möchtest, dann wenigstens ein rundes. P.S.: Am Besten erst lernen, dann anwenden: http://www.galileodesign.de/katalog/...314A4VU97xHe-g Geändert von Twols (30.12.2009 um 15:47 Uhr).

30.12.2009, 19:39
owii Benutzer Registriert seit: 01.05.2009 Beiträge: 43 PHP-Kenntnisse: Anfänger	Ab und zu weiss ich echt nicht was in meinem Kopf vor sich geht Danke! Es funktioniert!