javascriptでimgとdivを入れ替えたい

解決済

質問者：mameshiba-azuki
質問日時：2012/12/14 11:00
回答数：2件

divを入れ替える方法がなかなか見つからないので教えてください。

例えば
200px✕200pxサイズの画像が表示されていて、
mouseoverすると200px✕200pxサイズのdivに切り替えというモノを作りたいのです。

因みに、divの中には、<ul><li>を使った箇条書きの選択肢を表示させたいと思っています。

どなたか、サンプルを書き込んで頂ける方がいらっしゃれば、非常にアリガタイです。

宜しくお願いいたします。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： t_ohta
回答日時：2012/12/14 18:08

たしかに、前に書いた方法だとリンクが機能しませんね。

下記の方法ならリンクが機能しました。
（jQueryを使えばもう少しスッキリ書けそうですが・・・）

<!DOCTYPE html>
<html lang='ja'>
<head>
<title>タイトル</title>
<style>
#test { width:200px; height:200px; border:1px solid black; }
#testimg { display:inline; }
#testul { display:none; }
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('test').onmouseover = function(){document.getElementById('testimg').style.display = 'none';document.getElementById('testul').style.display = 'block';}
document.getElementById('test').onmouseout = function(){document.getElementById('testimg').style.display = 'inline';document.getElementById('testul').style.display = 'none';}
}
</script>
</head>

<body>
<div id="test"><img id="testimg" src="test.jpg"><ul id="testul"><a href="http://okwave.jp"><li>a</li></a><a href="http://www.yahoo.co.jp"><li>b</li></a><a href="http://www.google.co.jp"><li>c</li></a></ul></div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

お返事が遅くなりました。
年末のお忙しい時期に回答頂いたのに失礼して申し訳ありません。

出来ました！！！
今の私の知識では出来ない事でしたので、書いて頂いた内容を足がかりにして勉強にもなります。
とても感謝してます。

＜＜ありがとうございました＞＞

通報する

お礼日時：2013/01/08 15:25

No.1

回答者： t_ohta
回答日時：2012/12/14 11:48

こんな感じでしょうか

<!DOCTYPE html>
<html lang='ja'>
<head>
<title>タイトル</title>
<style>
#test { width:200px; height:200px; border:1px solid black; }
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('test').onmouseover = function(){document.getElementById('test').innerHTML = '<ul><li>a</li></ul>';}
document.getElementById('test').onmouseout = function(){document.getElementById('test').innerHTML = '<img src="test.jpg">';}
}
</script>
</head>

<body>
<div id="test"><img src="test.jpg"></div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！

正にこんな感じなんですが、1つ分からない点が有りまして。
mouseoverで表示された<ul><li>を選択肢としてリンク<a>させようとしていますが、
選択肢を選ぼうと文字部分に近づくと、imgに戻ってしまって押せませんでした。

document.getElementById('test').onmouseover = function(){document.getElementById('test').innerHTML = '
<ul>
<a href=""><li>a</li></a>
<a href=""><li>b</li></a>
<a href=""><li>c</li></a>
</ul>';}
として、近づくとimgに戻ります。

これを解決する方法はないでしょうか？

非常に甘えた質問で恐縮ですが、解決出来たら非常に嬉しいです。