Как мне добавить изображение к элементу с помощью javascript

#javascript #css #element #hyperlink

#javascript #css #элемент #гиперссылка

Вопрос:

По сути, у меня есть эта ссылка, по которой, когда я нажимаю на нее, я хочу, чтобы поверх нее отображалось изображение. Используя javascript, как я могу это сделать?

 <a> click me </a>

css:

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

1. Вы не можете добавить изображение поверх чего-либо с помощью CSS.

2. понял. но как я могу добавить элемент с помощью javascript?

3. О, Хорошо. Да. Вы можете это сделать. Но добавление класса ‘clicked’ к ссылке ничего не даст.

Ответ №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 = a<

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

Ответ №2:

Вы должны использовать вот так. Есть несколько других хороших методов, это просто для простоты и понимания

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


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

1. как сделать так, чтобы изображение оставалось там после того, как пользователь нажимает на ссылку?

2. изображение останется, но оно будет перезаписано при повторном нажатии.

Ответ №3:

Возможно, вам понадобится javascript-плагин Highslides, смотрите примеры здесь.

Скачать highslides можно здесь.

Ответ №4:

Во-первых, вы, вероятно, захотите присвоить ссылке идентификатор.

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

1. как сделать так, чтобы изображение оставалось там после того, как пользователь нажимает на ссылку?

2. Оно должно оставаться там, пока они не перезагрузят страницу.