@skyfly2010

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

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

Вот, нашел ссылку на сайт, где такое сделано.
  • Вопрос задан
  • 269 просмотров
Решения вопроса 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();}
	);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Gregpopov
Full stack web developer
Ну так вперед в код сайта, это же опенсорс.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы