Question

这是我的代码

＆＃13;

		<div class="page-bottom">
			<div class="sidebar">
			
			</div>
			
			<div class="main">
				<div class="promo-tab">
					<div class="promo-image">
					
						<img class="image" src="IMAGES/bounty.png">
					</div>
					
					<div class="promo-string">Code</div>
				</div>	
				<div class="promo-tab">
					<div class="promo-image">
						<img class="image" src="IMAGES/brawl.png">
					</div>
					
					<div class="promo-string">Code</div>
				</div>
				<div class="promo-tab">
					<div class="promo-image">
						<img class="image" src="IMAGES/captainskin.png">
					</div>
					
					<div class="promo-string">Code</div>
				</div>
				<div class="promo-tab">
					<div class="promo-image">
						<img class="image" src="IMAGES/chefcases.png">
					</div>

＆＃13;

我需要点击图片并转到网址。文字。我用了

＆＃13;

<img class="image" <a href="http://www.w3.org" src="IMAGES/bounty.png">

＆＃13;

不确定如何让它发挥作用。我可以预览网页，以便在需要时显示。

Answer 1

要在图片中建立链接，请添加a代码和img代码，然后关闭a代码

    <div class="page-bottom">
        <div class="sidebar">

        </div>

    <div class="main">
        <div class="promo-tab">
            <div class="promo-image">
                <a href="https://stackoverflow.com">
                <img class="image" src="IMAGES/bounty.png">
                </a>
            </div>

            <div class="promo-string">Code</div>
        </div>  
        <div class="promo-tab">
            <div class="promo-image">
                <a href="https://stackoverflow.com">
                <img class="image" src="IMAGES/brawl.png">
                </a>
            </div>

            <div class="promo-string">Code</div>
        </div>
        <div class="promo-tab">
            <div class="promo-image">
                <a href="https://stackoverflow.com">
                <img class="image" src="IMAGES/captainskin.png">
                </a>
            </div>

            <div class="promo-string">Code</div>
        </div>
        <div class="promo-tab">
            <div class="promo-image">
                <a href="https://stackoverflow.com">
                <img class="image" src="IMAGES/chefcases.png">
                </a>
            </div>

Answer 2

使用锚标记（<a href="URL"><img src="IMG"></img></a>）

		<div class="page-bottom">
			<div class="sidebar">
			
			</div>
			
			<div class="main">
				<div class="promo-tab">
					<div class="promo-image">
					
						<a href="http://www.w3.org"><img class="image" src="IMAGES/bounty.png"></a>
					</div>
					
					<div class="promo-string">Code</div>
				</div>	
				<div class="promo-tab">
					<div class="promo-image">
						<a href="http://www.w3.org"><img class="image" src="IMAGES/brawl.png"></a>
					</div>
					
					<div class="promo-string">Code</div>
				</div>
				<div class="promo-tab">
					<div class="promo-image">
						<a href="http://www.w3.org"><img class="image" src="IMAGES/captainskin.png"></a>
					</div>
					
					<div class="promo-string">Code</div>
				</div>
				<div class="promo-tab">
					<div class="promo-image">
						<a href="http://www.w3.org"><img class="image" src="IMAGES/chefcases.png"></a>
					</div>

Answer 3

在某些情况下无法更改HTML结构（在您的情况下，将图像包装在a标记中以创建链接）。你可以改用javascript。

从此处更改img标记：

<img class="image" src="IMAGES/captainskin.png">

到此（只需添加一个属性）：

<img class="image" src="IMAGES/captainskin.png" data-url="http://your-url-here.com/">

使用这个简单的jQuery代码：

$(function() {
  $('img.image').click(function() {
    window.open( $(this).attr('data-url'), '_self' );
  });
});

当您点击包含课程image的图片时，您将重定向到属性data-url上的网址。

查看this Fiddle中的结果。

如何使这些图像可以点击？

3 个答案: