change class of TD and show image function

Hello everyone! my first post here at this site!

I am trying to accomplish this with javascript function:
1. change class of a <td> html
2. inside the td, there is html, i want to display a small pic to the right of it

--these to things are "onmouseover" or "onmouseout"

here is my function that I made:
<script type="text/javascript">
function showImg(id, class, imageurl){
document.getElementById('id').innerHTML = '<img src="imageurl" align="left">';
changeClass(id, class);
}

function changeClass(id,class) {
document.getElementById(id).className = class;
}
</script>

here is how I execute this function in my body html inside of a TD tag:
<td id="id1" class='tabla_novedades1' onclick="document.location='urlforalinkhere'" onmouseover="showImg(id1, tabla_novedades2);" onmouseout="showImg(id1, tabla_novedades1);">Name</td>


quite simply it doesn't do what my objectives i listed above
so what code do I need to fix this?
OR what new code do i need to accomplish my objectives above?
I KNOW I MESSED UP IN MY SYNTAX SOMWHERE COULD U POINT OUT WHERE?

-thanks

Your errors:
1. You must quote the parameters, if they suppose to be strings:

onmouseover="showImg('id1', 'tabla_novedades2')

2. You have not passed the third parameter:

onmouseover="showImg('id1', 'tabla_novedades2', 'myPic.gif')

3. You have quoted the parameter inside the function
4. You need to concatenate the third parameter

document.getElementById(id).innerHTML = '<img src="'+imageurl+'" align="left">';

5. class is a reserved javascript word (at least for IE). You must try to avoid using reserved words when you name the variables, functions and, for safety, the parameters as well.

function showImg(obj, myclass, imageurl){

Note. You don't need the cells id. You may use the self reference this

onmouseover="showImg(this, 'tabla_novedades2', 'myPic.gif')
...
function showImg(obj, myclass, imageurl){
obj.innerHTML = '<img src="'+imageurl+'" align="left">';
obj.className = myclass;
}

thanks for the help KOR!

however, i'm still having problems:

my new function:
<script type="text/javascript">
function showImg(obj, myclass, imageurl){
obj.innerHTML = '<img src="'+imageurl+'" align="left">';
obj.className = myclass;
}
</script>

my css styles:
td.tabla_novedades1 {
cursor: hand;
color: #004993;
background-color: #82B3EE;
text-align: center;
border: 1px solid #004993;
text-decoration: none
}
td.tabla_novedades2 {
cursor: hand;
color: #FFFFFF ;
background-color: #82B3EE;
border: 1px solid #004993;
text-align: center;
text-decoration: none
}


how I execute this function:
<td height="9" valign="top" class='tabla_novedades1' onclick="document.location='/your/link/here.php'" onmouseover="onmouseover="showImg('this', 'tabla_novedades2', 'arrow.png');" onmouseout="showImg('this', 'tabla_novedades1', 'arrow.png');">
<span class="style12">Name</span></td>


it still doesn't do anything even with the new changes I made to the function and the execution code

if you're confused about what my objectives are in this code in the first place, read my first post
OR check out this test page link
http://p2mcity.freehostia.com/test.html

If you hover over "name" cell you see nothing happens, if you hover over "date" cell the style changes, i want that to happen in the name cell as well as a small IMAGE appear to the right of the text "name"

-thank you (perhaps you can find where my code goes wrong IN NOT DOING THIS, or show me a new code to do this?)

i got a working script:


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;
}



that does the job :), anyone wants to use this go ahead

TOPIC SOLVED-------------------------------------