No.2ベストアンサー
- 回答日時:
たしかに、前に書いた方法だとリンクが機能しませんね。
下記の方法ならリンクが機能しました。
(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>
お返事が遅くなりました。
年末のお忙しい時期に回答頂いたのに失礼して申し訳ありません。
出来ました!!!
今の私の知識では出来ない事でしたので、書いて頂いた内容を足がかりにして勉強にもなります。
とても感謝してます。
<<ありがとうございました>>
No.1
- 回答日時:
こんな感じでしょうか
<!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>
ありがとうございます!!
正にこんな感じなんですが、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に戻ります。
これを解決する方法はないでしょうか?
非常に甘えた質問で恐縮ですが、解決出来たら非常に嬉しいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
背景色を透明化
-
変数内容をHTML内で表示する方法
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
JAVAスクリプトについて
-
VideoBoxのカスタマイズ
-
JavaScriptにて『var val2 = "d...
-
nextsiblingの使い方
-
セレクタの指定について質問です
-
関数の引数を動的に変えたい
-
removeAttribute()メソッドで削...
-
jQueryで同じid属性が複数あっ...
-
jQueryで特定id以外の下にある...
-
『オンマウスで説明文を表示』...
-
自働生成される<div>タグに連番...
-
jqueryで要素の中身を要素の外...
-
プルダウンメニューに画像を使...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き function mov...
-
前回の質問の続き function mou...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
背景色を透明化
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
removeAttribute()メソッドで削...
-
console.log結果をhtmlで表示し...
-
javascriptでオブジェクトの重...
-
タブで開いてさらにタブ内をア...
-
jQueryで特定id以外の下にある...
-
指定したパスが現URLに含まれて...
-
折りたたみ部分にアンカーでリ...
-
前回の質問の続き
-
jQueryのアコーディオンメニュ...
おすすめ情報