Question

我基本上有这个链接，当我点击它时，我想要一个图像显示它。使用javascript我该怎么做？

<a> click me </a>

的CSS：

a.clicked
{
   /*what goes here?*/
}

Answer 1

添加新的图像元素非常简单：

// Append an image with source src to element
function appendImage(element, src, alt) {
  // DOM 0 method
  var image = new Image();

  // DOM 1+ - use this or above method
  // var image = document.createElement('img');

  // Set path and alt properties
  image.src = src;
  image.alt = alt;

  // Add it to the DOM
  element.appendChild(image);

  // If all went well, return false so navigation can 
  // be cancelled based on function outcome
  return false;
}

所以在A元素中：

<a onclick="appendImage(this, 'foo.jpg', 'Picture of foo');">Add an image</a>

如果A是链接并且您希望取消导航，则返回该函数返回的任何内容。如果函数未返回false，则将遵循链接并应提供等效功能：

<a href="link_to_picture or useful page" onclick="
  return appendImage(this, 'foo.jpg', 'Picture of foo');
">Add an image</a>

Answer 2

你应该这样使用。还有其他几种好方法，这只是为了简化和理解目的

<body>
<a onClick='ChangeImage(this);return false'> Click Me <a>
</body>


<script>
function ChangeImage(obj)
{
 obj.innerHTML = "<img src='imangename.jpg'>";
}
</script>

Answer 3

您可能需要的javascript插件是Highslides，请查看here以获取示例。

下载highslides here。

Answer 4

首先，您可能希望为该链接指定ID。

<a id="click-me">Click me!</a>

然后是JavaScript ..

document.getElementById('click-me').addEventListener('click', function () {
    var image = new Image();
    image.src = "your-picture.jpeg/png/whatever";
    this.appendChild(image);
});

如何使用javascript将图像添加到元素

4 个答案: