iPadのSafariでWebページを表示するときに、Webページのコンテンツにカーソルを合わせる方法はありますか?具体的には、Ask Different iPad Contestホームページで個々のアバターにカーソルを合わせようとしていました。MacまたはPCでは、ホバリングで個人がいつレベルを完了したかが表示されますが、iPadではそれを確認できませんでした。
iPadのSafariでWebページを表示するときに、Webページのコンテンツにカーソルを合わせる方法はありますか?具体的には、Ask Different iPad Contestホームページで個々のアバターにカーソルを合わせようとしていました。MacまたはPCでは、ホバリングで個人がいつレベルを完了したかが表示されますが、iPadではそれを確認できませんでした。
回答:
マスターyodaだけがここにアカウントを持っている場合、実装の詳細がWebテクノロジーと人間のインタラクションデザインの出会いをすばやく掘り下げるので、彼は「タップするかタップしない、ジェダイだけがホバリングできる」と言うかもしれません。
そのうさぎの穴を少し下がって、優れたWeb開発者がSafari のTouchEventクラスについて知っていることを指摘することもできます。ターゲットに触れると、Webページのコンテンツに目に見える効果があります。
タッチがマウス中心のモデルを反映することを期待するのは一般的に 悪い設計ですが、それはこの特定のサイトの設計が間違っているという意味ではありません。シミュレートされたマウスオーバーイベントに依存するよりも簡単なタッチ用の設計方法があると考える前に、よく考えてください。
touchstart
イベントをホバリングの代替として使用できるということですか?JavaScriptで行う必要がありますか?ありがとう!
いいえ、タッチデバイスでそれを行う方法はありません。iPadが画面上で指がホバリングしていることを検出する方法はありません:)(技術的にはこれは完全に可能ですが、理論的には将来のiPadモデルに追加される可能性があります。)
ただし、JavaScriptを使用してtitle
、http://thenewipadishere.com/の画像リンクの属性値を表示できます。
[].forEach.call(document.images, function(element) {
var span = document.createElement('span');
span.innerText = element.title;
element.parentNode.insertBefore(span, element);
});
ブックマークレット形式:
javascript:[].forEach.call(document.images,function(b){var a=document.createElement("span");a.innerText=b.title;b.parentNode.insertBefore(a,b)});
それをコピーして貼り付け、選択したiOSデバイスにブックマークとして追加します。次に、http://thenewipadishere.com/にアクセスして、ブックマークを選択します。
title
記述しましたが、属性付きの画像を使用するすべてのページで機能します。