WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:javascriptの画像表示について

0:[投稿] 悩めるりー [2009/02/16 15:21 ] [環境:わかりません 分かりません]

はじめまして悩めるりーと申します。
さきほど、質問内容を記載せずに投稿してしまいました。
大変申し訳ありませんでした。

どうしても分からないので是非教えてください。
【質問内容】
javascriptを使って、文字の上にマウスがのったら
画像が表示されるというページを作っています。
文字の分だけ画像も次々に変わるというものです。
その画像を月単位で表示したいのです。
1月の画像。2月の画像・・・。全部で1つのページに12個の画像を表示したい。
しかし、1つのページに、同じプログラムを連続して使うため?うまく作動しません。
どうしたらよいのでしょうか?
よろしくお願いいたします。


<script type="text/javascript">
<!--
function gazou(mySrc){
document.getElementById('myimg').src=mySrc;
}
//-->
</SCRIPT>
<center>
<a href="JavaScript:void(0)" onMouseOver="gazou('image/1.jpg')">いちばん</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('image/2.jpg')">にばん</a>
<br>

<img name="myimg" src="image/1.jpg" border="0" width="250" height="187">
</center>


</TD>
<TD width="292" align="center"> <script type="text/javascript">
<!--
function gazou2(mySrc){
document.getElementById('myimg').src=mySrc;
}
//-->
</SCRIPT>
<center>
<a href="JavaScript:void(0)" onMouseOver="gazou2('image/3.jpg')">さんばん</a>
<a href="JavaScript:void(0)" onMouseOver="gazou2('image/4.jpg')">よんばん</a>
<br>
                      <img name="myimg" src="image/4.jpg" border="0" width="250" height="187">
</center>


1:[回答] 元帥 [2009/02/19 23:12 ][URL]

文法ミスが見受けられますので、チェックをおすすめします。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

> href="JavaScript:void(0)"
a要素はリンクの為にあるのに、スクリプトを呼び出す為だけに使い、しかもhrefに指定がないのは本末転倒です。せめてhref属性に画像URLを指定し、関数の引数にhref属性を指定して下さい。

多くの画像とイベントを使うなら配列を使うのが吉です。
HTML:
<a href="image/1.jpg" class="anchor001">いちばん</a>
<a href="image/2.jpg" class="anchor001">にばん</a>
<img id="myimg001" alt="1月の画像" src="image/1.jpg" width="250" height="187">

<a href="image/3.jpg" class="anchor002">さんばん</a>
<a href="image/4.jpg" class="anchor002">よんばん</a>
<img id="myimg002" alt="2月の画像" src="image/4.jpg" width="250" height="187">

<a href="image/3.jpg" class="anchor003">さんばん</a>
<a href="image/4.jpg" class="anchor003">よんばん</a>
<img id="myimg003" alt="2月の画像" src="image/4.jpg" width="250" height="187">


JavaScript:
var gazou_list = [
["anchor001","myimg001"],
["anchor002","myimg002"],
["anchor003","myimg003"]
];

window.onload=function(){
document.body.addEventListener("mouseover",gazou0,false);
}

function gazou0(evt){
    for(var i=0;i<gazou_list.length;i++){
        if(evt.target.className == gazou_list[i][0]){
            document.getElementById(gazou_list[i][1]).src=evt.target.href;
        }
    }
}

回答(必須): 状態:

お名前(必須):

URL:




[戻る]