What's new

Help Hiding An Image

  • Thread starter Nothinbeter2do
  • Start date
  • Views 340
Nothinbeter2do

Nothinbeter2do

Banned
Messages
2,399
Reaction score
536
Points
325
Sin$
7
Hello,

can anybody help me with hiding an image?

The current code I'm using is:
Code:
            <div id="gamertag">
<center>
<embed src="[URL]http://card.mygamercard.net/nothinbeter2do.swf[/URL]" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" width="179" height="121"></embed>
<img src="[URL]http://avatar.xboxlive.com/avatar/nothinbeter2do/avatar-body.png[/URL]">


[<a style="cursor:pointer;" onclick="document.getElementById('gamertag').style.display = 'none')">Hide</a>]
</center>
</div>
But when I click the Hide link, it does nothing. This is the code I'm using to hide/show the image:
Code:
[<a style="cursor:pointer;" onclick="document.getElementById('gamertag').style.display = 'none')">Hide</a>]
 
Abolfazl

Abolfazl

Contributor
Messages
2,774
Reaction score
254
Points
285
Sin$
0
Try this

Some keywords to help you out are (toggle, content, javascript, script, code)
 
F

FRABAR

Getting There
Messages
1,110
Reaction score
310
Points
190
Sin$
0
It's because you have no css to change, and also nobody uses <center> tags anymore. I rewrote it and also made it reusable so you can call the hideShow() function as many times as you want.
Copy and paste this and it'll have a Show/Hide button at the bottom like this in case you didn't mean to hide it. If you don't want it be re-shown, just extend the gamertag div around the <a> tag.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>showhide</title>

<script type="text/javascript">
function hideShow(hideShowDiv) {
var theElementStyle = document.getElementById(hideShowDiv);
if(theElementStyle.style.display == "none") {
theElementStyle.style.display = "block";
} else {
theElementStyle.style.display = "none";
}
}
</script>

<style type="text/css">
div.center {
text-align: center;
}

#gamertag {
display: block; /* Default display option */
}
</style>

</head>
<body>
<div class="center">
<div id="gamertag">
<embed src="http://card.mygamercard.net/nothinbeter2do.swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" width="179" height="121"></embed>
<img src="http://avatar.xboxlive.com/avatar/nothinbeter2do/avatar-body.png" alt="avatar" />

</div>
<a href="#" style="cursor:pointer;" onclick="hideShow('gamertag'); return false;">Hide/Show</a>
</div>

</body>
</html>
 

Similar threads

Top Bottom
Login
Register