Hover over element animate next element - How to remove inline JS

Question

I'm relatively new to JavaScript, but I'm trying to find a more efficient method for calling a rollover function without using inline events within the HTML. Below is the method I'm currently using:

HTML

        <div id="work_square">
        <img onmouseover="rolloverIn('rollover_1');" onmouseout="rolloverOut('rollover_1');" src="images/frugal_image.png" width="100%"/>
        <div onmouseover="rolloverIn('rollover_1');" onmouseout="rolloverOut('rollover_1');" id="rollover_1" class="rollovers">
            <div id="rollover_text">
                <h2>ROLLOVER 1 TITLE</h2>
                <p>This is rollover 1.</p>
            </div>
        </div>
    </div>
    <div id="work_square">
        <img onmouseover="rolloverIn('rollover_2');" onmouseout="rolloverOut('rollover_2');" src="images/exhibiton_image.jpg" width="100%"/>
        <div onmouseover="rolloverIn('rollover_2');" onmouseout="rolloverOut('rollover_2');" id="rollover_2" class="rollovers">
            <div id="rollover_text">
                <h2>ROLLOVER 2 TITLE</h2>
                <p>This is rollover 2.</p>
            </div>
        </div>
    </div>

JS

<script>
function rolloverIn(el){
    var elem = document.getElementById(el);
    elem.style.opacity = 1;
    elem.style.transform = "scale(1)";
}
function rolloverOut(el){
    var elem = document.getElementById(el);
    elem.style.opacity = 0;
    elem.style.transform = "scale(0)";
}

Basically I'm calling a function to apply a CSS transform and opacity alteration for a rollover placed over each work_square when either the image or rollover is moused over, and then to remove the alterations on mouse out.

This method works , but it's my understanding that inline coding is bad practice. Could someone point me in the right direction towards a more efficient method?

Thanks.

Answer 1

First of all, do not ever use the same ID for multiple elements , IDs are unique. What you want here are classes, so your HTML code should be changed to something like this:

<div class="work_square">
    <img class="rollover" src="images/frugal_image.png" width="100%"/>
    <div class="rollover">
        <div class="rollover_text">
            <h2>ROLLOVER 1 TITLE</h2>
            <p>This is rollover 1.</p>
        </div>
    </div>
</div>
<div class="work_square">
    <img class="rollover" src="images/exhibiton_image.jpg" width="100%"/>
    <div class="rollover">
        <div class="rollover_text">
            <h2>ROLLOVER 2 TITLE</h2>
            <p>This is rollover 2.</p>
        </div>
    </div>
</div>

Now, if you want to use pure JavaScript, without inline code, you can easily use the rollover class to select all the elements and bind the mouseover and mouseout events to your functions. Here is the correct code:

function rolloverIn(e){
    this.style.opacity = 1;
    this.style.transform = "scale(1)";
}

function rolloverOut(e){
    this.style.opacity = 0;
    this.style.transform = "scale(0)";
}

var elements = document.getElementsByClassName('rollover');
for (var i=0; i < elements.length; i++) {
    elements[i].addEventListener('mouseover', rolloverIn);
    elements[i].addEventListener('mouseout', rolloverOut);
}

Answer 2

^{Sorry to ruin your dream of using JS but}
this is all doable in pure CSS :

 .work_square{ position:relative; } .work_square > img{ width:100%; } .work_square .rollovers{ position:absolute; top:0; opacity:0; transform: scale(0); transition: 0.6s; } .work_square:hover .rollovers{ transform: scale(1); opacity:1; } 

  <div class="work_square"> <img src="//placehold.it/800x300/cf5" /> <div class="rollovers"> <div class="rollover_text"> <h2>ROLLOVER 1 TITLE</h2> <p>This is rollover 1.</p> </div> </div> </div> <div class="work_square"> <img src="//placehold.it/800x300/f5f" /> <div class="rollovers"> <div class="rollover_text"> <h2>ROLLOVER 2 TITLE</h2> <p>This is rollover 2.</p> </div> </div> </div> 

Note that I've removed all unnecessary ID (hey, you cannot use duplicate ID's in a valid HTML document).
Use your container class .work_square and use the CSS :hover on it to add that listener, than simply add the desired class of the children element to target:

.work_square:hover .rollovers{