初めまして、ちゃりおと申します。
JavaScript初心者です。

あるページに静止画(.jpg)が3枚あって、それらをクリックするとアニメGIFにきりかわってスライドショーが始まる、という簡単なスクリプトをつくってみました。

ただ、これだと静止画の数が増えた場合に保守効率が悪くなってしまいます。JavaScriptを使うにしても、同じ機能を実現するためにもっとスマートな方法はないものでしょうか?

諸先輩方、お知恵をおかしください。

//スクリプトここから
<html>
<head>
<title>slideshow</title>
<script language="javascript">
<!--
function autoslide_aisa(){
document.n_aisa.src = "img/aisa_anime.gif";
}
function autoslide_ann(){
document.n_ann.src = "img/ann_anime.gif";
}
function autoslide_mipori(){
document.n_mipori.src = "img/mipori_anime.gif";
}
// -->
</script>
</head>

<body BGCOLOR="#FFFFFF">
<table border="0" cellpadding="0" cellspacing="0" width="80%" align="center">
<tr>
<td align="center" valign="bottom">
<a href="javascript:autoslide_aisa()"><img src="img/aisa1.jpg" name="n_aisa" border="0" align="bottom"> </a>
</td>
<td align="center">
<a href="javascript:autoslide_ann()"><img src="img/ann1.jpg" name="n_ann" border="0"> </a>
</td>
<td align="center">
<a href="javascript:autoslide_mipori()"><img src="img/mipori1.jpg" name="n_mipori" border="0"> </a>
</td>
</tr>
</table>
</body>
</html>

//スクリプトここまで

このQ&Aに関連する最新のQ&A

A 回答 (2件)

私自身、JavaScript修めたわけじゃないので、心苦しいのですが(^^;


関数がまとまったという意味ではいいのではないでしょうか?

ただ、ファイルの名前にそれほど理由がなければ引数一つでもいいような・・・

function autoslide(name){
document.images[name].src = 'img/' + name + '.gif';
}

のように。
ただ、n_asiaなどのn_はname属性のn_、という意味を与えているみたいですからいやですかね。

あと、アンカータグの中でのJavaScriptの呼び出しですが、href属性に書いて大丈夫なのでしょうか?
自分はやったことないのでちょっと怖いな、と思っています。
私だったら、
<a href="javascript:void(0);" onClick="javascript:autoslide('n_ann');">
<img src="img/ann1.jpg" name"n_ann" border="0">
</a>
って感じで。
    • good
    • 0
この回答へのお礼

<a href="javascript:void(0);" onClick="javascript:autoslide('n_ann');">

こういうやり方があるんですね。
知りませんでした(^^;;;
いや、大変参考になりました。
ありがとうございます。

お礼日時:2001/09/06 10:32

これだと、画像が増えれば増えるだけ新しいfuncitionを作ることになりますよね?



・funcitionは一つにまとめて、ファイル名は引数で渡す(と、いうか、ほかのファイルと異なるasiaとかannとかいうところだけ引数にて渡す)

・funcitionは一つにまとめて、ファイルの命名規則を番号にして、引数としては番号だけ渡す

・funcitionは一つにまとめて、アニメGIFファイル名は配列に格納して、引数としては番号だけ渡す

こんなところでどうでしょ?

この回答への補足

いろいろ調べて、じゃっかんですが、以下のように改良してみました。
まだ改良の余地ありでしょうか???

//ここから
<html>
<head>
<title>slideshow</title>
<script language="javascript">
<!--
function autoslide(name,src){
document.images[name].src = src;
}
// -->
</script>
</head>

<body BGCOLOR="#FFFFFF">
<table border="0" cellpadding="0" cellspacing="8" width="80%" align="center">
<tr>
<td align="center" valign="bottom">
<a href="javascript:autoslide('n_aisa','img/anime_1.gif')"><img src="img/aisa1.jpg" name="n_aisa" border="0" align="bottom"> </a>
</td>
</tr>
<tr>
<td align="center">
<a href="javascript:autoslide('n_ann','img/anime_2.gif')"><img src="img/ann1.jpg" name="n_ann" border="0"> </a>
</td>
</tr>
<tr>
<td align="center">
<a href="javascript:autoslide('n_mipori','img/anime_3.gif')"><img src="img/mipori1.jpg" name="n_mipori" border="0"> </a>
</td>
</tr>
</table>
</body>
</html>

//ここまで

補足日時:2001/09/05 16:03
    • good
    • 0

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


人気Q&Aランキング

おすすめ情報

カテゴリ