Выбор аватарки, не кнопкой, а нажатием на желаемую аватарку

[Царя]

Имею вот такое дело:

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

 

[CamaroSS]

Завернуть изображение в лейбл, например так:

<input type="radio" id="av1" name="av" value="1"><label for="av1"><img src="..."></label>

Либо, если IE <= 7 не интересуют, то

<label><input type="radio" name="av" value="1"><img src="..."></label>

После этого инпут можно скрыть, но только не display: none.

 

[Царя]

Завернуть изображение в лейбл, например так:

<input type="radio" id="av1" name="av" value="1"><label for="av1"><img src="..."></label>

Либо, если IE <= 7 не интересуют, то

<label><input type="radio" name="av" value="1"><img src="..."></label>

После этого инпут можно скрыть, но только не display: none.

Спасибо, приду с зала буду пробовать

Завернуть изображение в лейбл, например так:

<input type="radio" id="av1" name="av" value="1"><label for="av1"><img src="..."></label>

Либо, если IE <= 7 не интересуют, то

<label><input type="radio" name="av" value="1"><img src="..."></label>

После этого инпут можно скрыть, но только не display: none.

Не удержался, до зала попробовал :3
Все пока идет хорошо, только как можно инпут спрятать? Наиболее правильный метод можешь подсказать?

 

[mrlasking]

Делаете список ul + присваиваете id аватарам + onclick событие (как вариант .click(), если подключена библиотека jQuery). И не извращайтесь с инпутами и лейблами.

 

[CamaroSS]

Все пока идет хорошо, только как можно инпут спрятать? Наиболее правильный метод можешь подсказать?

Насчёт "правильности" не знаю, но

.<класс контейнера> input {
    visibility: hidden;
    position: absolute;
    left: -999px;
}

работает.

 

[Царя]

Все пока идет хорошо, только как можно инпут спрятать? Наиболее правильный метод можешь подсказать?

Насчёт "правильности" не знаю, но

.<класс контейнера> input {
visibility: hidden;
position: absolute;
left: -999px;
}

работает.

Мне бы очень хотелось ваш скайп/вк, чтобы в режиме "онлайн" общаться и сразу задавать вопросы, скрыть сейчас попробую

Скрыл, теперь бы как придумать, что выбранная аватарка как-то выделяется, как это в стилях прописать?
Пробовал через

#tr_ad_portret img:focus{
тут параметры
}

 

[AngelGabriel]

И нафига тут инпут приплели, братва уже давно аякс юзает.

 

[mrlasking]

[member=AngelGabriel], ну вот и я о том же) Но нет) Как видишь - рогом в этот инпут уперлись.

 

[Царя]

[member=AngelGabriel], ну вот и я о том же) Но нет) Как видишь - рогом в этот инпут уперлись.

Я без понятия как мне сделать через него, если бы вы расписали, то я попробовал бы ваш метод...

 

[mrlasking]

[member=Царя],

Делаете список ul + присваиваете id аватарам + onclick событие (как вариант .click(), если подключена библиотека jQuery). И не извращайтесь с инпутами и лейблами.

или мне за вас код писать?

 

[Царя]

[member=Царя],

Делаете список ul + присваиваете id аватарам + onclick событие (как вариант .click(), если подключена библиотека jQuery). И не извращайтесь с инпутами и лейблами.

или мне за вас код писать?

было бы не плохо помочь

 

[mrlasking]

[member=Царя], дак этим и занимаемся. Только, если за тебя все писать будут - сам ничему не научишься.

http://jsfiddle.net/mrlasking/eQJcM/ - вот идея, развивай

 

[AngelGabriel]

Тебе просто нужно слать некое значение на сервер. К примеру id пользователя и id автарки. Вешаем событие на клик по картинке. К примеру на джэйквери это так

var id_user = 10;
$('.avatar').on('click', function() {
var id_ava = $(this).data('id_ava');

$.ajax({
	 url: 'action.php',
	 type: 'post',
	 dataType:'json',
	 data: { id_user: id_user, id_ava: id_ava },
	 success: function( res ) {
		 console.log( res );
	 }
});
});

id авы прописываешь так

<img data-id_ava='3' src='/some.jpg' alt='ava1' />

id юзера сам подумай лткуда вытянуть.

На сервере обрабатывашь запрос. К примеру так, если php

if ( isset( $_POST['id_user'] ) && isset( $_POST['id_ava'] ) ) {
$id_user = intval( $_POST['id_user'] );
$id_ava = intval( $_POST['id_ava'] );

$sql = "UPDATE `users` SET `ava` = '{$id_ava}' WHERE `id` = '{$id_user}'";
$res = $db->query( $sql );

if ( !$res ) {
	 die( json_encode( array( 'stat' => 'error avatar not update' ) ) );
} else {
	 die( json_encode( array( 'stat' => 'ok' ) ) );
}
}