changing image in different div on hover

Question

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)

To change image src, use: `document.getElementById("image_id").src = 'assets/main/graphic02.svg'` — freedomn-m, Feb 09 '22 at 09:15
Can you try changing the attribute using `jQuery` ie `$("#id").attr("str", URL);` — Ajith, Feb 09 '22 at 09:15
Please show us the JS you have already written for the mouseover event. — A Haworth, Feb 09 '22 at 09:20
the code is taken from http://jsfiddle.net/YShs2/ @AHaworth, there is nothing more that I used — Adrian, Feb 10 '22 at 12:10

score 1 · Accepted Answer · answered Feb 09 '22 at 09:57

1

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)"

answered Feb 09 '22 at 09:57

Simeon Gavalyugov

321
1
3

thank you for the answer, I have a question. What should I put in src in div with id=b? – Adrian Feb 10 '22 at 11:50
Ah, that's a good point. You could either add a 'blank' image or just insert the image dynamically in changeURL. A few different options are given here https://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src One option is the following or – Simeon Gavalyugov Feb 10 '22 at 12:10

changing image in different div on hover

1 Answers1