I have a page that contains 6 elements, 3 elements in each row. My goal is to change the image in div with id=b in the second row when hovering div with id=a in the first row. Below is my HTML.
homepage.html
{% block body %}
<div class="container-fluid">
<!--ROW 1-->
<div class="row w-100">
<div class="card col-4 mobile-fly-me-section sidebar-color">
<div class="text-uppercase home-fly">Lorem Ipsum</div>
</div>
<div class="card col-4 hal-section justify-content-between p-3" id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">
<h5 class="card-title home text-uppercase">header</h5>
<a href="{% url 'main' %}" class="border-0 text-uppercase home stretched-link text-decoration-none">GO <img class="arrow" src="{% static 'assets/main/arrow.svg' %}"></a>
</div>
<div class="col-4 border d-flex flex-column min-vh-25 justify-content-end align-items-bottom p-3 home">Lorem ipsum</div>
</div>
<!--END ROW 1-->
<!--ROW 2-->
<div class="row w-100">
<div class="card col-4 mobile-fly-me-section text-uppercase home" id="b">
<img src="{% static 'assets/graphics/graphic 01.svg' %}" width="75%"> <!-- before hover-->
<img src="{% static 'assets/graphics/graphic 02.svg' %}" width="75%"> <!-- after hover-->
</div>
<div class="col-4 border d-flex flex-column min-vh-25 justify-content-end align-items-bottom p-3 home">Lorem ipsum</div>
<div class="col-4 border d-flex flex-column min-vh-25 justify-content-between align-items-top p-3 text-uppercase home"><b>Lorem ipsum</b>
<div> <img class="arrow" src="{% static 'assets/main/arrow.svg' %}">
</div>
</div>
<!--END ROW 2-->
</div>
{% endblock body %}
{% block js %}
<script async src="//jsfiddle.net/YShs2/embed/"></script>
<script>
function chbg(color) {
document.getElementById('b').style.backgroundColor = color;
}
</script>
{% endblock js %}
I found a solution that is changing the background color but I am not sure how to switch images (from graphic 01.svg to graphic 02.svg)
You could do it in a similar way to the way the background is changed. The property you need to update is 'content' and you set it to "url(http://someimage.com)"
So you would have a function like
function changeURL(imgURL) {
document.getElementById('b').style.content = `url(${imgURL})`;
}
And then on the div #a you can have
onmouseover="changeURL(url1)" onmouseout="changeURL(url2)"