CODEWITHSUNDEEP
javascripthtmlcssvisibility
cpom1
cpom1

Reputation: 25

How do I make an image be invisible but show when I press the button specifying the image?

I am trying to make a JavaScript visibility function where when I press the button of the image it appears. the image does not appear though. I have the images hidden as I only want them to show when the button is pressed. what can I do to fix this?

<html>
<head>
<style type="text/css">
#xbone {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}
#ps4 {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}
#wiiu {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}
</style>
<script type="text/javascript">
function xbox()
    {
        document.getElementById("xbone").style.visibility="visible";
    }
    funtion sony()
     {
        document.getElementById("xps4").style.visibility="visible";
    }
    funtion nintentdo()
     {
        ddocument.getElementById("wiiu").style.visibility="visible";
    }
</script>
<img id="xbone" src="http://assets1.ignimgs.com/vid/thumbnails/user/2013/06/19/XboxOne1.jpg" alt="Xbox One" width="800" height="600">
<img id="ps4" src="http://gamingbolt.com/wp-content/uploads/2013/06/ps4-hd-wallpapers.jpg" alt="Playstation 4" width="800" height="600">
<img id="wiiu" src="http://www.digitaltrends.com/wp-content/uploads/2012/09/Wii-U.jpg" alt="Wii U" width="800" height="600">
<input type="button" value="XBox One" onclick="xbox()">
    <input type="button" value="Playstation 4" onclick="sony()">
        <input type="button" value="WII U" onclick="nintendo()">
</head>
<body>

</body>
</html>

Upvotes: 2

Views: 3809

Answers (4)

Durnehviir
Durnehviir

Reputation: 66

The first real answer:

<div style = "visibility:hidden" id = "xbone"><img src = "xbone.jpg" /></div>
<button type = "button" 
onclick = "document.getElementById("xbone").style.visibility =
"visible"">Display XBONE</button>

But make sure and fix the grammar errors too.

Upvotes: 3

Geblord
Geblord

Reputation: 63

Check this post - Show/hide image with JavaScript

Also your html structure is incorrect, it should be:

<html>
    <head>
        <style type="text/css">
        </style>
            <script type="text/javascript">
            </script>
    </head>
<body>

    <!-- all content goes here -->

</body>
</html>

Upvotes: 0

rla4
rla4

Reputation: 1246

You have a lot of typos.

funtion nintentdo() should be function nintendo()

ddocument.getElementById("wiiu") should be document.getElementById("wiiu")

You should also take your imgs and inputs out of the <head> and put them in your <body>.

Upvotes: 0

kali.python
kali.python

Reputation: 41

just an idea, ... use steganography methods such as RGB (lsb) and hide a picture inside another picture. whenever press button, steganography reverse works and appears the hidden picture. i used stepic in python and worked fine.no idea bout java. sorry if its not helping, am still new :)

Upvotes: 0

Related Questions