Jump to content

[SOLVED] on mouseover onmouseout on <TD> tags


dsaba

Recommended Posts

I need a simple javascript solution to do this:

 

I was using this code before:

   <td height="9" valign="top" class='tabla_novedades1' onclick="document.location='/your/link/here.php'" onmouseover="this.className = 'tabla_novedades2';" onmouseout="this.className = 'tabla_novedades1';">
<span class="style12">Name</span></td>

 

That successfully changed classes on "onmouseover" and "onmouseout"

 

additionally I want to keep that effect but also display a small image next to "name" onmouseover as well

 

here is a sample test page of what I mean:

http://tzfiles.com/testing/test.html

 

 

SO ALL TOGETHER:

---------------------------

inside of a <td> tag in html I want

ONMOUSEOVER - change a style and display a small image to the right of some text

OMOUSEOUT - change a style and display a different small image to teh right of some text

 

 

The link and script i gave u above do those things, but in separate codes, i basically want to combine them

 

SO HOW YOU CAN HELP ME:

--------------------------

1. either study those two script and tell me how to combine them

2. or show me some code of a new script that can do those things i listed above

 

 

-thanks for the help

Link to comment
https://forums.phpfreaks.com/topic/45823-solved-on-mouseover-onmouseout-on-tags/
Share on other sites

to get all the rows in a table with the id of #table

 

var rows = document.getElementById('table').document.getElementsByTagName('tr');

var count = rows.length;

 

for(var i = 0; i < count; i++){

rows.onmouseover = function(){

this.className = 'whatever';

}

rows.onmouseout = function(){

this.className = 'whatever_else';

}

}

 

that should work. i havent tested it though, but the logic makes sense to me :)

I got a working function for javascript thanks to  Alittlecaptin a member here on phpfreaks

 

THANKS EL CAPITAN!

 

anyone is free to use these functions:

 

function showImgNone(id, myclass, img){
 document.getElementById(img).innerHTML = '';    
     var NAME = document.getElementById(id);    
     NAME.className=myclass;
}

function showImg(id, myclass, imageurl, img){    
     document.getElementById(img).innerHTML = '<img src="' + imageurl + '" width="11" height="9" />';    
     var NAME = document.getElementById(id);    
     NAME.className=myclass;    
}

 

 

It changes the css style of a cell by ID, and changes the image in a cell by ID as well

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.