山猿

質問

他のサイトでも同じ質問をしているのですが、コチラでも質問させて下さい。
http://www.golfdigest.co.jp:80/default.asp
のフラッシュで出来ているメニューを
「Javascriptでも出来るでしょ！？」
と言われたのですが、ホントに出来るのでしょうか？

HTMLコーディングをDreamWeaverを使いながらやっています。

感覚的には、onMouseでスワップイメージで表示された画像に、リンクが数箇所出来れば良いのだと思っているのですが。
出来るのでしょうか？

どなたか教えて下さい。
お願いしますm(__)m

回答No.1

noname#30818

やる気になればできないこともないと思います。
色の変化の具合やボタンが表示される時間のズレなどを無視して最近のブラウザのみ対応するなら比較的簡単に作れると思いますよ。
<div id="tab">タブの画像</div>
<div id="Menu">
<div>各メニューのリンク付きボタン画像</div>
<div>各メニューのリンク付きボタン画像</div>
<div>各メニューのリンク付きボタン画像</div>
</div>
こんな形でデータを並べてid="tab"の中の何番目の画像にアクションが有ったかがわかればそれに応じた番号のid="Menu"の中のdivを表示すれば表示の切り替えはできますね。

面倒ですから最初にCSSを作って
#Menu div{
display:none
}
#Menu div.open{
display:block
}

javascriptでイベントを設定して
var img = document.getElementById('tab').getElementsByTagName('img')
for(var i = 0;i < img.length;i++){
img[i].onmouseover = mouseover
}

function mouseover(){
var img = document.getElementById('tab').getElementsByTagName('img')
var div = document.getElementById('Menu').getElementsByTagName('div')
for(var i = 0;i < img.length;i++){
if(img[i] == this){
div[i].className = 'open'
}else{
div[i].className = ''
}
}
}
こんな感じでアクションがあった画像と同じ参照番号のdivにclass=openをつけるとそのdivは表示され他はclassが無くなるので表示されなくなる予定です。
同じ要領でアクションが有ったtab内の画像にclassをつけてスタイル定義してやれば見た目を変化させることができます。
同様にid="Menu"内のdiv内の画像も同じことをすれば良いわけです。
回転する三角はgifアニメーションを使えば良いですね。
通常時は普通の画像。
アクションが有ったらgifアニメーションに切り替えれば良いです。

お礼

あ、ありがとうございます。
ちょっとむずかしそうですが、頑張ってみます！