Как наложить значок / изображение на другое изображение при отправке формы? - PullRequest
Новая
       2

Как наложить значок / изображение на другое изображение при отправке формы?

3 голосов
/ 02 мая 2010

Поэтому я пытаюсь добавить значок к изображению, как только кто-то «пометил» часть изображения - то есть они отправили форму.

Как мне это сделать в jQuery?

Просто чтобы прояснить ... представьте, что вы на Flickr, и вы видите изображение. Вы хотите добавить аннотацию, вы нажимаете на изображение, где вы хотите, и оно показывает вам поле формы. Вы вводите информацию, которую хотите, затем, после того, как вы это сделали, в верхней части рисунка осталось небольшое изображение, показывающее, где вы оставили комментарий.

Есть идеи?

Редактировать - см. Код: 

    <script type="text/javascript">

        $(function() {
                var tag_box = $("<div>").appendTo("body").css({
                    "width": "40px",
                    "height":"40px",
                    "border":"4px solid #000000",
                    "position":"absolute",
                    "display":"none", 
                    "padding":"15px"
                    });

            var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});

            var comment_icon = $("<img src='images/asterisk_yellow.png' width='16' height='16' alt='Comment'>");

            $("#image-wrapper").live("click", function(e) {
                tag_box.css({
                    "left": e.pageX - 40,
                    "top": e.pageY - 40, 
                    "display": "block"
                    })
                .after(comment_box.css({
                    "left": e.pageX - 65,
                    "top": e.pageY + 40
                    }));
                 return false;  
                });

                $("form").submit(function() {
                    var params = $(this).serialize();

                    $("form")[0].reset();

                    return false;
                });                 
            });     
</script>

<body>
<div align="center">  

    <img src="images/image1.gif" width="760" height="182" alt="image1" id="image-wrapper">

</div>
</body>

То, что я пытаюсь сделать, - это когда пользователь щелкает область (он видит квадратную рамку, показывающую, где он помечает). Затем они вводят комментарий, и комментарий сохраняется в переменной (пока), но затем я хотел бы отметить эту область (изображения) изображением ... в данном случае это «звездочка». Так что я думаю, что решение должно было бы знать координаты или что-то, где был добавлен комментарий. Я искал offset (), но я относительно новичок в jQuery и с трудом собираю кусочки.

1 Ответ

4 голосов
/ 02 мая 2010

Простой, прозрачный PNG отлично подойдет. Скажем, ваша разметка для содержания списка изображений выглядит следующим образом: 

<ul id="img_list">
    <li>
        <img src="image.jpg" alt="Image Title" />
        <img class="icon" src="annotation.png" alt="You've done XYZ to this." />
    </li>
    <!-- List continues... -->
</ul>

Вы можете оформить это так: 

#img_list li {
    display: block;
    width: 50px;
    height: 50px;
    position: relative;
}

#img_list .icon {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

Если вы хотите добавить его динамически в jQuery, вы можете сделать что-то подобное в обратном вызове отправки формы: 

$icon = $("<img class='icon' src='annotation.png' alt='You've done XYZ to this.' />");
$("#img_list li.active").append($icon); // assuming you set class active on the item that's being edited

Редактировать: Точная функциональность / стиль / разметка зависит от того, как выглядит ваш сайт. Поскольку пользователь просматривает изображения, я думаю, вы захотите использовать AJAX для отправки формы, чтобы они не потеряли свое место. Если у вас есть какой-то код, на который я мог бы взглянуть, я бы сказал точнее.

Кроме того, если есть много разных значков, вы должны использовать спрайты CSS и добавить 2-й класс к значку, чтобы определить, какой спрайт использовать.

Редактировать 2: Этот имеет больше информации, чем я могу дать. Вам просто нужно изменить часть кода здесь и там, чтобы получить желаемый эффект, но вы можете очень легко добавить прозрачную звездочку как часть функции SubmitTag, вам просто нужно вытянуть целевую позицию (я думаю, для этого он использует переменные targetX и targetY) и устанавливает значок тега влево и вправо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...