JavaScriptを使用して別のページに移動するにはonclick

Question

Javascriptでウォームアップしているので、私は何かを自分で試しています。私はindex.htmlページにサムネイル画像があるonclick関数を探しています。ユーザーが画像をクリックするたびに、画像が再び表示される新しいページにリダイレクトされます。今はただのHTMLを使ってやっています。

javascriptを使用して、ユーザーがクリックした画像に対応するページに移動したいと考えています。それはonclickの使用が可能ですか？私は自分のウェブページに10以上の画像を持っており、ユーザーが画像をクリックするたびに、その画像のIDを取得して新しいページにリダイレクトしたい。新しいページにはイメージ名の名前が付けられます。 EXのために

： イメージ名：bottle.jpg（imagesフォルダに存在する） リダイレクトページ名：bottle.html（メインフォルダに存在する）

<a href="bottle.html" id="bottle" ><img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /></a> 

どれでも貴重な情報が認識されるであろう！

誰かが私にそのリンクを与えることができるなら、このフォーラムでどこかに尋ねられるなら、それは役に立ちます。

おかげで、 Raaks

Answer 1

は多分これはuが何をしたいのですか？

<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" > 
    <img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /> 
</a> 

編集：JavaScriptが有効になっていません、誰もが画像ページにnavaigateすることができなくなりますことを心に留めておく....

Answer 2

あなたはAAクリック機能を定義し、onclick属性を設定することができます要素のために。

function imageClick(url) { 
    window.location = url; 
} 

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" /> 

この方法では、周囲の<a>要素を取り除くことができます。保持したい場合は、<img>ではなくにonclick属性を定義します。それはこれらの事がとても簡単になりますので、あなたがこれを行うにはjQueryのようなJavaScriptライブラリを使用して検討することもでき

Answer 3

：

<script> 
    $(document).ready(function() { 
     $('img.thumbnail').click(function() { 
      window.location.href = this.id + '.html'; 
     }); 
    }); 
</script> 

基本的に、それは対応にリダイレクトするために、クラスthumbnailですべての画像にonClickイベントをアタッチHTMLページ（id + .html）。次に、あなただけのように、（a要素なし）あなたのHTML内の画像を必要とする：

<img src="bottle.jpg" alt="bottle" class="thumbnail" id="bottle" /> 
<img src="glass.jpg" alt="glass" class="thumbnail" id="glass" /> 

Answer 4

が、私はそうのようなあなたのHTMLを設定したい：

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" /> 

は、その後、次のコードを使用します。

iの値に現在のページを変更するページ上のすべての画像へ onclickイベントハンドラを（これはあなたが望むものではないかもしれない、必要であれば、あなたはそれをさらに制限することができます）を割り当て

<script> 
var images = document.getElementsByTagName("img"); 
for(var i = 0; i < images.length; i++) { 
    var image = images[i]; 
    image.onclick = function(event) { 
     window.location.href = this.id + '.html'; 
    }; 
} 
</script> 

メイジidアトリビュートと.htmlの拡張子。これは基本的に@JanPöschkoのjQueryの答えの純粋なJavascriptの実装です。