SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    On MouseOver CSS?

    I want to change the css class of an element (in this case a <td>) on a mouse over event.

    Is it possible to do this dynamic effect using javascript in a similar way the the src attribute of an image is redefined on a mouseover command?

    Or is there an easier way to do this?
    Thanx


  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow...good question. I'd like to hear the answer to this one....

    Sketch
    Aaron Brazell
    Technosailor



  3. #3
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may want to check with the gurus in the scripting forum, but the following works for me.

    I think the getObject function would need to be adapted for N4, although I don't think N4 supports the onmouseover event for a table cell.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Change style class</title>
    	<style type="text/css">
    		.td1 {background-color:#3399ff}
    		.td2 {background-color:#ffcc00}
    	</style>
    </head>
    
    <body>
    <script type="text/javascript">
    function changeStyleClass(id, className) {
    				
    	var objElement = getObject(id);
    	
    	if (objElement == null)
    		return;
    
    	objElement.className = className;
    }
    
    function getObject(id){
    	var obj = null;
    	if (document.getElementById) obj = document.getElementById(id);
    	else if (document.all) obj = document.all[id];
    	return obj;
    }
    
    </script>
    
    <table>
    <tr>
    	<td width="200" id="tblcell" class="td1" onmouseover="changeStyleClass('tblcell', 'td2')" onmouseout="changeStyleClass('tblcell', 'td1')">&nbsp;</td>
    </tr>
    </table>
    
    
    
    </body>
    </html>

  4. #4
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks Shane that is spot on.

    Except that of course being stupid, I forgot to realise that as I have defined my a: family in css, the change to a <td> will not include any links in the cell.

    A bit of juggling around and I am sure I will have it sorted. thanks again

  5. #5
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mmmmm, I am trying to modify the code so that if I rollover one cell, it will change the class of 3 other cells.

    The code above works fine as is for my original question but I cant seem to jiggle it around to make it work for this. I have a fair knowledge of js, but only enough to modify scripts to work for what I want. in this case though I am getting knowwhere fast!

    Can anyone help (again!)

  6. #6
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give us some idea of the table/row/cell structure that you're using glen?

    If it's a single row then it's easily done by using the onmouseover/out event for the table row instead of the cell otherwise things will be a bit trickier.

  7. #7
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, it isnt a single row table, I will post code or a link tomorrow when I am at work and have access to the file!

  8. #8
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    <td class="yourclass" onMouseOver="this.className='yourotherclass';" onMouseOut="this.className='yourclass';"></td>

    Works in IE & NN6, but not in NN4 or Opera
    Last edited by isotope235; Nov 4, 2001 at 19:35.

  9. #9
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by glenplake
    Thanks, it isnt a single row table, I will post code or a link tomorrow when I am at work and have access to the file!

    Well instead of posting the ream of code, ill just explain it.

    Its basically a table with 2 rows and 2 columns and the other 3 cells in the table should change CSS class when the remaining cell is rolled over.

    Originally posted by isotope235
    Try this:

    <td class="yourclass" onMouseOver="this.className='yourotherclass';" onMouseOut="this.className='yourclass';"></td>

    Works in IE & NN6, but not in NN4 or Opera
    Thanks, very useful

  10. #10
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi glen,

    I think the code below may help. It's a bit dirty as the 3 id's of the cells to change are hard-coded in the tableStyleChange function. I think there's a cleaner way of doing this stuff by getting the child elements of the table in question. You can then check the id's/classes of the <td> elements and apply any js accordingly.

    Hope this helps.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Change style class</title>
    	<style type="text/css">
    		.cellon {background-color:#ccccff}
    		.celloff {background-color:#9999cc;cursor:hand}
    	</style>
    </head>
    
    <body>
    <script type="text/javascript">
    
    function tableStyleChange(mode) {
    	
    	//Determine which style to apply
    	if (mode == 'on')
    		styleClass = 'cellon';
    	else
    		styleClass = 'celloff';
    		
    	//Change the styles for 3 cells
    	changeStyleClass('cell2', styleClass);
    	changeStyleClass('cell3', styleClass);
    	changeStyleClass('cell4', styleClass);
    }
    
    
    function changeStyleClass(id, className) {
    				
    	var objElement = getObject(id);
    	
    	if (objElement == null)
    		return;
    
    	objElement.className = className;
    }
    
    function getObject(id){
    	var obj = null;
    	if (document.getElementById) obj = document.getElementById(id);
    	else if (document.all) obj = document.all[id];
    	return obj;
    }
    
    </script>
    
    <table>
    <tr>
    	<td id="cell1" class="celloff" onmouseover="tableStyleChange('on')" onmouseout="tableStyleChange('off')" width="200">&nbsp;</td>
    	<td id="cell2" class="celloff" width="200">&nbsp;</td>
    </tr>
    <tr>
    	<td id="cell3" class="celloff" width="200">&nbsp;</td>
    	<td id="cell4" class="celloff" width="200">&nbsp;</td>
    </tr>
    </table>
    
    
    
    </body>
    </html>

  11. #11
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Shane , To be honest I thought that it would take reams of code to get that to work!

    What would be nice is to have each of the other 3 cells behave in the same way rather than just one cell having the mouseover function. But I suppose as the cell IDs are hardcoded in the function this wouldnt be possible (or easy anyway)??? Or am I wrong? (not too hot on js, youll have to excuse my ponderings)


    Edit:


    OK, the only way I could get this to do it above was to copy and paste the tableStyleChange function 3 times and modify the names to tableStyleChange2, tableStyleChange3 etc and change the cell IDs in each one accordingly as well as adding the js calls to each <td> in the body, very bad practice I know but it does work although I would love to be able to do this another way

  12. #12
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try thise modified version glen. It passes the new function a string of comma separated id's. The function then splits the id's into an array and loops around the array. This avoids hard-coding the id's in the function so it could be used for multiple cells.

    I've also passed in the styleclass to be used to make it a bit more re-usable.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Multi object style class change</title>
    	<style type="text/css">
    		.cellon {background-color:#ccccff}
    		.celloff {background-color:#9999cc;cursor:hand}
    		.cellon2 {background-color:#ffcc00}
    	</style>
    </head>
    
    <body>
    <script type="text/javascript">
    
    function multiStyleChange(idString, styleClass) {
    	
    	var idCnt;
    	var idArray;
    	var i;
    	
    	//Split the id string into array of id's
    	idArray = idString.split(',');
    	
    	//Get the number of id's
    	idCnt = idArray.length;
    	
    	for (i = 0; i < idCnt; i++)
    		changeStyleClass(idArray[i], styleClass);
    	
    }
    
    
    function changeStyleClass(id, className) {
    				
    	var objElement = getObject(id);
    	
    	if (objElement == null)
    		return;
    
    	objElement.className = className;
    }
    
    function getObject(id){
    	var obj = null;
    	if (document.getElementById) obj = document.getElementById(id);
    	else if (document.all) obj = document.all[id];
    	return obj;
    }
    
    </script>
    
    <table>
    <tr>
    	<td id="cell1" class="celloff" onmouseover="multiStyleChange('cell2,cell3,cell4', 'cellon')" onmouseout="multiStyleChange('cell2,cell3,cell4', 'celloff')" width="200">&nbsp;</td>
    	<td id="cell2" class="celloff" onmouseover="multiStyleChange('cell1,cell3,cell4', 'cellon2')" onmouseout="multiStyleChange('cell1,cell3,cell4', 'celloff')" width="200">&nbsp;</td>
    </tr>
    <tr>
    	<td id="cell3" class="celloff" width="200">&nbsp;</td>
    	<td id="cell4" class="celloff" width="200">&nbsp;</td>
    </tr>
    </table>
    
    <div id="debug"></div>
    
    
    </body>
    </html>
    Last edited by shane; Nov 12, 2001 at 08:50.

  13. #13
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Shane, that is perfect

    Works like a dream and its gonna be so useful for other applications too


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •