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

回答

相关问题