プロが教えるわが家の防犯対策術！

オンマウスで画像とテキストの指定位置表示について

解決済

  • 質問者：noro6857
  • 質問日時：
  • 回答数：7件

サムネイル画像にオンマウスにより、拡大画像が表示されるようにしています。
TABLEを使い左のTDにサムネイル羅列、右にオンマウス時の拡大画像表示です。
この拡大画像表示の際、画像の下または指定位置に「画像ごとのコメント」を表示したいのですが、当方scriptの知識がなくソースを借用しているためカスタマイズがわかりません。

<script type="text/javascript">
<!--
function over( name ) {
var e = document.getElementById( "gazou" );
e.innerHTML = '<img src="' + name + '.JPG">';
e.style.position = "relative";
e.style.top = 000;
e.style.left = 000;
}
function out() {
var e = document.getElementById( "gazou" );
e.innerHTML = '';
}
//-->
</script>
------------------
※画像（サムネイル表示部分）
<img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945');" onmouseout="out(light/img/DSC_1310);">
※拡大画像表示部分に
<span id="gazou"></span>
を記述してあります。
-----------------------
書き加える部分について教えていただければと思います。

なお、サムネイルがたくさんあって縦長になると下に移動した場合、画像表示位置が上にかくれてしまうので、サムネイルの移動といっしょに表示位置が常に画面内に入るようにできるとなおいいのですが。
（現在はスクロールしない範囲内のサムネイル数にしています）

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.7ベストアンサー

  • 回答者： is_may
  • 回答日時：

こうですね。



<script type="text/javascript">
<!--
function over( name , comm ) {
document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示
document.getElementById( "comment" ).innerHTML = comm;//コメントを表示
document.getElementById("field").style.position="relative";//CSSの相対位置指定
document.getElementById("field").style.top=***+document.body.scrollTop;//イベントが発生したY位置
}
function out() {
document.getElementById( "gazou" ).innerHTML =document.getElementById( "comment" ).innerHTML = '';
}
//-->
</script>
<table>
<tbody>
<tr>
<td width="150"><img src="light/img/DSC_0945_thumb.jpg" target="_top" onmouseover="over('light/img/DSC_0945','100枚のうちの001(DSC_0945.JPG)');" onmouseout="out();"><br>
<img src="light/img/DSC_0953_thumb.jpg" target="_top" onmouseover="over('light/img/DSC_0953','100枚のうちの002(DSC_0953.JPG)');" onmouseout="out();"><br>
</td>
<td width="450" valign="top">
<table id="field">
<tbody>
<tr>
<td id="gazou"></td>
</tr>
<tr>
<td id="comment" class="com"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

function over()内の4行目、
「***」は表示する画像サイズなどに合わせて任意の数値を入力してください。

document.getElementById("field").style.top=100+document.body.scrollTop;

など。
    • good
    • 0
    • 件
通報する
この回答へのお礼

長時間にわたりご親切に対応してくださりありがとうございました。
いくつかのパターンの知識を得ることができましたので、早速活用させていただきます。
なお、関連で「オンクリック」による方法を別スレでもうひとつ質問しますので、目にとまりましたらよろしくお願いします。
こちらは締め切らせていただきます。
ありがとうございました。

通報する
お礼日時：2007/03/23 06:13

No.6

  • 回答者： is_may
  • 回答日時：

もう解決しているかもしれませんが、サムネイルの横ではなく、スクロールしても毎回同じ位置に拡大画像を表示したいのであれば以下のような感じです。



document.getElementById("field").style.top=***+document.body.scrollTop;//イベントが発生したY位置

この回答への補足

そそっかしいですね。
scriptで***のままやってました。

これで、左TOPに常に表示できるようになりました。
本当にいろいろありがとうございました。

補足日時：2007/03/22 23:23
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ページエラーが出てしまったのでもう一度整理させてください。

<script type="text/javascript">
<!--
function over( name , comm ) {
document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示
document.getElementById( "comment" ).innerHTML = comm;//コメントを表示
document.getElementById("field").style.position="relative";//CSSの相対位置指定
document.getElementById("field").style.top=***+document.body.scrollTop;//イベントが発生したY位置
}
function out() {
var e = document.getElementById( "gazou" );
e.innerHTML = '';
}
//-->
</script>
</HEAD>

<BODY>
<TABLE>
<TR>
<TD width=150>
<img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945','100枚のうちの001(DSC_0945.JPG)');" onmouseout="out();"><br>//サムネイル１

