如何将图像链接到另一个页面？

I am currently working on my school project website and I am really having a hard time coding. So in my website I made an image slider and I wanted the images to be linked to another page, like if the user clicked the image they will be redirected to another page that contains information regarding the image they clicked. I also wanted a hover text when the mouse is pointed on the image that shows the title of it.

我目前在我的学校项目网站上工作,我真的很难编码。所以在我的网站上我创建了一个图像滑块,我希望图像链接到另一个页面,就像用户点击图像一样,它们将被重定向到另一个页面,其中包含有关他们点击的图像的信息。当鼠标指向显示其标题的图像时,我还想要一个悬停文本。

I tried to search and to watch videos on how to link images but nothing works.

我试图搜索和观看有关如何链接图像的视频,但没有任何作用。

Here's my code:

这是我的代码:

<script type="text/javascript">
 	<!-->
 	var image1=new Image()
	image1.src="e.jpg"
 	var image2=new Image()
	image2.src="g.jpg"
	var image3=new Image()
	image3.src="h.jpg"
	//-->
</script>

<style type="text/css">
    #gallery {
  	width: 100%;
 	height: 100%;
 	}

 	#gallery img {
	width: 55%;
 	}
</style>

<DOCTYPE!html>
 <html>
 <body>
  <center>
   <div id="gallery">
	<img src="e.jpg" name="slide" alt="Track race">
	<script type="text/javascript">
	  <!--
	  var step=1
	   function slideit(){
	   document.images.slide.src=eval("image"+step+".src")
	   if(step<3)
       step++
       else
	   step=1
	   setTimeout("slideit()",2500)
	   }
	   slideit()
	   //-->
	</script>
   </div>
  </center>
</body>
</html>

1 个解决方案

#1

onclick on a image to navigate to another page using Javascript

单击图像以使用Javascript导航到另一个页面

3rd best answer:

第三个最佳答案:

I'd set up your HTML like so:

我这样设置你的HTML:

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

Then use the following code:

然后使用以下代码:

<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';
};
}

That assigns an onclick event handler to every image on the page (this may not be what you want, you can limit it further if necessary) that changes the current page to the value of the images id attribute plus the .html extension. It's essentially the pure Javascript implementation of @JanPöschko's jQuery answer.

为页面上的每个图像分配一个onclick事件处理程序(这可能不是您想要的,您可以在必要时进一步限制它),将当前页面更改为images id属性的值加上.html扩展名。它本质上是@JanPöschko的jQuery答案的纯Javascript实现。

#1