nicht angemeldet klawischnigg
Matthias Apsel
klawischnigg
klawischnigg
Rolf B
JürgenB
Rolf B
JürgenB
klawischnigg
JürgenB
Der Martin
Hallo!
Ich habe eine SVG-Karte mit hover effekt für Außendienstmitarbeiter erstellt.
Wenn ich auf die Bereiche einen E-Mail Link zu den jeweiligen Außendienstmitarbeiter lege, wird beim Klick darauf das entsprechende E-Mail Programm gestartet und die „Visitenkarte“ verschwindet kurz, wird aber dann wieder eingeblendet und bleibt auch beim hovern stehen, außer man klickt in einem leeren Bereich.
Wie kann ich die „Visitenkarte“ nach dem klicken ausblenden?
Danke für eure Bemühungen.
Lg. Jürgen
<style>
.test-map path:hover {
fill: #d6aead;
}
.AD {
fill: #bcb7b7;
stroke: #010101;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 0.1px;
}
.test-map .info {
opacity: 0;
font-size: 25px;
fill: #6d6d6d;
pointer-events: none;
font-family: NHaasGroteskDSPro-55Rg, Neue Haas Grotesk Display Pro;
background-color: #6d6d6d;
}
#WAD2:hover ~ .WAD2,
#WAD2:focus ~ .WAD2,
#WAD1:hover ~ .WAD1,
#WAD1:focus ~ .WAD1,
#AD7:hover ~ .AD7,
#AD7:focus ~ .AD7,
#AD6:hover ~ .AD6,
#AD6:focus ~ .AD6,
#AD5:hover ~ .AD5,
#AD5:focus ~ .AD5,
#AD4:hover ~ .AD4,
#AD4:focus ~ .AD4,
#AD3:hover ~ .AD3,
#AD3:focus ~ .AD3,
#AD2:hover ~ .AD2,
#AD2:focus ~ .AD2,
#AD1:hover ~ .AD1,
#AD1:focus ~ .AD1 {
opacity: 1;
transition: all 0.5s linear;
}
.TP {
fill: #6d6d6d;
fill-rule: evenodd;
background-color: lightgrey;
}
.RE {
fill: #DEDEDE;
fill-rule: evenodd;
}
</style>
<!-- AD1 -->
<a xlink:href="mailto:ad1@ad1.com" id="AD1">
<path id="KAD1" class="AD" d="....."
</a>
<g class="info AD1" transform="translate(260,40)">
<use xlink:href="#tooltippAD1" />
<text x="60" y="30">AD1 </text>
<text x="60" y="73"> 000000</text>
<text x="60" y="110">ad1@ad1.com</text>
</g>
Hi there,
Ich habe eine SVG-Karte mit hover effekt für Außendienstmitarbeiter erstellt.
Wenn ich auf die Bereiche einen E-Mail Link zu den jeweiligen Außendienstmitarbeiter lege, wird beim Klick darauf das entsprechende E-Mail Programm gestartet und die „Visitenkarte“ verschwindet kurz, wird aber dann wieder eingeblendet und bleibt auch beim hovern stehen, außer man klickt in einem leeren Bereich.
Naja, ich schätze, das Verhalten willst Du so, sonst hättest Du diese Transitionsanweisung nicht eingebaut, oder hast Du da einfach irgendetwas übernommen und zusammengestoppelt?
Wie kann ich die „Visitenkarte“ nach dem klicken ausblenden?
Worauf willst Du klicken? Aber abgesehen davon, ist die einfachste Lösung, das, worauf Du klickst, mit einem Event-Handler zu versehen und der entsprechenden Visitenkarte bei Klick dann die Style-Eigenschaft "display:none" zu geben (dann mußt Du allerdings dafür sorgen, daß sie bei hovern mit "display:block" als Zusatzanweisung wieder sichtbar wird...)
Hallo klawischnigg,
und der entsprechenden Visitenkarte bei Klick dann die Style-Eigenschaft "display:none" zu geben (dann mußt Du allerdings dafür sorgen, daß sie bei hovern mit "display:block" als Zusatzanweisung wieder sichtbar wird...)
etwas, was nicht da ist, kann man nicht hovern, dasselbe auch bei visibility. Aber opacity dürfte gehen.
Bis demnächst
Matthias
Hi there,
und der entsprechenden Visitenkarte bei Klick dann die Style-Eigenschaft "display:none" zu geben (dann mußt Du allerdings dafür sorgen, daß sie bei hovern mit "display:block" als Zusatzanweisung wieder sichtbar wird...)
etwas, was nicht da ist, kann man nicht hovern
Ich neige mein Haupt vor so viel Weisheit...😉
Im Ernst, ich hab das so verstanden, daß er über die Landkarte hovern will, nicht über die (verschwundene) Visitenkarte. Deswegen hab ich ihn ja auch gefragt, worauf er denn nun klicken will, damit die Karte verschwindet...
Aber opacity dürfte gehen.
Afaik hängt das vom Browser ab. Ohne es jetzt überprüft zu haben glaube ich mich zu erinnern, daß opacity:0 von einigen Browsers genauso "gewertet" wird wie visibility:hidden. Aber anyway, mit opacity:0.001 oder so müßte es klappen - nicht sichtbar, aber doch irgendwie da...😉
Hallo klawischnigg.
Worauf willst Du klicken?
beim markierten Bereich [linkes Bild mit mailto link]
Ich hätte das Gebiet vom AD1 genommen damit eine mail zum Außendienst verfasst werden kann. "gehovert" wird über die Landkarte und die Visitenkarten werden ja nach Gebiet an unterschiedlicher Stelle eingeblendet.
Hi there,
Worauf willst Du klicken?
beim markierten Bereich [linkes Bild mit mailto link]
Ich hätte das Gebiet vom AD1 genommen damit eine mail zum Außendienst verfasst werden kann. "gehovert" wird über die Landkarte und die Visitenkarten werden ja nach Gebiet an unterschiedlicher Stelle eingeblendet.
Dann mußt Du auf den Bereich in der Landkarte, der zur Visitenkarte gehört, einen entsprechenden Eventhandler legen. Kennst Du Dich mit Javascript aus?
Hallo JuergenS,
der Punkt ist, dass Du Maus- und Tastaturbedienung unterstützen willst. Du blendest das Info-Fenster bei :hover und :focus ein. Und das führt zu Schwierigkeiten, denn :hover und :focus sollen das Info-Fenster zeigen, müssen es auch, aber sie können sich auf unterschiedliche Zonen deiner Seite beziehen. Und ein :focus bleibt da, auch wenn die Maus schon weg ist.
Der :focus kommt spätestens beim Klick auf den Link. Dann startet das Mailprogramm - und bekommt den Fokus vom Betriebssystem. Ein Fokus ist ein Highlander, es kann nur einen geben. Sobald das Mailprogramm schließt, kehrt der Fokus an seinen alten Platz im zuletzt geöffneten Fenster zurück, und öffnet das Info-Fenster wieder.
Rein mit CSS kann man das nicht lösen. Irgendwie musst Du bemerken, dass der Link geklickt wurde und dann das Infofenster ausblenden. Aber das ist gar nicht so einfach. Deine CSS Regeln sagen ja: ZEIGS MIR bei Fokus und Hover. Und Du musst dem hinzufügen: „Not right now, dear, I've got a headache mail“. Der Anfang dieses "Not right now" ist einfach festzulegen: Wenn der Link geklickt wird (netterweise hilft uns der Browser und schickt das click Event auch bei einem Fingertap oder der Enter-Taste). Aber wann ist Ende? Wann darf das Infofenster wieder erscheinen? Wenn man mit der Maus hinuntergeht? Der Fokus bleibt ja da. D.h. wenn Du beim mouseleave Event die Sperre entfernst, poppt das Info gleich wieder auf. Zusammen mit dem anderen Info-Fenster des Links, über dem die Maus jetzt hovert.
Ich weiß nicht, ob es dafür wirklich eine Lösung gibt. Die diversen Tutorien, die ich dazu kenne, ignorieren das Problem. Man hat den Fokus HIER und hovert DORT - und es sind zwei Popups offen. Viele Dropdown-Menüs machen sowas. Mich stört das, und ich finde es verwirrend.
Aber was wäre die Lösung? Sobald die Maus über einem fokussierbaren Dings auf der Seite hovert, schickt man den Fokus dorthin? Kann man mit JavaScript machen, aber das kann die Anwender ebenfalls in schwere Verwirrung stürzen. Man will ein Formular ausfüllen und zeigt mit der Maus auf "Name". Nun stört der Mauszeiger beim Schreiben, man schiebt die Maus weg, dummerweise auf das Feld "Wohnort". Schwupp, ist der Fokus dort. Das ist auch nicht die beste Lösung.
@Gunnar Bittersmann, was sagen die UI Kardinäle und Päpste zu dieser Zwickmühle?
Rolf
Hallo Rolf,
Aber was wäre die Lösung?
vor der Frage nach der Lösung zum hoover-Problem sollte die Frage stehen: was ist mit Besuchern ohne Maus? Und wenn ich eine mauslose Lösung gefunden habe, brauche ich dann noch hoover?
Gruß
Jürgen
Hallo JürgenB,
wenn ich eine mauslose Lösung gefunden habe, brauche ich dann noch hoover
Nein, du kannst auch Miele, Bosch oder Dyson kaufen. Von Kirby rate ich ab, zu schwer und zu laut.
Was das hover angeht - es gibt sehr viele Mausschubser auf dieser Welt. Eine Seite, die nicht auf typische Mausaktionen reagiert, fällt durch, würde ich sagen.
Rolf
Hallo Rolf,
wenn ich eine mauslose Lösung gefunden habe, brauche ich dann noch hoover
Nein, du kannst auch Miele, Bosch oder Dyson kaufen. Von Kirby rate ich ab, zu schwer und zu laut.
😀
Was das hover angeht - es gibt sehr viele Mausschubser auf dieser Welt. Eine Seite, die nicht auf typische Mausaktionen reagiert, fällt durch, würde ich sagen.
aber auch wenn du die vielen Mausschubser glücklich machst, brauchst du eine Lösung für die vergleichbar große Gruppe der Bildschirmgrabbler. Und wenn du du denen die nötigen Infos zeigst, sollten die Mausschubser auch zufrieden sein.
Aus meiner Sicht kann eine Technik, die nur bei der Hälfte der Besucher ankommt, nur mit viel Umsicht eingesetzt werden.
Gruß
Jürgen
Hi there,
aber auch wenn du die vielen Mausschubser glücklich machst, brauchst du eine Lösung für die vergleichbar große Gruppe der Bildschirmgrabbler. Und wenn du du denen die nötigen Infos zeigst, sollten die Mausschubser auch zufrieden sein.
Geh', hast Du Dir die Seite/Graphik von JürgenS angeschaut? Das was er da plant ist ohnehin nur für Desktoprechner geeignet und da gibts vermutlich niemanden, der weiß, wie ein Rechner ohne Maus aussieht geschweige denn bedient werden kann. Dem Orignalposter jedenfalls ist mit solchen Überlegungen sicher nicht geholfen und seinen Besuchern wird's wurscht sein.
Aus meiner Sicht kann eine Technik, die nur bei der Hälfte der Besucher ankommt, nur mit viel Umsicht eingesetzt werden.
Wie gesagt, nachdem wir seine Besucher nicht kennen, ist diese Erkenntnis theoretisch vielleicht richtig, praktisch aber nutzlos (warum nur fällt mir da jetzt ein Witz über die Microsoft-Hotline ein?)...
Hallo,
OK, vielleicht bin ich durch meinen Beruf und meine Familie zu viel mit jungen Leuten zusammen. Aber die kleinen Kästchen, mit denen man auch telefonieren können soll, sind allgegenwärtig.
Ich wollte ja auch nur darauf hinweisen, dass man das Problem mit dem hover evtl. besser durch Verzicht auf hover lösen kann.
Gruß
Jürgen
Hi there,
OK, vielleicht bin ich durch meinen Beruf und meine Familie zu viel mit jungen Leuten zusammen. Aber die kleinen Kästchen, mit denen man auch telefonieren können soll, sind allgegenwärtig.
Ja, aber damit kann man die Landkarten von JürgenS ohnehin nicht bedienen.
Ich wollte ja auch nur darauf hinweisen, dass man das Problem mit dem hover evtl. besser durch Verzicht auf hover lösen kann.
Naja, wenn er hovern will - des Menschen Wille ist ja bekanntlich sein Himmelreich...😉
Hallo Rolf,
Der :focus kommt spätestens beim Klick auf den Link. Dann startet das Mailprogramm - und bekommt den Fokus vom Betriebssystem.
sollte man meinen. Ist aber nicht immer so. Ich bin regelmäßig immer wieder irritiert, wenn ich in meinem Firefox oder Pale Moon unter Linux Mint einen mailto-Link anklicke. Denn dann rödelt zwar für einen Moment hörbar die Festplatte, aber es passiert - anscheinend - nichts. Nur wenn man aufmerksam ist, sieht man einen neu hinzugekommenen Button in der Taskleiste, der das im Hintergrund geöffnete und nicht focussierte New-Mail-Fenster vom Thunderbird repräsentiert.
Ein Fokus ist ein Highlander, es kann nur einen geben.
Auch das ist vom verwendeten Desktop-System abhängig. Einige Linux-Desktops verwalten den Focus (oder zumindest die visuelle Hervorhebung des focussierten Elements) offenbar für jedes Fenster getrennt: Markiere (focussiere) ich eine Datei im Datei-Manager und wechsle dann zum Browser, bleibt die markierte Datei markiert. Das kann manchmal sehr verwirrend sein - zum Beispiel, weil im Dateimanager selbst nicht unterscheidbar ist, ob der tatsächliche Focus nun auf dem markierten Eintrag in der Dateiliste steht, oder auf dem identisch angezeigten Verzeichnis-Eintrag in der Baumansicht.
Was für ein großer Unterschied das ist, merkt man schnell, wenn man leichtfertig die Del-Taste drückt, um die markierte Datei zu löschen. Wenn man Pech hat, löscht man damit das ganze Verzeichnis!
Ich weiß nicht, ob es dafür wirklich eine Lösung gibt. Die diversen Tutorien, die ich dazu kenne, ignorieren das Problem. Man hat den Fokus HIER und hovert DORT - und es sind zwei Popups offen. Viele Dropdown-Menüs machen sowas. Mich stört das, und ich finde es verwirrend.
Würde ich auch so sehen, aber mir sind solche Fälle noch nicht aufgefallen.
Aber was wäre die Lösung? Sobald die Maus über einem fokussierbaren Dings auf der Seite hovert, schickt man den Fokus dorthin? Kann man mit JavaScript machen, aber das kann die Anwender ebenfalls in schwere Verwirrung stürzen. Man will ein Formular ausfüllen und zeigt mit der Maus auf "Name". Nun stört der Mauszeiger beim Schreiben, man schiebt die Maus weg, dummerweise auf das Feld "Wohnort". Schwupp, ist der Fokus dort. Das ist auch nicht die beste Lösung.
Schlimm genug, dass viele Webseiten (aber auch viele Desktop-Programme) fast überall irgendwas aufpoppen lassen, wenn man mit der Maus draufzeigt. In MS Office zum Beispiel kann man die Maus fast nur nur auf der Titelleiste des Programmfensters parken. Oder eben irgendwo außerhalb - aber dann poppt halt ein Thumbnail von der Taskleiste oder ein Info-Tip eines anderen Programms auf. Sehr lästig.
Live long and pros healthy,
Martin