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