Вставьте изображение в месте щелчка мышью - PullRequest
Новая
       4

Вставьте изображение в месте щелчка мышью

0 голосов
/ 27 июля 2010

Мне нужно вставить изображение туда, где пользователь нажимает на указанный элемент (другое изображение), и чтобы оно находилось перед этим изображением. Это можно сделать в JavaScript? Если нет, то чем?

Спасибо

Ответы [ 5 ]

0 голосов
/ 27 января 2017

Убедитесь, что изображение в указанном местоположении img src указано ...

0 голосов
/ 27 июля 2010

Это должно быть возможно.Я лично использую JQuery, что делает эти вещи довольно простыми: http://jquery.com

Этот пример должен дать вам представление о том, как вы могли бы сделать это: 

    <html>
    <head>
        <title>My Page></title>
        <style type="text/css">
            .overlay {
                position: absolute;
                z-index: 500;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $("#clickable-image").click(function() {
               var position = $(this).offset();
               $("#overlay-image").offset(position).show();
            });
        </script>
    </head>
    <body>
        <img id="clickable-image" src="path/to/image" />

        <div id="overlay-image" class="overlay" style="display: none;">
            <img src="path/to/overlay/image" />
        </div>
    </body>
</html>
0 голосов
/ 27 июля 2010

, если вы не используете внешние библиотеки, я бы посмотрел на jQuery , который может сделать вашу жизнь намного проще для такого рода вещей

0 голосов
/ 27 июля 2010

Конечно, основным потоком будет добавление прослушивателя событий к событию onclick. Затем прослушиватель событий добавит изображение в некоторый контейнер div.

Ключевым моментом является CSS для ваших изображений. Убедитесь, что вы абсолютно позиционируете ваших изображений, и было бы неплохо использовать инкрементный z-индекс. Вы можете захватить значения положения из события onclick (для всех различных значений см .: http://www.quirksmode.org/js/events_properties.html#position). Вы должны установить эти значения CSS, когда вставляете изображение в javascript.

0 голосов
/ 27 июля 2010

Вы должны также опубликовать свой HTML / структуру, но вы можете сделать что-то вроде этого: 

var el = document.getElementById('image_id');
var img = document.getElementById('image_id2');
var container = document.getElementById('container_id');

el.onclick = function(){
  container.appendChild(img);
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...