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
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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

I Dont Know The Answer To YOur Problem

But I Prefer CSS a:hover Than JavaScript

 

its dealing with a table element not with text

 

Even Still Ive Done It With DIV And Ive Just Tested It With TD Tags And It Works So...... Why Not...?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.