Как отобразить картинку по клику на элемент js?

Question

[skyfly2010]

Добрый день, дорогие профи. Подскажите, как можно провернуть следующий фокус. Видел на одном сайте... Но как такое сделать самому пока не знаю, стало интересно.
В общем, задача такая:
На странице есть 4 (допустим 4) элемента управления и фоновый рисунок. Для примера, пускай это будем дом.
Мы жмем на 1 элемент управления (id="elem1") - возле дома появляется пристройка.
Жмем 2 - балкон.
Если нажать все 4 управляющих элемента - возле дома появляется 4 дополнительных объекта.
Я так понимаю, они добавляются какими-то слоями.
Как такое сделать - понятия не имею. Подскажите, кто в курсе.

Вот, нашел ссылку на сайт, где такое сделано.

Comments

[Игорь]

нм х не понял...

Answer 1

[dimkanio]

Вот код с этого сайта:

//<![CDATA[
    jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}

$.preloadImages(
"http://ecohome.by/images/home/1-2.png",
"http://ecohome.by/images/home/1-3.png",
"http://ecohome.by/images/home/1-4.png",
"http://ecohome.by/images/home/1-5.png",
"http://ecohome.by/images/home/1-6.png"
);
//]]>

$(document).ready(function () {
	$("#range_01").ionRangeSlider({
	    grid: true,
	    from: 0,
	    values: [
	        "180", "200",
	        "220", "240",
	        "260", "280",
	        "300", "320"
	    ]
	});
	$("#range_02").ionRangeSlider({
	    grid: true,
	    from: 0,
	    values: [
	        "140x160", "140x180",
	        "140x200", "140x230",
	        "160x200", "180x230"
	    ]
	});
	$("#range_03").ionRangeSlider({
	    grid: true,
	    from:0,
	    values: [
	        "160x160", "160x180",
	        "160x200"
	    ]
	});
	$("#range_04").ionRangeSlider({
	    grid: true,
	    from:0,
	    values: [
	        "160x160", "160x180",
	        "160x200"
	    ]
	});
	
	$('input.range_type_home').change(function() {
		$(this).closest('div').find('input').prop("checked", true);
	});
	
	$('#email_double').keyup(function(){
		$('#construct_form input[name="email"]').val( $(this).val() );
	});
	$('#email_double').change(function(){
		$('#construct_form input[name="email"]').val( $(this).val() );
	});
	
	$('input#lenght').numeric();
});

и вот

$(document).ready(setupConstruct);

function setupConstruct()
{
	$("#construct_form input:radio").change(
		function(){
			cleanConstructArea();

  			// при смене дома убираем всe еэлементы
  			var allCheckboxes = $("#checkboxes input:checkbox:enabled");
  			allCheckboxes.removeAttr('checked');

  			// находим номер дома
			var n_radio = "";
  			var n_radio1 = $('form :radio.type_home:checked').data('val');
  			var n_radio2 = $('form :radio.level:checked').data('val');
  			if((n_radio1 == 1 || n_radio1 == 3) && n_radio2 == 1) {
				n_radio = 1;
				$("#balkon").css("display","inline");// убираем балконы у домов, где их нет
		  	}
		  	if((n_radio1 == 1 || n_radio1 == 3) && (n_radio2 == 2 || n_radio2 == 3)) {
				n_radio = 1;
				$("#balkon").css("display","inline");// добавляем балкон дому, где он есть
		  	}
		  	if((n_radio1 == 2 || n_radio1 == 4) && n_radio2 == 1) {
				n_radio = 1;
				$("#balkon").css("display","inline");// убираем балконы у домов, где их нет
		  	}
		  	if((n_radio1 == 2 || n_radio1 == 4) && (n_radio2 == 2 || n_radio2 == 3)) {
				n_radio = 1;
				$("#balkon").css("display","inline");// добавляем балкон дому, где он есть
		  	}
		  	

		  	// присваием элементам новые родители
		  	$("#checkboxes input:checkbox").each(
		  		function(){
					var n_check = $(this).val();
					var n_check_array = n_check.split('-');
					var new_check_val = n_radio+'-'+n_check_array[1];
					$(this).val(new_check_val);
				}
			);

		    // начинаем сменять изображение
		    //if(n_radio2 == 1 || n_radio2 == 2)
		    if(n_radio2)
		    {
		    	var path = $(this).val();

				var slide = '';
				$('#construct_image').append(slide).find(".loading").fadeIn(1000);
				$('#construct_image').find('.new').remove();
				$('#construct_image').children('img').addClass("hide");
				var img = '<img class="new" src="http://ecohome.by/images/home/'+n_radio+'-1.png" alt="" />';
				$('#construct_image').prepend(img).find('img.new').bind(
					'load',
					function() {
						$('#construct_image .loading').stop().remove();
						$('#construct_image').children('img.hide').fadeOut('slow', function(){$(this).remove();});
						$(this).removeClass('new');
					}
				);
			}
			return true;
		}
	);

	// прибавление элементов
	$("#construct_form #checkboxes input:checkbox").click(
		
		function(){
			var checkIt = $(this).prop("checked");
			var el_name = $(this).val();
			if (checkIt == true)
			{	
            	var el_name = $(this).val();
				var slide = '';
				$('#construct_image').append(slide).find(".loading").fadeIn(1000);
				var blockImg  = '<div class="construct_detail" id="'+el_name+'">';
					blockImg += '<img class="new" src="http://ecohome.by/images/home/'+el_name+'.png" alt="" />';
					blockImg += '</div>';
				$("#construct_image").prepend(blockImg).find('.construct_detail img').bind(
					"load",
					function(){
						$("#construct_image .loading").stop().remove();
					}
				);
			}
			else
			{
                var el_name = $(this).val();
				$("#"+el_name).remove();
			}
			checkIt = false;
			el_name = "";
			return true;
		}
	);

}

function cleanConstructArea()
{
	$("#construct_image div").each(
		function(){$(this).remove();}
	);
}

Comments

[skyfly2010]

dimkanio сделал сам, проще и красивее. Но за разъяснения спасибо.

Answer 2

[Greg Popov]

Ну так вперед в код сайта, это же опенсорс.

А вообще просто отображать элементы с разным z-index, всего-то