2011-08-26 8 views
6

私はモバイルウェブにとって非常に面倒な問題に遭遇しました。私が持っているウェブサイトは、ほとんどのボタンの画像を使用しています(<a href="..."><img><input type='image'>)。したがって、ユーザーが画像を無効にすると、ウェブサイトは見栄えが悪いだけでなく、サイトをナビゲートするすべての機能も失われます。特に、Androidは画像にaltの情報を表示しないため、表示されない画像には何のヒントもありません。モバイルウェブ:画像が無効になったときの検出

ブラウザでJavaScriptを使用せずに画像が無効になっているかどうかを判断する方法はありますか?私は彼らがそれを無効にしている場合、より一般的なテキストに最適化されたサイトを表示したいと思います。

+4

私は、彼らが無効になっているときにAndroidは、画像のALTプロパティを処理しません驚いて。 – Sirs

+1

私はいくつかの調査をしました。私はそれが2005年以来存在していたウェブキットの問題だと信じています。 –

+0

画像が無効になっていると、背景画像も削除されている可能性があります。画像を背景画像として使うことを提案しようとしていましたが、それがうまくいくかどうかはわかりませんでした。 –

答えて

1

JavaScriptを一切使用しないでですか?私はそれが可能ではない、少なくともクライアント側では恐れています。

HTMLにはNOFRAMEタグとNOSCRIPTタグがありますが、イメージに対応するタグはありません。イメージが無効になっているかサポートされていない場合にのみ内容が表示されます。

イメージをラップするAタグの場合は、画像の代わりにAタグを作成し、ツールチップを表示してイベントを処理する必要があります。

また、イメージが読み込まれない場合でもレイアウトが破損しないようにするには、イメージの通常の高さと幅をAタグに指定します。同様のことは、<input type='image'>タグに対してもスパンタグ内にラップし、正しい属性値を与えることで機能します。例えば

<a href="..." style="height: 25px"; width: 80px;" title="Some tooltip text"> 
    <img...> 
</a> 

<span onclick="some action" style="height: 30px"; width: 70px;" title="Some other tooltip text"> 
    <input type='image'...> 
</span> 
+0

アンカータグのサイズを定義すると完全に動作します。しかし、入力にはまだJavaScriptが必要です。私が考えていた解決策の1つは、残念ながらJavaScriptを有効にした人に画像を制限し、標準のテキストを読み込み、画像が読み込まれるとJavaScriptオンロードを使用してテキストを取り出すことでした。最後に、アンカーのサイズを設定し、画像の入力タイプを避けるのが最善の解決策だと思います。 –

関連する問題