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.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener — Roko C. Buljan, Oct 18 '14 at 11:39
You can user jquery for removing inline function call $('#rollover_1').mouseover(function() { //do something here on mouse hover }); $('#rollover_1').mouseout(function() { //do something here on mouse out. }); — Mehul Dudhat, Oct 18 '14 at 11:48
Delete your question and start reading: http://stackoverflow.com/questions/2628672/what-should-every-javascript-programmer-know/2629004#2629004, http://tutorialzine.com/2014/04/10-mistakes-javascript-beginners-make/, http://www.microsoftvirtualacademy.com/training-courses/javascript-fundamentals-for-absolute-beginners etc. — KooiInc, Oct 18 '14 at 11:49
Do you not like CSS, for some reason? JavaScript seems entirely unnecessary here. — David Thomas, Oct 18 '14 at 11:58

score 0 · Answer 1 · answered Oct 18 '14 at 11:47

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);
}

score 0 · Accepted Answer · edited Oct 18 '14 at 12:09

^{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{

I've added the '*valid*' qualifier to your statement. Obviously edit it out if you feel I've introduced an error, but duplicate `id`s *can* be used, even if they shouldn't be. — David Thomas, Oct 18 '14 at 12:10
Thanks a lot, cleaned it all up now and it works perfectly. You may have crushed my JS dream, but at least this is a step towards better practice :) — Daniel Mountford, Oct 18 '14 at 12:34

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

2 Answers2