...

View Full Version : Show/Hide Button - Image?



woNk1L
05-17-2012, 10:14 AM
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 :thumbsup:

woNk1L
05-17-2012, 03:23 PM
<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>"

woNk1L
05-18-2012, 09:46 AM
I've used the code as follows:


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

woNk1L
05-22-2012, 10:24 AM
<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum