![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_13.png?e8efa67)
絵を閲覧するページで以下のようにしたいです。
1.リンク文字の上にマウスを置く
2.任意の位置に『画像』とその画像の下に『文章』が同時に表示される
(何も記載されていない位置に表示されるようにしたいです)
3.マウスを離したら最後に表示したものが消えずにそのまま
画像だけ表示は一応できましたが、
文字と同時にというのはわかりませんでした。
それと何もないところに表示するのができませんでした。
以下、作ったソースです。
<SCRIPT TYPE="text/javascript">
<!--
if (document.images) {
var img0 = new Image(); img0.src = "gallery/0.png";
var img1 = new Image(); img1.src = "gallery/1.png";
var img2 = new Image(); img2.src = "gallery/2.png";
}
function On(name) {
if (document.images) {
document.images['def'].src = eval(name + '.src');
}
}
// -->
</SCRIPT>
<!-- ↓ここからBODY -->
<Table Border="0" Cellspacing="0" align="center" Width="907" style="line-height:18px;">
<Tr><Td Valign="top">
<Table Border="0" Width="300" Cellspacing="0" style="line-height:18px;">
<Tr><Td ColSpan="2"><Font Size="2">
イラスト
</Td></Tr>
<Tr><Td Width="10"> </Td><Td><Font Size="2">
<A HREF="gallery/0.png" onMouseOver="On('img0')">作品1</A><BR>
<A HREF="gallery/1.png" onMouseOver="On('img1')">作品2</A><BR>
<A HREF="gallery/2.png" onMouseOver="On('img2')">作品3</A><BR>
</Td></Tr>
</Table>
</Td>
<Td Width="500" Valign="top">
<IMG SRC="" NAME="def">
</Td></Tr>
</Table>
<!-- ↑ここまでBODY -->
作品を追加していく形式のページなので、
なるべくシンプルなソースでお願いします。
No.1ベストアンサー
- 回答日時:
ソースみてなくてごめん。
一番手抜きなやり方は
<div id="VIEW" style="display:none;position:absolute;top:0px;left:0px"></div>
という感じのブロックをbody閉じタグの直前に配置しこの中身を
document.getElementById("VIEW").innerHTML
によって書き換える。
(位置と表示は別の方法で書き換えるけどそこは調べれば比較的すぐ出ると思う)
例
document.getElementById("VIEW").innerHTML = "<img src='gallery/0.png' />作品1";
空いている空間(表示する場所)が既に決まっているならstyleのabsoluteや位置指定は必要ない。
表示する予定の場所にブロックだけ確保しておいて同様に書き換えれば良い。
回答ありがとうございます。
あまり知識がないのでタグをどういう風にすればわかりませんでしたが、
document.getElementByIdで調べてみたら望みのページが見つかりました。
http://www001.upp.so-net.ne.jp/oka/mouse_over16. …
No.2
- 回答日時:
"onMouseOut"を使っていないようですけど、これを旨く活用すれば、onMouseOverと同じように、マウスが領域から離れたとき、任意のイベントを発生させることが出来ますよね?
あるいは、表示したい「画像」と「文字」をまとめて1つの画像ファイルにしておいて、onMouseOverでそれを表示するようにしてはどうですか?この方法は事前準備が面倒ですけど、プログラムで悩むことは、まず無くなります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript 画像の表示位置 3 2022/12/23 08:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
画像をランダムな座標に一定の...
-
JavaScriptを外部ファイルにす...
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
jQueryスライドショー画像への...
-
画像の表示位置
-
JavaScript スライドの画像にリ...
-
ポップアップのソースの書き方...
-
デフォルト非表示にしたい。【t...
-
onclickとonmouseoverを同時に...
-
複数トリガーで動作するアコー...
-
背景色を透明化
-
バッチファイルでカウントアッ...
-
ホームページビルダー15 メニュ...
-
createElementが一瞬で消えてし...
-
タブで開いてさらにタブ内をア...
-
スライダーを実装した場合、ペ...
-
スマートフォンサイトに部分的...
-
jQueryで特定のURLの時のみ表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
this.src等のthisについて
-
imgのsrcに値を設定するには
-
jQueryでサーバー上のファイル...
-
画像の座標位置取得
-
イベントハンドラを完全に外部...
-
連番画像「次へ」「前へ」で、...
-
画像の下に説明文をつけて切り...
-
JS switch文について
-
JavaScriptでリクエストを飛ば...
-
スマートな外部javaでロールオ...
-
JavaScriptでシンプルなスライ...
-
一定時間で画像とリンク先を変...
-
javascript 時計24時間表示
-
画像と文字を同時に切り替えたい
-
これはどんなJavaScriptなので...
-
Javaにて画像を残像が残りつつ...
-
FirefoxでonMouseOver/Outの動...
-
divの背景画像を、徐々に表示さ...
-
時間によって表示される画像を...
おすすめ情報