onclick圖像導航到另一個頁面使用Javascript

我得到了熱身的Javascript，所以我正在嘗試自己的東西。我正在尋找一個onclick函數，其中我的index.html頁面中有縮略圖圖像，每當用戶單擊圖像時，他將被重定向到一個新頁面，圖像再次顯示以及關於它的一些信息。現在我正在使用普通的HTML來完成它。onclick圖像導航到另一個頁面使用Javascript

我想用javascript導航到與用戶點擊的圖像對應的頁面。有可能使用onclick嗎？我的網頁上有超過10張圖片，每次用戶點擊一張圖片時，我想獲取該圖片的ID並將其重定向到新頁面。新頁面以圖像名稱命名。

對於前：形象的名字：bottle.jpg（居住在圖片文件夾中）重定向頁面名稱：bottle.html（居住在主文件夾）

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

任何有價值的信息將不勝感激！

如果是在這個論壇詢問的某個地方，如果有人能給我那個鏈接，這將是有幫助的。

感謝， Raaks

來源

2011-12-16 125369

是否所有圖像都將存儲在圖像文件夾中？ – 2011-12-16 15:56:13

是的，我所有的圖像都存儲在圖像文件夾！但是，這也可以改變，因爲我呼籲 – 125369 2011-12-16 15:57:08

我建議你在嘗試將自己的東西放在一起之前完成基本的系列教程。 – 2011-12-16 15:59:44

也許這爲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到圖像頁面....

來源

2011-12-16 16:02:55

您可以定義AA點擊功能，然後設置onclick屬性元素。

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

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

這種方法可以讓你擺脫周圍的<a>元素。如果要保留它，請在<a>而不是<img>上定義onclick屬性。

來源

2011-12-16 16:04:15 Hristo

因爲它使這些事情很容易，你可以考慮使用一個JavaScript庫像jQuery做到這一點：

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

基本上，它附加一個onClick事件與thumbnail類中的所有圖像重定向到相應的HTML頁面（id + .html）。那麼你只需要在你的HTML圖像（不a元素），像這樣：

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

來源

2011-12-16 16:05:20

你可以設置你的HTML像這樣：

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

然後使用下面的代碼：

<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>

指派一個onclick事件處理程序的頁面上的每個圖像（這可能不是你想要的，你可以限制其進一步如有必要）改變當前頁面的i的值法師id屬性加上.html擴展名。它基本上是@JanPöschko的jQuery答案的純Javascript實現。

來源

2011-12-16 16:09:47

onclick圖像導航到另一個頁面使用Javascript

回答

相關問題