- ベストアンサー
ポインタをあてると下に説明が表示されるようにしたい
いつもお世話になっております。 私は先日、ホームページビルダー10で趣味サイトを作成したのですが、ちょっと質問があるのです。 私のサイトはイラストサイトで、数個展示しております。 黒い四角(■)をクリックすると、画像がそれぞれ表示されるようにしています。 でも、考えてみれば閲覧者様はクリックしなきゃ何のイラストか解からないわけですよね。 よく他のサイトさんで、同じように■をクリックして画像表示する…というのを見かけますが、その時は大抵■にポインタ(矢印)をあてると下に説明(イラストのキャラの名前など)が出てきます。 私もそのようにしたいのですが、どのようにしたら良いのでしょうか？ どなたか教えて下さい！ お願いします(>_<)。
- ホームページ作成ソフト
- 回答数8
- ありがとう数2
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
お詫びと補足です。 ANo.6の方が言われているように私の回答は画像への代替テキストなので今回の質問にはあてはまりません。 (ANo.1の■が画像の箇所を私が勘違いして聞いた様です。) ビルダー10では、フォントスタイルの設定というものが、インライン要素にあたるようです。 ただ、書式-文字飾りの属性としてフォントスタイルの設定<SPAN>と属性画面にいけますが、残念ながらｔtitleに関する項目が無い様です。 その為ANo.5の方が書かれている様に直接ソースに追記する事になります。勘違いさせて申し訳ないです。 尚、視力に障害をもつ私どもはサイトを閲覧の際に「ページ読み上げソフト」を使用している場合があります。 その為、サイト自身を理解するのに不要なデザイン上の画像にまで代替テキストを記述する必要はありません。 ただし記述することを正式な書式と制定した協会からは矛盾するので文字を書かずに「alt=""」にする事で 多くの読み上げソフトでもその箇所をスキップする事が出来る様になりました。 もう少しサイトを観る方へのアクセスビリティなどを考えますと上記の内容も知って作成していただくと大変助かります。 ＞alt属性はimg要素には必須、書き忘れ厳禁の属性で、代替テキストを記述します。 他の方の回答にこうありますが、最後の”代替テキストを記述”を勘違いされて全てに文字を書いている方もいたのでせっかくなので書かせていただきました。
その他の回答 (7)
- giko001
- ベストアンサー率31% (5/16)
私は<img src="URL" border=0 alt="説明"> としています。
- 08narutotoruna
- ベストアンサー率25% (5/20)
回答にはなりませんが、alt属性を記述すれば大丈夫、なんて見当ハズレなことを言っている方もいますが、信用しないようにしてください。 alt属性はimg要素には必須、書き忘れ厳禁の属性で、代替テキストを記述します。 イラストの補足にalt属性を使っている、困った人をよく見かけますが、イラストが表示されない、表示したくない方のために、alt属性にはイラストを見なくても、何のイラストか分かるようなテキストを書いてください。 ■にマウスカーソルを乗せると、ポップアップを表示するようにしたいのであれば、No.5の方のいうとおり、インライン要素にtitle属性を記述すればいいです。 画像にポップアップを表示させたいときにも、img要素にtitle属性を記述すればいいです。 title属性のホームページビルダーでの記述方法は分かりませんので、調べるか、他の方が回答してくれるの待つなりしてください。 もし、■にマウスカーソルを乗せると、ポップアップではなくて、ステータスバーにテキストを表示させたいという意味の質問なら、javascriptを使えば可能です。 こちらも、ホームページビルダーではどのようにやればできるのかは分からないので、調べるなり、他の方の回答を待つなりしてください。
- SortaNerd
- ベストアンサー率43% (1185/2748)
文字でしたら <span title="表示させたい文字列">■</span> 画像ならaltも使えますね。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>Sample</title> <script type="text/javascript"> <!-- function show(id){ document.getElementById(id).style.display="block"; } function hide(id){ document.getElementById(id).style.display="none"; } //--> </script> </head> <body> <a href="Bel.jpg" onmouseover="show('Bel')" onmouseout="hide('Bel')">■</a><br /> <div id="Bel" style="display:none"> ベルダンディ</div> <a href="Uld.jpg" onmouseover="show('Uld')" onmouseout="hide('Uld')">■</a><br /> <div id="Uld" style="display:none"> ウルド</div> <a href="Scd.jpg" onmouseover="show('Scd')" onmouseout="hide('Scd')">■</a><br /> <div id="Scd" style="display:none"> ウルド</div> </body> </html>
- lanif
- ベストアンサー率62% (170/273)
ホームページビルダー10で御使用ですのでそちらでの代替テキストの指示の方法をご案内致します。 HTMLソースから直接書き込む場合は該当のIMGタグ中に alt="表示したいテキスト"を半角スペースを空けて追加してみて下さい。 またページ編集モードなどで指定する場合は、画像を選び-右クリック-属性の変更または、「Altキー+Enterキー」のショートカットで同様に属性の変更画面に移れます(上段のメニューでも殆んど同様）。 属性画面の「代替テキスト」の箇所に表示したいテキストを記入します。これで表示可能になると思います。(ブラウザによって表示は若干違いあり) また作品を紹介となると大量に画像に上記の代替テキストを追加する際には、「ツール」-アクセシビリティチェックを利用すると代替テキストが無い箇所を探すのに便利です。 ※アクセシビリティではサイトを利用する人の利便性を考えて代替テキストなどを画像につけることを推奨していますが、強制では無いので無理に全てにつけなくても表示に特別な問題にはなりません。 それでは貴方の質問への回答が閉じられることを祈りつつ…頑張って下さいね。ビルダーのヘルプで代替テキストの説明は御覧になれるはずです。
- akira18
- ベストアンサー率0% (0/2)
己の無知を暴く覚悟で回答します(笑) タグ(HTML)の <body></body> の中に、 <img src="xxxxx" title="xxxxx"> と書けば、 あなたの望んでいる形になると思います。 kousyuさんのお役に立てられるか正直わかりませんが、 まあ気休めにでも試してみてください。
- Jodie0625
- ベストアンサー率30% (397/1288)
サムネイル表示のページにするというのもありますが、数が多かったら大変ですね。 ■が画像であれば、代替テキストを指定することで可能ですが、文字では不可です。 <img>タグのaltキーワードです。
お礼
沢山のアドバイスありがとうございました！ 失礼ではありますが、こちらに御礼をまとめさせて頂きます。 皆さんの回答のお陰で無事解決致しました！ 私自身素人なものですから、皆さんのアドバイスを頂けてとても勉強になりました(*^^)v 本当にありがとうございました！