在javascript中添加图像链接

时间:2013-07-23 15:14:12

标签: javascript image hyperlink

我在javascript中用另一个图像替换一个图像,然后添加一个链接到它,但它似乎没有工作。有什么建议??拜托,谢谢!!

function showImage2(){
    document.getElementById("tbc").src = "images/s2.jpg";
var elem = document.getElementById("Slideshow");
    elem.style.display = "none";
    document.getElementById('tbc').style.display='block';
document.getElementById('tbc').style.usemap='ss2Map'; 
var link = document.createElement('a'); // create the link
    link.setAttribute('href', 'wastewater.html'); // set link path
    link.appendChild("images/s2.jpg"); // append to link
}

3 个答案:

答案 0 :(得分:2)

link.appendChild("images/s2.jpg"); // append to link

此行不会执行任何操作。您只能追加元素,而不是文本字符串。如果我正确理解你的标记,你需要附加document.getElementById("tbc")

如果这不是您要添加的内容,则可以使用var el = document.createElement('img')创建img标记,然后使用el.setAttribute('src','images/s2.jpg')

设置src属性

在此之后,上述行将变为link.appendChild(el);,这将起作用。

答案 1 :(得分:1)

我认为你真正需要的是拥有一个带链接的图像和一个没有链接的图像。 Onload,显示没有链接的图像,隐藏链接的另一个图像。点击一个按钮或其他东西,然后隐藏没有链接的图像,并显示链接正确的图像?

<img id="image1" src="http://us.123rf.com/400wm/400/400/tonygers/tonygers1108/tonygers110800022/10200687-manipulated-nasa-photographs-of-the-earth-and-moon-isolated-together-on-a-black-background.jpg" />
<a style="display:none;" id="image2" href="http://www.google.com" target="_blank"><img  src="http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2011/08/us-astronaut-bruce-mccandless-space-walk.jpg" /></a>
<a href="javascript:void(0)" onclick="showImage2()">Click Me</a>
<script>
    function showImage2(){
        var imageOne = document.getElementById('image1');
        var imageTwo = document.getElementById('image2');
        imageTwo.style.display = 'block';
        imageOne.style.display = 'none';
    }   
</script>

您可以在此处查看工作代码。 http://jsfiddle.net/QbbJU/1/

答案 2 :(得分:0)

appendChild()只能接受DOM节点,而不是字符串。

要设置元素的文字,您可以设置innerHTMLtextContent,也可以附加文字节点(来自document.createTextNode()

您可能还想将链接放在页面的某个位置。