1

Есть, например, картинка дома. Нужно, чтобы при наведении курсора на область крыши, появлялась другая картинка этого дома, но уже с другой крышей, а при наведении на дверь появлялась картинка дома с другой дверью. Также, помимо смены картинки, при наведении на эту область, нужно, чтобы появлялось модальное окно с описанием. Вопрос в том, как лучше сделать замену картинки, при наведении на определенную область?

Пришла идея как сделать на css: через hover - сделать пустой div, над нужной областью этой картинки. При наведении на эту область открывается скрытый (display:block;) div с нужной картинкой. Но это получается немного запутано, так как нужно сделать 6 разных областей на картинке.

Есть ли какой-то более простой способ?

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 22 фев 2016 в 7:56

1 ответ 1

1

Наведите на подушку-мяч на кровати. Пример использования метода jquery mouseover():

$('#ball1').mouseover(function(){
	$(this).css('background-image','url("http://i.imgur.com/jItGQlA.png?1")');
});
	#cont {
		width: 600px;
		height: 450px;
		background-image: url('http://babypalace.ru/wp-content/uploads/2015/06/futbolnaya_tema_v_detskoi_2.jpg');
		position: relative;
	}
	div > div {
		position: absolute;
	}
#ball1 {
    height: 42px;
    left: 228px;
    top: 229px;
    width: 42px;
}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script><div id="cont">
 <div id="ball1"></div>
</div>

2
  • спасибо за ответ, решение хорошо подходит к мой ситуации. Хорошего дня!
    – StV
    20 фев 2016 в 12:22
  • Если ответ ответчика вас устроил, примите его, нажав галочку.
    – Arcadiy
    20 фев 2016 в 20:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.