How to create a simple improvement version of "hover and change" in JavaScript?

Question

I'm doing a JavaScript function which is to hover anyone of the <a> elements and change the <img> src and <p> accordingly.

I am practicing and learning JavaScript. So I have create a super simple JavaScript function code.

function onHover() {

    var pistiProducts = [
        "https://temp1.asign.pro/wp-content/uploads/2019/05/test-1.jpg",
        "https://temp1.asign.pro/wp-content/uploads/2019/05/test-2.jpg"
    ];

    var replace = document.getElementById("replacement");
    var itemdec = document.getElementById("text-replacement");

    replace.src = pistiProducts[1];
    itemdec.innerHTML = "Test 1";

}

In my HTML:

<div class="dropdown-menu-wrapper d-flex">                                               
  <div class="dropdown-item-wrapper flex-grow-1">                                                
    <a id="pisti-products" onmouseover="onHover();" class="pisti-products" href="#">Action</a>                                                   
    <a class="" href="#">Another action</a>                                                      
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                 
  </div>

  <div class="dropdown-display-wrapper">                                                     
    <div class="display-img replacement">                                                            
     <img id="replacement" class="w-100 img-fluid" src="https://temp1.asign.pro/wp-content/uploads/2019/05/test-1.jpg" alt="">                                                       
    </div>                                                       
    <p class="mb-0 w-100 pisti-title" id="text-replacement">Another action</p>                                                   
  </div>                                                 
</div>

Currently what I will do is I will write 13 function and set the onmouseover="" to the relevant one. But I don't think this is a best solution because I have more to do something like this.

As you can see my JavaScript code included Array. But I have no idea what can be done with array. :(

I need help to suggest me the best and easy solution. Please suggest me in JavaScript code instead of jQuery. I'm not good with basic JavaScript syntax and structure.

Are you trying to change the image on hover and revert back to the original when the cursor is no longer hovering over the link? — tshimkus, May 21 '19 at 03:27
See this link https://stackoverflow.com/questions/17507870/jquery-image-changing-on-hover — Full Stop, May 21 '19 at 03:34
Guys! Thank you for both of you. I did something crazy, point me if I'm wrong. I have added data attribute method. What I did is actually added ```data-attribute```, then I set the ```data-attribute``` equal to number. Example in my HTML: ```data-pisti-product="0"```, ```data-pisti-product="1"```. Then i set all my `````` elements with same ```onmouseover="onHover(this)"```. Finally in my JavaScript I have added expression on my function called ```products``` then I set a ```var i = products.getAttribute("data-pisti-product")``` and using ```replace.src = array[i]```. Is this correct? — Anderson Koh, May 21 '19 at 03:48
@tshimkus Yes, there are more than 10 `````` elements on the dropdown menu. Everyone item have different image and description. — Anderson Koh, May 21 '19 at 03:58
@DipakDholakiya I cannot understand jQuery atm. But thanks anyway for the sharing. — Anderson Koh, May 21 '19 at 03:59
A pure CSS solution might be available depending on how you will be populating the images. It would involve using the [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) pseudo-class and a [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) property. It may or may not be easier, depending on whether the images are relatively static. — tshimkus, May 21 '19 at 04:12

Kamil Kiełczewski · Accepted Answer · 2019-05-21T04:28:26.223

add parameter n to your function onHover(n)

function onHover(n) {

    var pistiProducts = [
        "https://temp1.asign.pro/wp-content/uploads/2019/05/test-1.jpg",
        "https://temp1.asign.pro/wp-content/uploads/2019/05/test-2.jpg"
    ];

    var replace = document.getElementById("replacement");
    var itemdec = document.getElementById("text-replacement");

    replace.src = pistiProducts[n%2];
    itemdec.innerHTML = `Test ${n}`;

}

img { height: 100px;}

<div class="dropdown-menu-wrapper d-flex">                                               
  <div class="dropdown-item-wrapper flex-grow-1">                                                
    <a id="pisti-products" onmouseover="onHover(0)" class="pisti-products" href="#">Action</a>                                                   
    <a class="" onmouseover="onHover(1)" href="#">Another action</a>                                                                                                       
    <a class="" onmouseover="onHover(2)" href="#">Something else here</a>                                                         
    <a class="" onmouseover="onHover(3)" href="#">Something else here</a>                                                         
    <a class="" onmouseover="onHover(4)" href="#">Something else here</a>                                                         
    <a class="" onmouseover="onHover(5)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(6)" href="#">Something else here</a>                                                         
    <a class="" onmouseover="onHover(7)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(8)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(9)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(10)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(11)" href="#">Something else here</a>          
    
    <a class="" onmouseover="onHover(12)" href="#">Something else here</a> 
  </div>

  <div class="dropdown-display-wrapper">                                                     
    <div class="display-img replacement">                                                            
     <img id="replacement" class="w-100 img-fluid" src="https://temp1.asign.pro/wp-content/uploads/2019/05/test-1.jpg" alt="">                                                       
    </div>                                                       
    <p class="mb-0 w-100 pisti-title" id="text-replacement">Another action</p>                                                   
  </div>                                                 
</div>

Thanks! It work like charm. The description of the image I can use ```data-attribute``` right? — Anderson Koh, May 21 '19 at 05:07

How to create a simple improvement version of "hover and change" in JavaScript?

1 Answers1