ロールオーバーを含む複数の動作について

解決済

質問者：ishibo_062
質問日時：2007/11/07 00:15
回答数：1件

製作初心者ですが宜しくお願いします。
今回ホームページを作るにあたり、以下のJavaScriptを使用した動作を検討中です。内容に心当たりがありましたらご教授下さい。

先ず横590px縦300のメイン画像があり、その横に横180px縦50pxの画像を６個にしての設置を行います。
横の180px縦50px画像をロールオーバーにし、更にその画像にマウスを乗せた時に横590px縦300pxのメイン画像も同時に変えたいのですが、これらの動作は可能でしょうか？
また、欲を言えば…ロールオーバーにした画像にリンクを貼り、目的のページへ移動をしたいとも考えております。

参考なサイトとしましては、セブンイレブンのトップページで使用しているフラッシュによる事ですが、あいにくフラッシュは未経験でソフトも無く行えませんので、JavaScriptで可能な限り動作的に行えればと考えております。
参考ＵＲＬ： http://www.sej.co.jp/index.html

自分でも色々探してみましたが、なかなか見つからずスクリプト同士を連結したりして試しても見ましたが動作にバグが生じ、上手くいきませんでした。
そこで、参考になるサイトがあれば教えてください。

宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： steel_gray
回答日時：2007/11/07 10:47

サンプルです。

<html>
<head>
<title></title>
<style type="text/css">
img{border:1px solid red;}
#box0 {
width:770px;
height:300px;
position:relative;
}
#box mainview{
position:absolute;
top:0;left:0;
}
#box0 ul{
position:absolute;
top:0;left:590px;
list-style-type:none;
margin:0;
padding:0;
}
#box0 li{
margin:0;
padding:0;
}
#box0 li img{
vertical-align:top;
}
</style>
<script type="text/javascript">
function sample(obj,mode){
var images = obj.getElementsByTagName('img');
images[0].style.display = (mode)?'none':'inline';
images[1].style.display = (mode)?'inline':'none';
var idNo = images[0].id.match(/(\d)/);
for(var x=document.getElementById('mainview').firstChild;
x;x=x.nextSibling){
if(x.id){
if(!mode && x.id.match(/0/) || mode && x.id.match(idNo[1]))
x.style.display = 'inline';
else
x.style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="box0">
<span id="mainview">
<img src="xxx0" width="590" height="180" alt="xxx0" id="xxx0">
<img src="xxx1" width="590" height="180" alt="xxx1" id="xxx1" style="display:none;">
<img src="xxx2" width="590" height="180" alt="xxx2" id="xxx2" style="display:none;">
<img src="xxx3" width="590" height="180" alt="xxx3" id="xxx3" style="display:none;">
<img src="xxx4" width="590" height="180" alt="xxx4" id="xxx4" style="display:none;">
<img src="xxx5" width="590" height="180" alt="xxx5" id="xxx5" style="display:none;">
<img src="xxx6" width="590" height="180" alt="xxx6" id="xxx6" style="display:none;">
</span>
<ul>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy1" width="180" height="50" alt="yyy1" id="yyy1"><img src="zzz1" width="180" height="50" alt="zzz1" id="zzz1" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy2" width="180" height="50" alt="yyy2" id="yyy2"><img src="zzz2" width="180" height="50" alt="zzz2" id="zzz2" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy3" width="180" height="50" alt="yyy3" id="yyy3"><img src="zzz3" width="180" height="50" alt="zzz3" id="zzz3" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy4" width="180" height="50" alt="yyy4" id="yyy4"><img src="zzz4" width="180" height="50" alt="zzz4" id="zzz4" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy5" width="180" height="50" alt="yyy5" id="yyy5"><img src="zzz5" width="180" height="50" alt="zzz5" id="zzz5" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy6" width="180" height="50" alt="yyy6" id="yyy6"><img src="zzz6" width="180" height="50" alt="zzz6" id="zzz6" style="display:none"></a></li>
</ul>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

サンプルまで作っていただきありがとうございます。

早速画像を替えて試してみます。
全てJavaScriptかと思いきやスタイルシートで位置づけするなど、
奥が深いんですね。自分も質問をしてから２日間本やネットを介して
勉強し、自作で作ってみましたが最終的にはsteel_grayさんがサンプルを作っていただいた用にメイン画面の画像が横のロールオーバーからカーソルを外した際に元の画像に戻らなかったりで四苦八苦でした。

また、スクリプトを一つ一つ確認しながら勉強させていただきます。
また、不明な点がありましたら宜しくご教授下さい。

通報する

お礼日時：2007/11/07 15:54

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