Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Netzwerke>Mouseover am Tablet?

Mouseover am Tablet?

Metti
Metti11.08.1416:48
Ich nutze gern solche Bilder mit Verweisen:
http://www.familienbande-genealogie.de/Test/Hochzeit.html

Leider funktioniert ein Mouseover auf einem Tablet nicht. Welche Alternative bietet sich hier?

Gruß, Stefan Mettenbrink.
0

Kommentare

Igor Detlev11.08.1416:59
Ein Schalter, der auf einen Tap hin die Infos anzeigt, und beim nächsten Klick wieder ausblendet, oder die Infos blenden nach einer gewissen Zeit selbst wieder aus. Der Schalter könnte neben/über/unter dem Bild oder auch das Bild selbst sein.

Man könnte auch jede Person selbst zum Schalter machen.Wenn man eine Person antippt, wird ihr Name eingeblendet. Würde ich aber nur dann machen, wenn es wirklich für jede Person Infos gibt.
0
Metti
Metti11.08.1417:09
Man könnte auch jede Person selbst zum Schalter machen.Wenn man eine Person antippt, wird ihr Name eingeblendet. Würde ich aber nur dann machen, wenn es wirklich für jede Person Infos gibt.

Das hört sich interessant an.
Welcher HTML-Befehl eignet sich dafür?
Bisher hatte ich <area shape="circle" ... > genutzt. Gern würde ich wieder einen Kreis mit Mittelpunkt und Radius nutzen.

Gruß, Stefan Mettenbrink.
0
Igor Detlev11.08.1417:40
man kann sicher eine runde Schaltfläche benutzen. Die eigentliche Herausforderung sind aber ein paar andere Dinge:

* die Touchtargets müssen vernünftig groß sein
* Touchtargets sollten einen Abstand voneinander haben, damit man nicht aus versehen das falsche trifft
* idealerweise geben die Touchtargets on tap ein visuelles Feedback
* die Zuordnung der eingeblendeten Infos zur jeweiligen Person sollte so eindeutig sein, dass man erkennt, wenn man die falsche Person angeklickt hat

Bei dem abgebildeten Beispielfoto mit den vielen, dicht beieinander stehenden Personen ist das nicht ganz einfach. Das Bild sollte so groß wie möglich abgebildet werden.
0
HumpelDumpel
HumpelDumpel11.08.1417:44
Dann musst du erstmal zu größerer Darstellung übergehen Finger ist kein Mauszeiger.
Mit so nah beieinander liegenden 11er Kreisen geht da gar nix - du brauchst mindestens 44px im Durchmesser, damit das mit Wurschtfingern halbwegs vernünftig funktioniert...
0
Metti
Metti11.08.1419:31
Das gezeigte Beispiel sollte möglichst klein und schell zu laden sein. Für diese Darstellung habe ich ein entsprechendes Programm zum Erzeugen der HTML-Datei.

Ich suche jetzt nur eine Beispieldatei (html), die einen (unsichtbaren) runden Button bietet, der dann den Text einblendet. Größere Bilder sind kein Problem.

Gruß, Stefan Mettenbrink.
0
Metti
Metti12.08.1416:22
Hat keiner so ein Beispiel rumfliegen?

Gruß, Stefan Mettenbrink.
0
HumpelDumpel
HumpelDumpel12.08.1417:06
jquery einbinden...

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('area').on('click',function(e){
e.preventDefault();
            alert($(this).attr('title'));
        });
    })
</script>
0
Metti
Metti12.08.1421:02
jquery einbinden...

Hmmm...
wenn sich nichts anderes findet, schau ich mir das an. Danke.

Lieber wäre mir reines HTML. Zum einen habe ich mit javascript noch nichts gemacht und zum anderen gibt es genug Leute die Scriptblocker einsetzen.

Wenn also noch jemand eine andere Lösung kennt, bin ich daran interessiert!

