Question

我最近在我的博客上使用我遇到的代码设置了自定义旋转横幅，但我似乎无法弄清楚如何使图像可点击以链接到主页。任何帮助将不胜感激。

下面是代码：

<script type='text/javascript'>
var HeaderImage= new Array()

HeaderImage[0]=&quot;http://Example1.png&quot;
HeaderImage[1]=&quot;http://Example2.png&quot;
HeaderImage[2]=&quot;http://Example3.png&quot;
HeaderImage[3]=&quot;http://Example4.png&quot;
HeaderImage[4]=&quot;http://Example5.gif&quot;
HeaderImage[5]=&quot;http://Example6.png&quot;
HeaderImage[6]=&quot;http://Example7.png&quot;
var random=Math.round(6*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>

现在的工作人员。我只是不确定在哪里贴标签每个人都在给我感觉。非常感谢你的帮助。

Answer 1

此代码与&quot而非"存在问题。但除此之外，此代码正在做的是为id="header"的对象设置背景图像。要使该对象可单击，您可以使用<a>标记包围标题对象。例如，如果标题对象是div，那么您将使用以下内容：

<a href="xxx"><div id="header"></a></a>

如果有一些原因你不想使用链接使区域可点击（这是最简单的方法），那么你也可以使用这样的javascript：

document.getElementById("header").onclick = function() {
    window.location = "http://my.example.com";
}

这可以放在页面HTML之后（因此在运行此代码时已经加载了相关对象）。

如果您向我们展示包含标题对象的实际HTML，我们可以更具体地说明如何使其可点击。

通过查看您的HTML，如果您只想使用HTML进行点击，则可以更改HTML的这一部分：

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
</b:section>

到此（仅用<a>标记围绕它：

<a href="http://my.example.com">
    <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
        <b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
    </b:section>
</a>

Answer 2

嗯，你实际上没有任何图像元素，所以这是你的第一个问题。

最简单的解决方案（使图像可点击）是将图像包含在锚点标签中，并将href属性设置为索引。您实际上正在做的是动态地为id为#header的元素写一些css并将其背景设置为图像。当你这样做时，没有实际的img元素，所以用户没有任何东西可以点击元素本身以外的其他元素。

如果不再看到你的标记，我建议只将#header元素包装在这样的锚中<a href='/'><some_element id='header'></some_element></a>

Answer 3

Idk Blogger是如何运作的，所以我只会告诉你使用javascript快速而又脏的方法。

将此信息放在您向我们展示的代码之后，即使在结束脚本标记

之后也是如此

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
   $('#header').click(function() {
        window.location = '/';
    }); 
});
</script>

如何在javascript中使图像可点击？

3 个答案: