2011-07-09 11 views
0


リンクをクリックすると画像を切り替えるはずのシンプルなJavaScriptを作成しようとしました。これは、(それはあまりないのですが、それが唯一のテストであることを意味した)サイト全体のコードではありません:リンクをクリックして画像を変える - Javascript

<html> 
<head> 
    <title>Slideshow</title> 
    <style type="text/css"> 
     #wrapper { 
     width: 800px; 
     height: 250px; 
     margin: 75px auto auto auto; 
     } 
    </style> 
    <script type="text/javascript"> 
     function changeImg(x) { 
     document.getElementById(presentationImg).src='x'; 
     } 
    </script> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="mainnav"> 
      <ul> 
       <li><a href="#" onClick="changeImg(design.jpg)">Design</a></li> 
       <li><a href="#" onClick="changeImg(realisation.jpg)">Realisation</a></li> 
       <li><a href="#" onClick="changeImg(deployment.jpg)">Deployment</a></li> 
      </ul> 
     </div> 
     <div id="presentation"> 
      <img id="presentationImg" src="design.jpg" /> 
     </div> 
    </div> 
</body> 

が、私はそれが働くだろう、かなり確信していたが、それはない、と私は何を持っていますアイデアなぜ...誰が理由を知っていますか、そしてその解決策は何ですか?

+0

JQueryなどのJavaScriptライブラリを試してみませんか? – phlogratos

+0

@phlogratos - "just use jQuery"は、JavaScriptの基礎を習得しようとしている人にとって役に立たない提案です。 –

+0

@phlogratos - jQueryは必ずしも答えではありません。これは純粋なJavaScriptのような単純な部分です。このためにjQueryライブラリ全体を含めれば本当に価値がありますか? –

答えて

1

は、あなたの関数でxの前後に引用符を取り除き、代わりに、要素IDをお見積もり:

document.getElementById("presentationImg").src = x; 

また、あなたはあなたの関数に渡す文字列を引用符で囲む必要があります。

<a href="#" onclick="changeImg('design.jpg')"> 

あなたが現在持っている方法は、その名前の変数を宣言していないので、presentationImgは未定義です。

var presentationImg = "presentationImg"; 
document.getElementById(presentationImg).src = x; 
+0

それはトリックでした、あなたの雷の速い応答のために大変ありがとう:) –

+0

@ fl0w:彼のポストの左側に受け入れボタンがあります – genesis

+0

@genesis:ええ、私は知っていますが、それは明らかにタイマーを持っています1分以上待たなければならない... –

関連する問題