oznaczenie wybranego zdjęcia Opcje

[vojtasek]

Witam walczę jak dodać do wybranego zdjęcia z grupy zdjęć tzw. "tick" czyli zaznaczenie ze ta opcja-zdjęcie własnie zostało wybrane. Obecnie mam takie rozwiązanie że:

[HTML] pobierz, plaintext 
$("img[name$='system_hz_img']").live('click', function(){
	if($("input:radio[name=system_hz]").is(":checked")){
             $("img[name$='system_hz_img']").removeClass("frame_system_hz");
             $(this).addClass("frame_system_hz");
			 }
			 });
[HTML] pobierz, plaintext 

dodaję klasę do zdjęcia która:

[HTML] pobierz, plaintext 
img.frame_system_hz{
border:2px solid #ff0000;
	-webkit-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.1);
	-moz-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.1);
	box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.1);
	background: #fff;
opacity:0.4;
filter:alpha(opacity=40);
	}
[HTML] pobierz, plaintext 

bluruje mi zdjęcie i dodaje obramowanie. Efekt jest ok ale jeszcze jest mało czytelny. Chciałbym dodatkowo aby przy wyborze zdjęcia do blurowania i ramki dodał sie np. czerwony "tick" (ptaszek) jako zewnętrzna warstwa na zdjęciu. Tak by ostatecznym wynikiem było zblurowane lecz widoczne zdjęcie w czerwonej ramce z czerwonym znakiem "tick".

Jak to zrobić? Bez powielania zdjęć (bez znaczka i po kliknięciu, wyborze ze znaczkiem).

[Helid]

Kod

img.frame_system_hz { position: relative; }
img.frame_system_hz:after { display: block; z-index: 1; position: absolute; right: 0; top: 0; content: ""; background: url('obrazek'); }

Ten post edytował Helid 15.07.2013, 18:01:18