Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    glz
    glz is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    57
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation 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:
    Code:
    <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:
    Code:
    <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
    Last edited by glz; 04-06-2007 at 06:35 AM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Your errors:
    1. You must quote the parameters, if they suppose to be strings:

    Code:
    onmouseover="showImg('id1', 'tabla_novedades2')
    2. You have not passed the third parameter:

    Code:
    onmouseover="showImg('id1', 'tabla_novedades2', 'myPic.gif')
    3. You have quoted the parameter inside the function
    4. You need to concatenate the third parameter

    Code:
    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.

    Code:
    function showImg(obj, myclass, imageurl){
    Note. You don't need the cells id. You may use the self reference this

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

  • #3
    glz
    glz is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    57
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks for the help KOR!

    however, i'm still having problems:

    my new function:
    Code:
    <script type="text/javascript">
    function showImg(obj, myclass, imageurl){
    	obj.innerHTML = '<img src="'+imageurl+'" align="left">';
    	obj.className = myclass;
    }
    </script>
    my css styles:
    Code:
    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:
    Code:
       <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?)

  • #4
    glz
    glz is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    57
    Thanks
    3
    Thanked 0 Times in 0 Posts
    i got a working script:

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


  •  

    Posting Permissions

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