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
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Show/Hide Button - Image?

    VISIBLE TEXT HERE

    <div style="display: none;" id="group1">

    HIDDEN TEXT HERE

    <button title="Click to show/hide content" onclick="if (document.getElementById('group1') .style.display=='none') {document.getElementById('group1') .style.display=''}else {document.getElementById ('group1') .style.display='none'}" type="button"> Group 1 Results </button>


    This is the code that i use on my website for Show/Hide buttons, i'm wondering if i can change the button for an image, rather than having the simple button?

    Please help

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <IMG style="WIDTH: 409px; HEIGHT: 53px" id=hrImage alt="Click to view Roster" src="http://i236.photobucket.com/albums/ff121/woNk1L/halo-reach-game-news-banner.jpg">

    <DIV id=hrRoster> This content should be hidden from start, and click image to show </DIV>

    <SCRIPT type=text/javascript>
    document.getElementById('hrImage').onclick=showHideDiv;
    function showHideDiv(){
    var hrRosterObj = document.getElementById('hrRoster');
    hrRosterObj.style.display=(getRenderedStyle(hrRosterObj,'display') == 'none')? 'block' : 'none';
    }
    function getRenderedStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
    strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
    strCssRule = strCssRule.replace(/-(w)/g, function (strMatch, p1){
    return p1.toUpperCase();
    });
    strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
    }
    </SCRIPT>
    If i use the code like this, it works... thank you!

    But how do i get it so that the content is hidden to begin with, and click to show rather than hide?

    "<DIV id=hrRoster> This content should be hidden from start, and click image to show </DIV>"

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've used the code as follows:

    Code:
     <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #group1{
                    display: none;
                }
            </style>
        </head>
        <body>
            
            <div id="group1">
                Some text goes here
            </div>
            <div>
                <img id="btn1" src="http://i236.photobucket.com/albums/ff121/woNk1L/halo-reach-game-news-banner.jpg" alt="" />
            </div>
    
            <script type="text/javascript">
                document.getElementById('btn1').onclick=showHideDiv;
                function showHideDiv(){
                    var group1Obj = document.getElementById('group1');
                    group1Obj.style.display=(getRenderedStyle(group1Obj,'display') == 'none')? 'block' : 'none';
                }
                function getRenderedStyle(oElm, strCssRule){
                    var strValue = "";
                    if(document.defaultView && document.defaultView.getComputedStyle){
                        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
                    }
                    else if(oElm.currentStyle){
                        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
                            return p1.toUpperCase();
                        });
                        strValue = oElm.currentStyle[strCssRule];
                    }
                    return strValue;
                }
            </script>
    please check on site:
    http://emulousgaming.com/hrresults


    the halo reach banner is what i want to use as the show/hide, and underneath i'd like it to say

    > Roster < > Results < > Join Team <

    Sorry i'm not good at HTML / Coding >.<

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #mw3{
                    display: none;
                }
            </style>
        </head>
        <body>
            <div><center>
                <img id="imw3" src="http://i236.photobucket.com/albums/ff121/woNk1L/ModernWarfare3.jpg" title="" alt="" style="border: none; " />
            </center></div>
    
            <script type="text/javascript">
                document.getElementById('imw3').onclick=showHideDiv;
                function showHideDiv(){
                    var mw3Obj = document.getElementById('mw3');
                    mw3Obj.style.display=(getRenderedStyle(mw3Obj,'display') == 'none')? 'block' : 'none';
                }
                function getRenderedStyle(oElm, strCssRule){
                    var strValue = "";
                    if(document.defaultView && document.defaultView.getComputedStyle){
                        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
                    }
                    else if(oElm.currentStyle){
                        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
                            return p1.toUpperCase();
                        });
                        strValue = oElm.currentStyle[strCssRule];
                    }
                    return strValue;
                }
            </script>
                     <div id="mw3">
    				<align="left">
    
    <TABLE ALIGN=Left WIDTH="" cellpadding="" cellspacing="" BORDER=>
    	<TR>
    		<TD> <IMG SRC="http://i236.photobucket.com/albums/ff121/woNk1L/blank-profile-pic.jpg" WIDTH="150" HEIGHT="112" ALT="Photo goes here"> </TD>
    		<TD><b><a href="http://emulousgaming.com/profile/339654">emulous Doodlee</a> </b><br>
    		Real Name: 	Mike Dudley<br>
    		Occupation:	Student<br>
    		Location:  	Manchester<br>
    		Age:       	17<br>
    		Role:      	Assault<br></TD>
    		<TD></TD>
    		
    	</TR>
    	
    	<TR>
    		<TD> <IMG SRC="http://i236.photobucket.com/albums/ff121/woNk1L/blank-profile-pic.jpg" WIDTH="150" HEIGHT="112" ALT="Photo goes here"> </TD>
    		<TD><b><a href="http://emulousgaming.com/profile/2236377">emulous marvaL</a> 
    </b><br>
    		Real Name: 	Unknown<br>
    		Occupation:	Unknown<br>
    		Location: 	UnknownK<br>
    		Age:       	??<br>
    		Role:     	Unknown<br></TD>
    		<TD></TD>
    		
    	</TR>	 
    		
    	<TR>
    		<TD> <IMG SRC="http://i236.photobucket.com/albums/ff121/woNk1L/blank-profile-pic.jpg" WIDTH="150" HEIGHT="112" ALT="Photo goes here"> </TD>
    		<TD><b><a href="http://emulousgaming.com/profile/2269770">emulous winn1E</a></b><br>
    		Real Name: 	 Unknown<br>
    		Occupation:	 Unknown<br>
    		Location: 	 Unknown<br>
    		Age:      	 ??<br>
    		Role:     	 Unknown<br></TD>
    		<TD></TD>
    		
    	</TR>
    
    
    	<TR>
    		<TD> <IMG SRC="http://i236.photobucket.com/albums/ff121/woNk1L/blank-profile-pic.jpg" WIDTH="150" HEIGHT="112" ALT="Photo goes here"> </TD>
    		<TD><b><a href="http://emulousgaming.com/profile/2393756">emulous probeaN</a> </b><br>
    		Real Name:	 Unknown<br>
    		Occupation:	 Student<br>
    		Location: 	 Unknown<br>
    		Age:      	 ??<br>
    		Role:     	 Unknown<br></TD>
    		<TD></TD>
    		
    	</TR>
    </TABLE>
    				</align>
                     </div>
        </body>
    Here's what i have so far, to see an example please see:
    emulousGaming.com/360Games *EDIT* emulousGaming.com/mw3360

    How would i make a space between the image and the text on the right of it? (so between the two table columns).

    Thanks
    Last edited by woNk1L; 05-22-2012 at 04:12 PM.


  •  

    Posting Permissions

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