Gruß, Stefan Mettenbrink.
0
Igor Detlev12.08.1421:20
Ohne JavaScript wird das nicht gehen. Wenn das trigger-event ein hover ist, kann man was eine reine CSS Lösung basteln, aber bei einem click-event brauchst du JS. Außer vielleicht, in dem man Checkboxen missbraucht, aber das wäre ein sehr kruder Hack.

Soll die Info immer an der gleichen Stelle angezeigt werden, oder soll sie je nach Person wo anders stehen? Soll es möglich sein, mehrere Infos gleichzeitig anzuzeigen?
0
sapajou13.08.1401:54
Mach es mit Javascript. Die Wahrscheinlichkeit, dass es jemand auf einem Tablet deaktiviert hat, geht gegen null.
0
Metti
Metti13.08.1406:40
Soll die Info immer an der gleichen Stelle angezeigt werden, oder soll sie je nach Person wo anders stehen? Soll es möglich sein, mehrere Infos gleichzeitig anzuzeigen?

Je Bild soll eine eigene Datei, mit passenden Positionen, erstellt werden.
Mach es mit Javascript. Die Wahrscheinlichkeit, dass es jemand auf einem Tablet deaktiviert hat, geht gegen null.

Gutes, und überzeugendes, Argument.

Da ich, wie erwähnt, noch nichts mit Javascript gemacht habe, würde ich mich über ein vollständiges Beispiel freuen.

Benötige ich zusätzlich zur HTML-Datei eine eigene Scriptdatei oder wird das Javascript in de HTML-Code eingebettet?

Gruß, Stefan Mettenbrink.
0
HumpelDumpel
HumpelDumpel13.08.1409:11
Zwischen <head> und </head> einfügen
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    var xOffset = 10;
    var yOffset = 20;
    $(document).ready(function() {
        $("body").append("<div id='tooltip'></div>");
        $('area').on('click',function(e){
            e.preventDefault();
            $("#tooltip")
                .text($(this).attr('title'))
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .show().fadeIn("fast");
        })
            .on('mouseout',function(){
                $("#tooltip").fadeOut("slow").hide();
            })
    })
</script>
<style>
    #tooltip{
        position:absolute;
        border:1px solid #333;
        background:#f7f5d1;
        padding:2px 5px;
        color:#333;
        display:none;
    }
</style>
0
Metti
Metti13.08.1417:33
Danke.

...

Hmm... nur einfügen macht bei mir nichts.
...
Ich habe mal nach "Savascript Tooltip" gesucht. damit scheint einiges möglich zu sein. Allerdings habe ich noch kein Beispiel gesehen, wo innerhalb eines Bildes mehrere Postionen einen unterschiedlichen Text auf Mausklick anzeigen.

Muss leider noch mal weg, vielleicht hat ja noch jemand ein Beispiel.

Gruß, Stefan Mettenbrink.
0
HumpelDumpel
HumpelDumpel13.08.1418:14
Metti
Hmm... nur einfügen macht bei mir nichts.
Dann machst du was falsch.
Das du jetzt klicken musst ist dir klar? Finger touchdown
0
HumpelDumpel
HumpelDumpel13.08.1418:17
So sieht's dann aus
0
Metti
Metti15.08.1416:52
Dann machst du was falsch.

Stimmt wohl. Das Beispiel ist genau so, wie ich es haben wollte, vielen Dank!

Gruß, Stefan Mettenbrink.
0
Metti
Metti16.08.1408:58
Der Vollständigkeit halber:

Der Test auf http://validator.w3.org zeigte 3 Fehler. Ich habe das Beispiel folgendermaßen geändert:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var xOffset = 10;
var yOffset = 20;
$(document).ready(function() {
$("body").append("<div id='tooltip'>");
$('area').on('click',function(e){
e.preventDefault();
$("#tooltip")
.text($(this).attr('title'))
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.show().fadeIn("fast");
})
.on('mouseout',function(){
$("#tooltip").fadeOut("slow").hide();
})
})
</script>
<style type="text/css">
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
</style>


Das funktioniert bei mir und zeigt keine Fehler mehr im Validator.
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.