Home > DeveloperSection > Forums > Hover on getElementById using javascript
Tanuj Kumar

Total Post:134

Points:940
Posted on    August-19-2013 12:56 AM

 JavaScript JavaScript 
Ratings:


 1 Reply(s)
 1302  View(s)
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.



shreesh chandra shukla
shreesh chandra shukla

Total Post:105

Points:735
Posted on    August-19-2013 8:29 AM

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.


Don't want to miss updates? Please click the below button!

Follow MindStick