SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to do rollover buttons

    In my site, each page has 50 buttons with the same characteristics (same images for mouseover, mouseout and mousedown).

    I have this code that works, but has 1 JS line for each button (which make 50 lines for buttons that look exactly the same).

    So I tried to figure out how to make things more efficient. Can you tell me what`s wrong ? probably everything...


    So I have these in html :

    Code:
    <a class="button" onclick='play("filename");'>
    <img src="../../../../global/X.gif"/></a>
    Then I tryed to attach a mouseover event that calls the function 'over', to all 'a' tags of the class 'button' :

    Code:
    window.onload = function() 
    {
    var atags=document.getElementsByTagName('a');
    var atags_ln=atags.length;
    for(var i=0;i<atags_ln;i++)
    {
    if(atags[i].className.indexOf('button')!=-1)
        {
         atags[i].onmouseover=over;
        }
    }
    }
    
    function over()
        {
          this.src='../../../../global/Y.gif';
        }
    I think it`s the "this.src" thing that does`nt work but have no clue how to fix it. Also, it seemed more logical for me to attach the mouseover event to the IMG tags, but in the original code the inline mouseovers (,mouseouts etc.) where inside the a tag..
    Last edited by vertigooo; Mar 12, 2006 at 17:24.

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Read #6 and #7 here:

    http://www.sitepoint.com/forums/showthread.php?t=192988

    2)
    Code:
    for(var i=0;i<atags_ln;i++)
    {
    	if(atags.className.indexOf('button')!=-1)
    	{
    		atags[i].onmouseover=over;
    	}
    }


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
  •