<img src="light/img/DSC_0953_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0953','100枚のうちの002(DSC_0953.JPG)');" onmouseout="out();"><br>//サムネイル２
</TD>

<TD width=450 valign="top">
<table id="field">
<tr><td id="gazou"></td></tr>
<tr><td id="comment" class="com"></td></tr>
</table>
</TD>
</TR>
</TABLE>
でいいでしょうか？

通報する
お礼日時：2007/03/22 23:04

No.5

  • 回答者： is_may
  • 回答日時：

すみません、No.4の訂正です。



document.getElementById("field").style.top=event.y-***;//イベントが発生したY位置
***に適当な数値を入れてください。

のプログラム部分を以下のように修正お願いします。

document.getElementById("field").style.top=event.y-***+document.body.scrollTop;//イベントが発生したY位置
    • good
    • 0
    • 件
通報する
この回答へのお礼

締め切る予定でしたが、もうひとつアドバイスいただければとありがたいと思い厚かましく質問させていただきます。
しかし、よく考えたら、このスクロールは全画面スクロールを含めてホイールマウス利用者にはとても便利ですが、そうでない人には、サムネイルのオンマウスとスクロールバーを頻繁に移動させることがけっこう面倒な気がしました。
そこで、これに、オートスクロールをかけられないかご相談しました。
（オートスクロール開始・停止）
スクロールをスタイルシートで入れる方法を検討中ですが、教えていただいたように次のようにしました。
（全画面スクロールだと上に見出しが常にほしいため）
また、オンマウスのかわりにオンクリックにすることも簡単に変更できますでしょうか？
なお、ノーフレーム版単シートでの検討です。

<style type="text/css">
div.mini{
width:150;
height:450;
overflow-y:scroll;
}
</STYLE>
<script type="text/javascript">
<!--
function over( name , comm ) {
document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示
document.getElementById( "comment" ).innerHTML = comm;//コメントを表示
}
function out() {
var e = document.getElementById( "gazou" );
e.innerHTML = '';
}
//-->
</script>
</head><body>
<center>
<TABLE BORDER=1>
<TR>
※サムネイル部分
<TD width=150 align="center">
<br><br>
<div class="mini">
<img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945','コメント');" onmouseout="out(light/img/DSC_0945;"><br><br>
<img src="light/img/DSC_0953_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0953','コメント');" onmouseout="out(light/img/DSC_0953;"><br><br>
<img src="light/img/DSC_0954_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0954','コメント');" onmouseout="out(light/img/DSC_0954;"><br><br>
</div>
</TD>

※表示部分
<TD align="center" width=500 valign=top style="padding-top:2em;">
<span id="comment"></span><br>
<span id="gazou"></span>
</TD>
</TR>
</TABLE>

通報する
お礼日時：2007/03/23 14:17

No.4

  • 回答者： is_may
  • 回答日時：

>scriptを変更せずにcom.のかわりにspanにclassを指定することでスタイルシート指定すればいいのかなとも思いました。


この方法のほうが良いですね。

指定したサムネイルの横に表示する場合、まずテーブルなどを使って2つの<span>をひとまとめにし、id（今回は「field」）をつけます。（<span>の代わりに<td>にidをつけますが、別に<td>に<span>を入れても構いません。
<table>でまとめたら、<table>が入っている<td>（大きいテーブル）の垂直位置を上ぞろえにします。

<table>//大きいテーブル
<tr>
<td valign="top">
<table id="field">
<tr><td id="gazou"></td></tr>
<tr><td id="comment" class="com"></td></tr>
</table>
・・・

次に表示する関数を以下のように変更します。

function over( name , comm ) {
document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示
document.getElementById( "comment" ).innerHTML = comm;//コメントを表示
document.getElementById("field").style.position="relative";//CSSの相対位置指定
document.getElementById("field").style.top=event.y;//イベントが発生したY位置
}

このまま実行すると恐らく相対位置していですので拡大画像が少しずれると思いますので、

document.getElementById("field").style.top=event.y-***;//イベントが発生したY位置

***に適当な数値を入れてください。


ここまで書いて持論なんですが、ページ全体をスクロールするのではなく、サムネイルの長いリストをCSSの「overflow-y:scroll;」でスクロールにしてページ全体をスクロールしなくした方が良いような気がします。あくまで持論ですので今回は詳しくは書かないでおきます。

