jQuery を使って下記のようなことは可能でしょうか。また可能な場合

解決済

質問者：tomo0117
質問日時：2010/04/22 13:19
回答数：3件

jQuery を使って下記のようなことは可能でしょうか。また可能な場合参考になるテンプレートのようなものがある場所を教えていただけますと幸いです。

http://www.nittsu.co.jp/index.html
のサイトのグローバルメニュー下のFlashコンテンツ。

やりたいことは、
同じように右側に4つのボタンを縦に配置して、マウスオーバーをすると左側のイメージが変更されるようにしたい。

また、右側のボタンをクリックするとリンクされているページに飛ぶ形。

表示されるイメージは、フェードインなどのように動的に表示される必要はなく、単純に静的なイメージが切り替わる感じです。

よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.2ベストアンサー

回答者： yuki4499
回答日時：2010/04/22 14:54

jQuery使ってなくて申し訳ないですが

大雑把にこんな感じですか？
動的に作成したほうがいい気もしたのですが時間がないので適当ですいません。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title></title>

<script type="text/javascript">
function test(el)
{
document.images["ifr"].src = el + ".png";
}
</script>
</head>
<body>
<table border = "1">
<tr>
<td rowspan = "5">
<img src = "1.png" id = "ifr" width = "400" height = "240">
</td>
</tr>
<tr>
<td ><a href = "test1.html" ><img src = "1.png" id = "1" width = "100" height = "50" onmouseover = "test(1);"></td>
</tr><tr>
<td><a href = "test2.html" ><img src = "2.png" id = "2" width = "100" height = "50"onmouseover = "test(2);"></td>
</tr><tr>
<td><a href = "test3.html"><img src = "3.png"id = "3" width = "100" height = "50" onmouseover = "test(3);"></td>
</tr><tr>
<td><a href = "test4.html"><img src = "4.png"id = "4" width = "100" height = "50"onmouseover = "test(4);"></td>
</tr>
</table>
</body>
</html>

参考URL：http://www.red.oit-net.jp/tatsuya/java/image3.htm

この回答への補足

アドバイスいただいたソースでほぼやりたかったことはうまくいきましたありがとうございます。

そこで大変恐縮ですが、右側の4つのボタンをさらにマウスオーバーするにはどうしたらよいのでしょうか。

また、別の質問になってしまうのですが、右側のボタンのスライスがきちんと出来、4つのボタンのhightと左のイメージのhightが同じなのに、右側各ボタンに隙間があいてしまうのです。
border-collapse:collapse;をCSSで対応しましたが解決しませんでした。

補足日時：2010/04/28 10:47

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
早速参考にさせていただきトライしてみます。
結果、ご連絡いたします。

通報する

お礼日時：2010/04/22 18:50

No.3

回答者： steel_gray
回答日時：2010/04/22 14:56

サンプルです。

レイアウトは一切していないのでCSS等で。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var anchorblock = '#nabi'; // リンクの収まっている要素のid
var imageblock = '#image'; // imgの収まっている要素のid

$(imageblock+' img').each(function(idx){
if(idx > 0) $(this).hide();
});
$(anchorblock+' a').each(function(idx){
jQuery.data($(this).get(0),'anchor_index',idx);
});
$(anchorblock+' a').hover(function(){
var a_idx = jQuery.data($(this).get(0),'anchor_index') +1;
$(imageblock+' img').each(function(idx){
if(idx == a_idx) {
$(this).show();
} else {
$(this).hide();
}
});
},function(){
$(imageblock+' img').each(function(idx){
if(idx > 0) $(this).hide();
else $(this).show();
});
});
});
</script>
</head>
<body>
<p id="nabi">
<a href="http://example.com/1/">リンク１</a>
<a href="example2.html">リンク２</a>
<a href="example3.html">リンク３</a>
</p>
<p id="image">
<img src="img/zzz.jpeg"><img src="img/aaa.jpeg"><img src="img/bbb.jpeg"><img src="img/ccc.jpeg">
</p>