HOVER ON GETELEMENTBYID USING JAVASCRIPT

Tanuj Kumar

Total Post:134

Points:940
Posted by  Tanuj Kumar
 1736  View(s)
Ratings:
Rate this:
Hi!

I hope someone can answer my question, it is probably easy for you but I am not very used to JavaScript.

So I made a menu using this code:

function tabSwitch(new_tab, new_content) {

    document.getElementById('content_1').style.display = 'none'; 

    document.getElementById('content_2').style.display = 'none'; 

    document.getElementById('content_3').style.display = 'none';         

    document.getElementById(new_content).style.display = 'block';    

    document.getElementById('tab_1').className = ''; 

    document.getElementById('tab_2').className = ''; 

    document.getElementById('tab_3').className = '';         

    document.getElementById(new_tab).className = 'active';     

}

When clicking on the area of tab_1 the content_1 is displayed and so on. But I would like to get the content displayed when the mouse hovers over the area of the different tabs. Could you please help me, I looked up the web but I could not find anything, maybe because I have actually no idea of JavaScript.

So, thanks for your time and help.

  1. shreesh chandra shukla

    Post:105

    Points:735
    Re: Hover on getElementById using javascript

    Hi!

    You could go for the onmouseover event, as it is supported for a and li tags as well, and additionally check out the onmouseout (very similar) to be aware of both.

    With this, the li tags for the menu elements would look like:

    <li onmouseover="tabSwitch('tab_1', 'content_1');"><a href="#" id="tab_1" class="active"><img src="img/flash.png" /></a></li>

    <li onmouseover="tabSwitch('tab_2', 'content_2');"><a href="#" id="tab_2"><img src="img/brush.png" /></a></li>

    Onmouseover will fire, when you hover over the element. I think you get the idea from here.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!