как в html интерактивно поменять картинку

Общее
1

скажите. пожалуйста.
вот есть, допустим абзац слева, а картинка справа. Как средствами html сделать, чтобы при наведении курсора на различные фразы абзаца картинка справа менялась на разные картинки. Как связать текстовые ссылки в одном месте со сменой картинки в другом?
И заодно. Как рациональнее это делать? - в html или javascript?

2

вот я попробовала сделать так
это html

Смена картинки 
    <div class="boxes">
				<p>
				Здесь можно посмотреть разных котов. Вот, например, 
				в этой коробочке кот с испуганным взгядом. 
				А вот в этой коробочке находится
				</p>
				
				<a href="#" id="to_blue"> кот на синем фоне </a>
				<div class = "without p1"></div>
				<div class = "img_text">  </div><!-- img-text -->
				
				<p>
				Пойдём дальше и заглянем в следующую коробочку. В ней 
				находится 
				</p>
				<a href="#" id="to_red"> кот на красном фоне </a>
				<div class = "without"></div>
				<div class = "img_text">  </div><!-- img-text -->
									
    </div><!--boxes -->
        </body>

а это css:
///////////////////////////////////////////////////////////////////////////////////////////////////////////
.boxes{
position: absolute;
border: 3px dashed green;
width:150px;
top: 100px;

left: 150px;
padding: 10px;

}

.boxes img{
width:150px ;
}

.without{
display:block;
position:absolute;
width: 150px;
height: 170px;
left: 200px;
top: 0px;
background-image:url(“without_fon.png”) ;
background-size: contain;
background-repeat: no-repeat;
background-position: right;
margin-top: 0px;
border: 1px solid black;

}

.img_text {
display: block;
width: 150px;
height: 170px;
position:absolute;
left: 200px;
top: 0px;

background-size: contain;
background-repeat: no-repeat;

border: 1px solid black;

}

.boxes p{
margin-top: -5px;
margin-bottom: 1px;
}

.boxes a{
margin-bottom: 5px;
border: 1px solid green;

}

.boxes a:hover ~.without{
display: none;
}

#to_blue:hover ~ .img_text{
background-image:url(“blue_fon.png”) ;
}

#to_red:hover ~ .img_text{
background-image:url(“red_fon.png”) ;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
и почти всё получается, но при наводке курсора на вторую ссылку первая картинка (испуганный кот) не исчезает. В принципе, эту картинку можно заслонить второй (кот на красном фоне), но меня заело на вопросе: почему не исчезает-то??

3

Воспользуйтесь песочницей для демонстрации своего кода, пожалуйста.

4

я вот нашла такую песочницу
https://jsfiddle.net/
но я не понимаю, как вставить картинки. Картинки лежат на моем компе.

1 лайк
5

Сами картинки значения не имеют, вы можете воспользоваться “заполнителями”.

6

вот как-то так…
https://jsfiddle.net/0oszfp0t/3/
но теперь в песочнице вообще ничего не получилось.
А нет, что-то получилось.

7

И что вы хотите изменить? Как должно быть?

8

сейчас попробую это выяснить :slight_smile:
дело в том, что в песочнице это немножко по другому работает.
Вообщем, при наведении первый раз курсора на “кот на синем фоне” всё в порядке: появляется кот и исчезает серый фон.
При наведении курсора на “кот на красном фоне” кот появляется, но серый фон не исчезает.
И наконец, самое неожиданное и гнусное: при наведении повторно курсора на “кот на синем фоне” изображение вообще непрерывно дёргается .

9

В песочнице ничего не дергается, и серый фон при наведении не отображается…