この回答への補足

いろいろ勉強させてもらってます。
ただ、表示位置の固定は、あまり理解できなくてうまくできてません。
すみません。
（左に表示するサムネイルの記述位置がわからず、
大きいテーブルの中の左テーブルが縦長のサムネイル、右が教えていただいた表示部分の記述ということ？）
もう少し研究してみます。

それで教えてくださったoverflow-y:scrollを試してみました。
このほうが画像位置がぶれずにいいかもしれませんね。

補足日時：2007/03/22 21:58
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

書く場所を間違えて補足に書いてしまいました。

通報する
お礼日時：2007/03/22 22:16

No.3

  • 回答者： is_may
  • 回答日時：

No.2のプログラムは正しくは



<script type="text/javascript">
<!--
function over( name , comm ) {
document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示
document.getElementById( "comment" ).innerHTML = comm;//コメントを表示
}
function out() {
document.getElementById( "gazou" ).innerHTML = document.getElementById( "comment" ).innerHTML= '';
}
//-->
</script>

こうでしたね＾＾；2つの<span>をテーブルなどに配置すればJavaScriptが分からなくでも編集しやすいかと思います。

コメントの文字修飾を変更したい場合は上記ソースの

document.getElementById( "comment" ).innerHTML = comm;//コメントを表示

を

document.getElementById( "comment" ).innerHTML = "<span class='com'>" + comm + "</span>";//コメントを表示

に変更して、スタイルシートで

.com {
font-size:12pt;
color:#333;
font-family:Verdana,Arial,Helvetica;
}

このように記述すれば表示するコメントの文字修飾を自由に変更できます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

フォント指定について、その後試行錯誤して試してみましたが
<span id="gazou"></span>
<span
にフォントでstyle="color:#ff0000"などを入れてみたら、実現できました。ということは、scriptを変更せずにcom.のかわりにspanにclassを指定することでスタイルシート指定すればいいのかなとも思いました。

あと初期の質問にも書きましたが、たてにスクロールしても常に拡大画像が画面内（指定サムネイルの横）に表示できる方法なんてありますか。
たぶん今までのだと、表示位置固定のようなので、スクロールすると隠れてしまうと思います。

通報する
お礼日時：2007/03/22 20:03

No.2

  • 回答者： is_may
  • 回答日時：

コメントを画像の上に配置する場合は



function over( name , comm ) {
var e = document.getElementById( "gazou" );
e.innerHTML = comm + '<br><img src="' + name + '.JPG">';
}

こんな感じですね。
パラメーターは別に好きな名前で結構です。画像・コメントを表示する<span>を分けたい場合はこんな感じです。

<script type="text/javascript">
<!--
function over( name , comm ) {
document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示
document.getElementById( "comment" ).innerHTML = comm';//コメントを表示
e.style.position = "relative";
e.style.top = 000;
e.style.left = 000;
}
function out() {
document.getElementById( "gazou" ).innerHTML = document.getElementById( "comment" ).innerHTML= '';
}
//-->
</script>
</head>
<body>
<span id="gazou"></span>…画像を表示
<span id="comment"></span>…コメントを表示
    • good
    • 0
    • 件
通報する
この回答へのお礼

丁寧に書いていただき、思ってたような表示をすることができました。
ありがとうございました。

ついでですみませんが、このコメントの文字部分をフォント指定をすることができますか。（色とかサイズとか）
なお、他の部分にはスタイルシートなどで別のフォント指定がしてあるものとします。

通報する
お礼日時：2007/03/22 19:25

No.1

  • 回答者： is_may
  • 回答日時：

サムネイル画像のonmouseoverの引数に新たにコメントを以下のように追加して、



<img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945','ここに各コメントを入力');" onmouseout="out();">

<span>に画像を代入するときに一緒に説明文も代入する、あるいはもうひとつ違う<span>を設置してそこに説明文を表示してみてはいかがでしょう？

function over( name , comm ) {
var e = document.getElementById( "gazou" );
e.innerHTML = '<img src="' + name + '.JPG"><br>' + comm;//説明文も一緒に出力
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
一応表示できるようになりました。

コメントを上にもってこようとして
over('ここにコメント','light/img/DSC_0945')
ってやったら、これではだめなんですね（苦笑）

あと、もうひとつの<span>というのはgazouでないものだとしたら、
バラメーターをどのようにするのでしょうか

通報する
お礼日時：2007/03/22 16:31

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報