Выделите выбранное изображение в форме - с помощью Jquery? - PullRequest
Новая
       3

Выделите выбранное изображение в форме - с помощью Jquery?

6 голосов
/ 14 ноября 2010

Я искал в Google ответ и нашел nada, так что даже ссылка на страницу, показывающую, как это сделать, будет очень цениться.

В основном у меня есть форма, в которой нет ничего, кроме изображений 

<form>
<input type="image" src="image.jpg" value="image_value">
<input type="image" src="image2.jpg" value="image_value2">
</form>

Я хочу иметь возможность каким-то образом выделить изображение, выбранное пользователем.Даже просто контур вокруг изображения 1, когда пользователь щелкает изображение 1. было бы идеально.

Я уже использую Jquery в этом проекте, поэтому, если есть решение jquery, оно будет самым удобным.

Ответы [ 5 ]

13 голосов
/ 07 мая 2014

Подход доступный будет состоять в том, чтобы стилировать метки переключателей так, чтобы они вели себя как выбор изображения: 

<form action="#" method="post">
    <input type="radio" class="radio" name="example" id="ex1" value="ex1" checked />
    <label for="ex1" class="label">Example 1</label>
    <input type="radio" class="radio" name="example" id="ex2" value="ex2" />
    <label for="ex2" class="label">Example 2</label>
</form>

А потом CSS. Как видите, сами радиостанции скрыты с непрозрачностью 0: 

.radio {
    opacity: 0;
    position: absolute;
}
.label {
    background: url(http://i.imgur.com/mW6xr2I.png);
    text-indent: -999em;
    border: 10px solid white;
    width: 126px;
    height: 126px;
    display: block;
    float: left;
    margin: 10px;
}
input[type="radio"]:checked + label {
    border: 10px solid orange;
}

Вот пример в действии: http://jsfiddle.net/RH98R/

Это дает дополнительное преимущество, так как не зависит от jQuery (или даже от javascript)!

7 голосов
/ 14 ноября 2010

ОБНОВЛЕНИЕ: Пожалуйста, смотрите ответ Брайанбрауна .Его гораздо лучше.

В HTML <input type="image"> - это просто кнопка отправки с изображением в качестве лица.Я не думаю, что это то, что вы хотите.Вы, вероятно, хотите получить список реальных изображений, при нажатии на которые устанавливается скрытое значение формы в соответствии с атрибутом «data-value».Итак, ваш HTML должен выглядеть примерно так: 

<form id="select-form">
    <img src="image.jpg" data-value="image_value">
    <img src="image2.jpg" data-value="image_value2">
    <input type="hidden" id="image-value" name="selected_image" value="">
</form>

Затем в вашем javascript вы хотите выделить изображение и установить скрытое значение, например: 

$('#select-form img').click(function() {
    // Set the form value
    $('#image-value').val($(this).attr('data-value'));

    // Unhighlight all the images
    $('#select-form img').removeClass('highlighted');

    // Highlight the newly selected image
    $(this).addClass('highlighted');
});

Наконец,Установите несколько стилей для класса подсветки в вашем файле CSS: 

img.highlighted {
    border: 2px solid blue;
}
0 голосов
/ 14 ноября 2010

Должно сработать что-то вроде следующего, вы можете создать CSS-классы стилей и, тем не менее, легче изменить стиль. 

$("input[type='image']")
    .focus(function() { $(this).css("border","solid 1px #f00"); })
    .blur(function() { $(this).css("border","0"); });
0 голосов
/ 14 ноября 2010

что-то вроде

CSS: 

.selected { border: 1px solid black; }

JavaScript: 

$(function() {
     $("input[type=image]").click(function(){ $(this).addClass('selected'); });
});
0 голосов
/ 14 ноября 2010

Следующее будет давать каждому входному изображению границу 1px и отступы 10px при нажатии, но в идеале вы должны дать им класс для нацеливания на него, например: $(".imgs2higlight").bind()

  $(document).ready(function() {
            $("input[type='image']").bind('click',function(e) {
e.preventDefault();
            $(this).css({padding : '10px', border: "1px solid blue"});
            })
            })
...