4WebHelp
 FAQ  •  Search  •  User Groups  •  Forum Admins  •  Smilies List  •  Statistics  •  Rules   •  Login   •  Register
Toggle Navigation Menu

 Need help with Javascript mouseover
Post New TopicReply to Topic
View Previous Topic Print this topic View Next Topic
Author Message
zigma
Junior WebHelper
Junior WebHelper


Joined: 09 Sep 2003
Posts: 2

PostPosted: Tue Sep 09, 2003 1:43 am (14 years, 2 months ago) Reply with QuoteBack to Top

Need help with Javascript mouseover event here.

I just wondering if there is a cleaner way to write the following row highlight mouseover event

javascript code:
Code:

function highlight_on (thisobj,color)
{
   thisobj.style.backgroundColor=color;
}

function highlight_off (thisobj,color)
{
   thisobj.style.backgroundColor=color;
}


html file:
Code:

<table>
   <tr onmouseover="highlight_on(this,'#EEF1FB')" onmouseout="highlight_off(this,'')">
      <td>row 1</td>
   </tr>
   <tr onmouseover="highlight_on(this,'#EEF1FB')" onmouseout="highlight_off(this,'')">
      <td>row 2</td>
   </tr>
</table>


I really don't like to include all of those mouse event at each row. And if I decided to change the color of my whole site (Not just a page), there will be a lot of editing need to be done.

I know that I can write up a php function to generate the mouse event at one place, but still I have to include that php call at each row involve and end up generating the same code. I would consider this my very last option if possible.

So I just wondering if anyone know if there a way to write it so I don't have to include all of those mouse event and specify it outside the tr tag in one global place/function?


Here is what I come up with but still doesn't work perfectly, need help with Javascript guru here.

Include at javascript file above:
Code:

window.onload = function()
{
   /* this is main fucntion to call on page load */
   init_table_list ('listing');
                /* init with table id = lisitng */
}


function init_table_list (tableid)
{
   var tbid = document.getElementById(tableid);
   
   tbid.onmouseover = function() {
      highlight_on(this,'#EEF1FB')
    }
   
   tbid.onmouseout = function() {
      highlight_off(this,'')
    }
}


html file:
Code:

<table id="listing"> <!-- table id will be pass to init_table_list on load  -->
   <tr>
      <td>row 1</td>
   </tr>
   <tr>
      <td>row 2</td>
   </tr>
</table>


The problem with this is the whole table get highlighted. I'm having trouble to get to it's tr tag to trigger mouseover. This could be a simple problem if you really know javascript. I have to admit that I haven't write javascript that much to know how to fix this problem.

I also tried css hover. but it seems that css hover only work with a href= tag. So basiclly I tried to get the same result as I specify a:hover in one css file and include it at all page to have that mouseevent on every page and you only need to change it at one place if you need to.

So I try to do the same thing with this row highlight thing.
Any help is appreciated.

Thanks
OfflineView User's ProfileFind all posts by zigmaSend Personal Message
zigma
Junior WebHelper
Junior WebHelper


Joined: 09 Sep 2003
Posts: 2

PostPosted: Tue Sep 09, 2003 2:04 am (14 years, 2 months ago) Reply with QuoteBack to Top

Additional comment:

The javascript above will work if I do the following:
Code:

<table>
   <tr id="listing"> 
      <td>row 1</td>
   </tr>
   <tr>
      <td>row 2</td>
   </tr>
</table>


But that is not what I want. It only highlight 1 row and specify a unique id for each row
is not a good idea.

I kind a want to specify an id at the parent and the mouseover will work on all of its tr children.
OfflineView User's ProfileFind all posts by zigmaSend Personal Message
adam
Forum Moderator & Developer



Joined: 26 Jul 2002
Posts: 704
Location: UK

PostPosted: Wed Sep 10, 2003 4:51 pm (14 years, 2 months ago) Reply with QuoteBack to Top

I don't know much about JavaScript, but if you put the colour into a variable then you'll be able to change it easier:
Code:
var colour="#EEF1FB";

________________________________
It's turtles all the way down...
OfflineView User's ProfileFind all posts by adamSend Personal MessageVisit Poster's Website
Display posts from previous:      
Post New TopicReply to Topic
View Previous Topic Print this topic View Next Topic


 Jump to:   




You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot edit your posts in this forum.
You cannot delete your posts in this forum.
You cannot vote in polls in this forum.


Page generation time: 0.083611 seconds :: 17 queries executed :: All Times are GMT
Powered by phpBB 2.0 © 2001, 2002 phpBB Group :: Based on an FI Theme