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

发布于 2024-11-09 20:21:14 字数 196 浏览 6 评论 0原文

我基本上有这个链接，当我点击它时，我希望在它上面显示一个图像。使用 javascript 我怎样才能做到这一点？

<a> click me </a>

CSS：

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

原文

I basically have this link, where when i click it, i want an image to show over it. Using javascript how can i do this?

<a> click me </a>

css:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盗心人 2024-11-16 20:21:14

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

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

Adding a new image element is pretty easy:

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

so in an A element:

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

If the A is a link and you wish to cancel navigation, return whatever the function returns. If the function doesn't return false, the link will be followed and should provide equivalent functionality:

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

回复收藏 0 原文

永言不败 2024-11-16 20:21:14

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

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


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

You should use like this. There are several other good methods, this is just for simplicity and understanding purpose

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


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

回复收藏 0 原文

掩于岁月 2024-11-16 20:21:14

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

此处下载 highslides。

回复收藏 0 原文

若沐 2024-11-16 20:21:14

首先，您可能需要为链接提供一个 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);
});

First, you'll probably want to give the link an ID.

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

Then for the JavaScript..

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

回复收藏 0 原文

~没有更多了~