HPを作成しているのですが、ある画像にマウスが触れたら、コメント文が表示されるような(画像のある位置とは別のところに表示)ことはできるのでしょうか?どのようなタグを組めばよいのか、教えていただけないでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

いろんな表示方法があるでしょうが、javaスクリプトは必須になりますね。

エディタがDreamWeaverやホームページビルダーあたりなら簡単にできるはずですが。。。
指定の画像のうえにポインタが来たら文字が書かれてるレイヤーを非表示から表示に切り替えるjavaスクリプトなわけですが。

とりあえずサンプルを作ってみましたが、こんなのでしょうか?

参考URL:http://www6.plala.or.jp/beamz/sample/newpage1.htm

この回答への補足

サンプルまで作っていただき、ありがとうございます。
ソースを貼り付けて、なんとか考えどおりのものができました。本当に助かりました。他の皆様の意見からも得たものが多く、勉強になりました。素人なりに頑張ってみます。

補足日時:2001/06/08 11:21
    • good
    • 0

IEでしかできませんが、(Netscapeではできません)テキストを表示させたい部分のタグに「title="○○"」と入れれば、Windowsで言うToolTipが出てきます。



<td title="表示だよ">

ってな感じです。
    • good
    • 0

こんばんわー


ってちょっと回答遅いかもしれませんが…

おそらく下記のURLみたいな感じでいいと思いますが…どうでしょうか。
とりあえず、HTMLのタグにはコメントを表示するようなタグは無い(ハズ)
なので、JavaScriptで実現することになります。

説明が無いまま作ってしまったので、もしソースを参照してわからないことが
あれば補足としてまた聞いて下さいー。

参考URL:http://members.jcom.home.ne.jp/guru-guru/sample/ …
    • good
    • 0

画像の表示の仕方はわかりますよね?


<img src=...>
それの応用です。↓
<img src="○○○.gif" alt="☆☆">

「☆☆」の部分にコメントを入れてください。

この回答への補足

kurio様 回答ありがとうございます。
私の質問の聞き方がよくなかったです。ある画像にカーソルを重ねると、任意の指定した場所に文字を表示するにはどのようにすればよいでしょうか?せっかく教えていただいたのにすみません。お分かりでしたらご回答お願いいたします。

補足日時:2001/06/07 22:09
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QMovableTypeのタグで、現在表示されているページである事を示すタグはありますか?

自分のウェブサイトをMovable Type 4.1に移行しようと考えています。
そこで質問なのですが、Movable Typeのタグで現在表示されているページを明示出来るようなタグ、
もしくは現在どのページを表示中であるかどうかといった事を格納出来るタグはあるのでしょうか?

具体的には、以下のようなリストでCSSの背景画像置換を使ってロールオーバーメニューを作り
現在のページにはクラス"現在表示されているかどうか"を設定し、表示される画像を変更したいと思っています。
<li id="pagea"><a href="../a.html" class="active">PAGE A</a></li>

また、方法は違ってもこういった事を実現出来る…というタグの使い方があればご教示下さい。
ちょっと分かり難い質問になってしまいましたが、よろしくお願いします。

Aベストアンサー

「現在どのページを表示中であるか」というのがちょっと範囲が広すぎて、「これ」とは言えないんですが…

一例ですが、
「main_indexの時」・「カテゴリーアーカイブテンプレートの時」とかであれば、各テンプレートの最初にMTSetVarでページの値が入っているので、「MTIf name="">で取得できます。
<mt:if name="main_index">
ページがmain_indexの時
<mt:else>
それ以外の時
</mt:if>
みたいな感じで。

>現在どのページを表示中であるかどうかといった事を格納出来るタグ

このあたりを使えばできないでしょうか。
MTSetVarBlock
http://movabletype.jp/documentation/appendices/tags/setvarblock.html

Q背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。
4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。


【現状】
1,2,4は出来ています。
ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。


【ソースコード】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
text-align: center;
margin:0;
padding:0;
}
#wrapper_index_up,
#wrapper_index_bottom {
margin: 0 auto;
text-align: left;
}
#wrapper_index_up,
#wrapper_index_bottom,
#header,
#contents,
#footer {
width: 1000px;
}
#header {
background-color:red;
}
#top_img_wrapper {
background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif);
background-repeat:no-repeat;
background-position: center;
}
-->
</style>
</head>
<body>
<div id="wrapper_index_up">
<div id="header">ヘッダー</div>
</div>
<div id="top_img_wrapper">
<img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" />
</div>
<div id="wrapper_index_bottom">
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

どうかよろしくお願いします。

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツ...続きを読む

Aベストアンサー

ANo.2です。

> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elements/centering.html

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"でtopとleftの位置を50%とする事でウィンドウ(画面)に対して常に上下左右の中央に配置される様にしてあります。これと同様の事をやりたいだけなら簡単ですが、お望みの表示結果に関していくつか確認させて頂きたい事があります。
まずは下記のサンプルを試してみて下さい。
----------------------------------------------------------------------
【修正版サンプル(2)】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
text-align: center;
margin:0;
padding:0;
}

#top_img_wrapper,
#wrapper_index_up,
#wrapper_index_bottom {
width: 1000px;
margin: 0 auto;
text-align: left;
}

#header {
background-color: red;
}

#top_img_wrapper {
background: url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif) center center no-repeat;
}

#top_img {
position:absolute;
width: 139px;
height: 92px;
top: 0;
left: 50%;
margin-left: -70px;
}
-->
</style>
</head>
<body>

<div id="wrapper_index_up">
(wrapper_index_upの領域 ここから)
<div id="header">ヘッダー</div>
(wrapper_index_upの領域 ここまで)
</div>

<div id="top_img_wrapper">
(top_img_wrapperの領域 ここから)
<div id="top_img"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="中央固定表示させる画像X" width="139" height="92" /></div>
<p class="hoge">top_img_wrapper内で画像Xの下に表示する最初の子要素(テキストなど)</p>
(top_img_wrapperの領域 ここまで)
</div>

<div id="wrapper_index_bottom">
(wrapper_index_bottomの領域 ここから)
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
(wrapper_index_bottomの領域 ここまで)
</div>

</body>
</html>
----------------------------------------------------------------------
前回のサンプルからの修正点は以下のみです。

【1】背景画像を指定する#top_img_wrapperとは別個に、中央固定表示画像を挿入する為だけのブロック#top_imgを追加。
【2】#top_img内で、画像Xをbodyに対しての絶対配置として指定。(ここの手法については参考サイトにポイントの解説が載っているので各プロパティの設定の理屈は省略します)

これで#top_img_wrapperの位置や幅とは関係なく、#top_imgは常に画面の左上を基点とした絶対配置になる為、水平方向はウィンドウ幅に対して常にセンタリングされる事になります。ただし、質問者様の場合は参考サイトと違って、画像Xの上下にヘッダー・コンテンツ・フッターというブロックが存在していますから、それらと、画像Xが(参考サイトの様に制限なく)重なってしまっては困るのでは?現に、上記サンプルでは、垂直方向に対する絶対位置を0にしてしまっているので、画面の上端にくっついてしまい、ヘッダーの上に画像Xが重なってしまう状態になっています。

これらを回避する為には、更にいくつかの条件を明確にして頂く必要があります。

(1)#top_imgの描画開始位置は、上からどれだけの位置にあればよいのか?例えば、ヘッダーを収める#wrapper_index_upの高さが50pxと決まっており、画像Xはそのすぐ下に、という事であれば、topプロパティの位置を指定する。
#wrapper_index_up {
height: 50px;
}
#top_img {
top: 50px;←修正
}
(2)#top_img_wrapperに表示させたい要素は、実は背景画像しかないのか?そうであれば、背景画像の全体像が必ず描画される様に、#top_img_wrapperに背景画像と同じ高さを指定しておく必要がある。例えば質問文中のソースの実寸通りであれば、下記の様に。
#top_img_wrapper {
height: 92px;←追加
}
(3)(2)と違い、#top_img_wrapperにはテキストなどの子要素があり、画像Xの下から表示させたい、というのであれば、#top_img_wrapperの高さの確保を最低92px以上に変更した上で、#top_img_wrapperの中で画像Xの下に配置する要素にはmargin-topなどで画像X分の余白を上方向に取ってから描画を開始する様にする。
#top_img_wrapper {
min-height: 92px;←追加
_height: 92px;←min-heightが無効なIE6用ハック
}
#top_img_wrapper p.hoge {
margin: 92px 0 0 0;
}

