SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add'l Button Code woes

    On another thread I recieved a code for buttons to replace a checkbox
    and it works great!

    Then I modified it to change the background of a cell, and had some fun with cross-browser issues, but worked around those. and it works great!

    Now I have added onmouseover and onmouseout...

    Mouseover/out works when initialized...., but after an item was selected mouse out change the cell back again.

    Therefore I added code to keep the selected item from switching back, so far so good, but the mouse over for a "re-unselected" item was disabled.... so I added more code. Unfortunately, this does not work, and this is what I need help with

    here is the code:
    Code:
    <html>
    <head>
    <title>!! TEST !!</title>
    
    <style type="text/css">
    
    form#myForm img {
        cursor: pointer;
        }
    
    </style>
    
    <script type="text/javascript">
    
    function Button( imgId, checkedSrc, elemId, checkedVal, uncheckedVal )
    {
        this.img         = document.getElementById(imgId);
        this.img.onclick = buttonClick;
     //   this.uSrc        = this.img.src;
    	this.ubk		=this.img.style.backgroundImage ;
     //   this.cSrc        = checkedSrc;
    	this.cbk		=checkedSrc;
        this.elem        = document.forms['myForm'].elements[elemId];
        this.cVal        = checkedVal;
        this.uVal        = uncheckedVal;
        this.checked     = false;
    }
    
    Button.prototype.click = function()
    {
        if ( this.checked )
        {
     //       this.img.src    = this.uSrc;
    		this.img.style.backgroundImage  = this.ubk;
    			this.img.onmouseover="this.style.backgroundImage='url(Assets/yel1.jpg)'";
    			this.img.onmouseout="this.style.backgroundImage='url("+this.ubk+")'";		
            this.elem.value = this.uVal;
            this.checked    = false;
        }
        else
        {
    //        this.img.src    = this.cSrc;
    		this.img.style.backgroundImage  = "url("+this.cbk+")";
    			this.img.onmouseover="this.style.backgroundImage='url("+this.cbk+")'";
    			this.img.onmouseout="this.style.backgroundImage='url("+this.cbk+")'";		
            this.elem.value = this.cVal;
            this.checked    = true;
        }
    }
    
    function initButtons()
    {
        window.imgs =
        {
            AA: new Button( 'AA', 'Assets/red1i.jpg', 'AB', 3,""  ),
            BA: new Button( 'BA', 'Assets/red1i.jpg', 'BB', 4,""  ),
            CA: new Button( 'CA', 'Assets/red1i.jpg', 'CB', 5,""  )
        };
    }
    
    function buttonClick()
    {
        window.imgs[this.id].click();
    }
    
    
    </script>
    
    </head>
    
    <body onload="initButtons()">
    
    <form id="myForm">
    <table>
    	<tr>
    		<td>
    			<table id="AA" onmouseover="this.style.background='url(Assets/yel1.jpg)'" onmouseout="this.style.background='url(Assets/blu1.jpg)'" height="40" width="286" valign="middle" align="center" background="Assets/blu1.jpg" >
    				<tr>
    					<td> 
    						<input id="AB" type="text" value="" name="gid[]">34</input>
    					</td>
    				</tr>
    			</table>
    		</td>
    		<td>
    			<table id="BA" height="40" width="286" valign="middle" align="center" background="Assets/blu1.jpg" >
    				<tr>
    					<td> 
    						<input id="BB" type="text" value="" name="gid[]">hi</input>
    					</td>
    				</tr>
    			</table>
    		</td>
    		<td>
    			<table id="CA" height="40" width="286" valign="middle" align="center" background="Assets/blu1.jpg" >
    				<tr>
    					<td> 
    						<input id="CB" type="text" value="" name="gid[]">ggg</input>
    					</td>
    				</tr>
    			</table>
    		</td>
    </tr></table>
    </form>
    
    </body>
    </html>
    Any ideas?

    -berzerko

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should do it
    Code:
    function Button( objId, elemId, checkedBg, overBg, checkedVal, uncheckedVal )
    {
    	this.obj		 = document.getElementById( objId );
    	this.uBg		 = this.obj.style.backgroundImage ;
    	this.cBg		 = checkedBg;
    	this.oBg		 = overBg;
    	this.elem		= document.forms['myForm'].elements[elemId];
    	this.cVal		= checkedVal;
    	this.uVal		= uncheckedVal;
    	this.checked	 = false;
    	var bObj = this;
    	this.obj.onmouseover = overHandler;
    	this.obj.onmouseout  = outHandler;
    	this.obj.onclick	 = clickHandler;
    	function clickHandler()
    	{
    		window.buttons[this.id].click();
    	}
    	function overHandler()
    	{
    		bObj.obj.style.backgroundImage = "url(" + bObj.oBg + ")";
    	}
    	function outHandler()
    	{
    		var bgURI = ( bObj.checked ) ? bObj.cBg : bObj.uBg;
    		bObj.obj.style.backgroundImage = "url(" + bgURI + ")";
    	}
    }
    Button.prototype.click = function()
    {
    	if ( this.checked )
    	{
    		this.obj.style.backgroundImage  = this.uBg;
    		this.elem.value = this.uVal;
    		this.checked	= false;
    	}
    	else
    	{
    		this.obj.style.backgroundImage  = "url("+this.cBg+" )";
    		this.elem.value = this.cVal;
    		this.checked	= true;
    	}
    }
    function initButtons()
    {
    	window.buttons =
    	{
    		AA: new Button( 'AA', 'AB', 'Assets/red1i.jpg', 'Assets/yel1i.jpg', 3, "" ),
    		BA: new Button( 'BA', 'BB', 'Assets/red1i.jpg', 'Assets/yel1i.jpg', 4, "" ),
    		CA: new Button( 'CA', 'CB', 'Assets/red1i.jpg', 'Assets/yel1i.jpg', 5, "" )
    	};
    }
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works perfect in "netscape" type browsers

    In microsoft, the blue1.jpg (unchecked) diapears on mouseout,
    the checked works perfectly.

    -berzerko

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you link me to your page? Please tell me you have it uploaded someplace....
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    Can you link me to your page? Please tell me you have it uploaded someplace....
    Uhhh.... not yet. so, how do you go about selecting a host?

    Anyway, that is next on my agenda.
    I have tried to replace the uBg by adding an uncheckedBg, I broke the out handler into an if/else statement. The good news is I can't seem to break your script. The bad news is that whatever I try, I get the same results.

    -berzerko

    If you want, I can email you everything that relates to the page as I have it

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, that's because you aren't defining the background image with a style!

    <table id="BA" height="40" width="286" valign="middle" align="center" background="Assets/blu1.jpg" >

    should be

    <table id="BA" height="40" width="286" valign="middle" align="center" style="background-image: url(Assets/blu1.jpg)" >

    Alternatively, in IE, you'd have to read from the currentStyle object here

    this:
    this.uBg = this.obj.style.backgroundImage ;

    to this:
    this.uBg = ( this.obj.currentStyle ) ? this.obj.currentStyle.backgroundImage : this.obj.style.backgroundImage ;

    But I'm not 100% positive that will work.
    Last edited by beetle; Feb 28, 2003 at 16:45.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    Oh, that's because you aren't defining the background image with a style!

    <table id="BA" height="40" width="286" valign="middle" align="center" background="Assets/blu1.jpg" >

    should be

    <table id="BA" height="40" width="286" valign="middle" align="center" style="background-image: url(Assets/blu1.jpg)" >

    Alternatively, in IE, you'd have to read from the currentStyle object here

    this:
    this.uBg = this.obj.style.backgroundImage ;

    to this:
    this.uBg = ( this.obj.currentStyle ) ? this.obj.currentStyle.backgroundImage : this.obj.style.backgroundImage ;

    But I'm not 100% positive that will work.
    I tried the style one earlier and it doesn't make a difference
    I just tried the uBg one and that didn't change anything. I now have both changes in the script, but it is still the same.

    Also I have tried these:
    Code:
    this.obj.style.backgroundImage  = "url("+this.uBg+" )";
              and
    this.obj.style.backgroundImage  = this.uBg;
    no difference there either

    -berzerko

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you try the currentStyle modification?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    Did you try the currentStyle modification?
    Yes, it worked the same as before.

    Then I tried :
    Code:
    this.uBg	= this.obj.currentStyle.backgroundImage;
    by itself. got the same thing in microsoft and the netscape was frozen.

    -berzerko

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    zip up your stuff and send it to:

    me[at]peterbailey[dot]net
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    zip up your stuff and send it to:

    me[at]peterbailey[dot]net
    will do.

    by the way, have you tried freddy chat yet? its a pretty cool simple chat room, when you want to have a more real time discussion. It is mostly empty. here's the link, if your interested

    http://www.irq11.com/~louie/freddyChat/freddyChat.html

    -berzerko

  12. #12
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In case the email comes through funny, change the outHandler to this
    Code:
    		function outHandler()
    		{
    				var bgURI = ( bObj.checked ) ? "url(" + bObj.cBg + " )" : bObj.uBg ;
    				bObj.obj.style.backgroundImage = bgURI;
    		}
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  13. #13
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great in MSIE

    Now it's doing it in Netscape , for real!

    This cross browser stuff blows my mind. Is this where you do one of those check browser things with an if/else statement?

    -berzerko

  14. #14
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's odd, I tested it in Mozilla. What version of Netscape?

    Tell ya what, go back to the older version of overHandler() and instead change this in the Button() constructor

    This:
    this.uBg = this.obj.style.backgroundImage;

    To this:
    this.uBg = this.obj.style.backgroundImage.replace( "url(", "" ).replace( ")", "" );
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  15. #15
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it!!!!

    Use your new out handeler code plus change the background in the tag to:
    Code:
    <table id="BA" height="40" width="286" valign="middle" align="center" background="Assets/blu1.jpg"  >
    pretty strange isn't it?

    beetle, thanks again

    -berzerko

  16. #16
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    That's odd, I tested it in Mozilla. What version of Netscape?

    Tell ya what, go back to the older version of overHandler() and instead change this in the Button() constructor

    This:
    this.uBg = this.obj.style.backgroundImage;

    To this:
    this.uBg = this.obj.style.backgroundImage.replace( "url(", "" ).replace( ")", "" );
    This works great! But the background in the tag code must be as follows:
    Code:
    <table id="AA" height="40" width="286" valign="middle" align="center" style="background-image: url(Assets/blu1.jpg)"  >
    How do you keep all this straight? Which one is the better solution? Use the "style=" or the "background=" ?

    -berzerko


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
  •