2013-07-23 107 views
1

我用javascript替换另一个图像,然后添加一个链接,但它似乎并没有工作。有什么建议么??谢谢,麻烦您了!!在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 
} 
+0

** **如何不工作?你有错误吗? – SLaks

+0

你可以发布你的HTML标记吗?有时候答案是ID的简单拼写错误 – Jnatalzia

+0

您的代码是在内存中创建HTML,但从未实际将这些插入到DOM中。 –

回答

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

此行不会做任何事情。您只能附加一个元素,而不是文本字符串。如果我正确理解您的标记,则需要附加document.getElementById("tbc")

如果这不是你想要什么追加,你可以使用var el = document.createElement('img')创建一个img标签,然后设置使用el.setAttribute('src','images/s2.jpg')

在此之后,上述线路将成为link.appendChild(el);这将工作src属性。

+0

谢谢!有效! – kmmbify

0

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

要设置元素的文本,您可以设置innerHTMLtextContent,或追加文本节点(从document.createTextNode()

您也可能希望把该链接的地方在你的页面。

1

我认为你真正需要的是让一个图像带有链接和一个没有链接的图像。在载入时,显示没有链接的图像,而隐藏链接的其他图像。一旦点击某个按钮或某物,然后隐藏没有链接的图像,并显示链接正确的图像?

<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/