アプリ版：「スタンプのみでお礼する」機能のリリースについて

添付画像のように1～5のテキスト部分にマウスオーバーで赤枠のところにそ

解決済

  • 質問者：kohakura
  • 質問日時：
  • 回答数：1件

添付画像のように1～5のテキスト部分にマウスオーバーで赤枠のところにそれぞれの画像を表示させる
ホームページテクニックを教えて下さい。コピーして応用して使える簡単な方法が良いです。

「添付画像のように1～5のテキスト部分にマ」の質問画像
通報する

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

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

検索すれば、あちこちにたくさんころがっていそうなスクリプトですが、回答がないみたいなので…



＞マウスオーバーで赤枠のところにそれぞれの画像を表示させる
画像に「赤枠」の部分がないので、よくわかってないのですが、ご参考まで。
（レイアウトはいい加減です）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
div#target div { float:left; }
div#target ol { width:150px; cursor:pointer; color:red; }
div#target ol img { display:none; }
div#target div.screen { width:300px; height:150px; border:1px solid #00f; }
</style>
</head>
<body>
<div id="target">
<div>
<ol type="1">
<li>text1<img src="A.jpg" alt="A"></li>
<li>text2<img src="B.jpg" alt="B"></li>
<li>text3<img src="C.jpg" alt="C"></li>
<li>text4<img src="D.jpg" alt="D"></li>
<li>text5<img src="E.jpg" alt="E"></li>
</ol>
</div>
<div class="screen">
<img src="defalt" alt="">
</div>
</div>

<script type="text/javascript">
<!--
(function(id) {
//@cc_on @set @V = (@_jscript_version <= 5.8)
function eventfunc(e) {
var p, t = e./*@if(@V)srcElement @else @*/target/*@end @*/;
if (t.nodeName != "LI") return;
p = t.parentNode.parentNode.nextSibling;
while (p && p.nodeName != "DIV") p = p.nextSibling;
if (p.className != "screen") return;
if ((t = getImg(t)) && (p = getImg(p))) p.src = t.src, p.alt = t.alt;
}
function getImg(e) {
var c = e.firstChild;
while(c && c.nodeName != "IMG") c = c.nextSibling;
return c?c:null;
}
var e = document.getElementById(id);
if (e) {
e = e.getElementsByTagName("OL")[0];
e./*@if(@V)attachEvent("on" + @else @*/addEventListener(/*@end @*/"mouseover", eventfunc, false);
}
})("target"); // ←id of div
//-->
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答頂きましてありがとうございます。
赤枠では青枠の間違いでした。

内容自体よく分かりませんが、何とかコピーして
使わせて頂きます。

通報する
お礼日時：2010/06/18 09:28

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

Q質問する（無料）

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

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

Q質問する（無料）

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

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

おすすめ情報