…という感じですが。いかがでしょうか。

ANo.2です。

> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elements/centering.html

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"...続きを読む

Q画像の上にマウスがのったときに左上にアイコンが表示させないようにしたい

xpだけなのかわかりませんが、画像がブラウザで表示されているときに、マウスを上に乗っけると画像の左上に保存を促すようなスーツケースと、他にも数個のアイコンが表示されます。
これを表示させないようにすることはhtmlで制御可能でしょうか?

Aベストアンサー

IE6の新機能かな?
<head>~</head>内に
<meta http-equiv = "imagetoolbar" content = "no" >
を入れてみましょう。

Qコメントを表示するタグ

 よくCG系サイトをまわっていると見るのですが、一覧のページ並んでいる小さい画像をクリックしようとマウスカーソルを合わせると、時々小さい黄色い枠が横に出てきてコメントが表示されますよね。それを自分のページにも使いたいと思うのですが、どのような用語で検索してよいのか分かりません。ご存知の方、よろしくお願いいたします。

Aベストアンサー

title属性は、通常の文字列でも使用できます。
title属性は一般属性なので、多くのタグと共に使用可能です。

<p>ネスケ6かIE4.0以降の場合、title属性で<span title="この部分がツールチップ表示される">ツールチップ表示</span>されます。

上記で「ツールチップ表示」の上にマウスカーソルを当てると、ツールチップが表示されます。

ちなみに私も普段、秀丸エディタでHTML手書きしています。
# マクロである程度自動化していますが。

とほほさんのサイトは重宝しています。

参考URL:http://tohoho.wakusei.ne.jp/html/attr/title.htm

Qwindowsは画像にマウスオンで画像の名前が表示される

ウインドウズでマウスカーソルを合わせると
alt="×××"が勝手に表示されます。
非常に迷惑なので消したいのですが、方法が分かりません。
どなたかご教授願います。

Aベストアンサー

Windowsではなく、ブラウザの機能です。
firefoxやIE8では、画像が表示されているときは表示されないはずです。
しかし、title属性で指定されている場合は表示されます。
 たとえばGoogleの検索結果の右上に表示されるGoogleのロゴはaltはありませんが、titleは「googleホームへ」という設定がされていますから、これらのブラウザでも表示されます。
<a title="Google ホームへ" href="http://www.google.co.jp/webhp?hl=ja" id="logo">Google<img width="164" height="106" alt="" src="/images/nav_logo8.png"></a>

【引用】____________ここから
alt = text [CS]
 この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、代替テキストを指定する。・・・【中略】・・・非テキスト系の要素である、IMG、AREA、 APPLET、INPUT要素は、著者に対し、当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。 代替テキストを指定すると、グラフィックディスプレイ端末がないユーザ、フォーム非対応のブラウザを使っているユーザ、視覚障害のあるユーザ、音声合成装置のユーザ、グラフィック系ユーザエージェントを画像を表示しない設定で使っているユーザ、等の助けになる。
  alt属性は、IMG要素とAREA要素では必ず指定しなければならない。・・・【中略】・・・
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで13.8 代替テキストの指定方法( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#adef-alt )]より

Windowsではなく、ブラウザの機能です。
firefoxやIE8では、画像が表示されているときは表示されないはずです。
しかし、title属性で指定されている場合は表示されます。
 たとえばGoogleの検索結果の右上に表示されるGoogleのロゴはaltはありませんが、titleは「googleホームへ」という設定がされていますから、これらのブラウザでも表示されます。
<a title="Google ホームへ" href="http://www.google.co.jp/webhp?hl=ja" id="logo">Google<img width="164" height="106" alt="" src="/images/nav_logo8.p...続きを読む


このカテゴリの人気Q&Aランキング

おすすめ情報