Link to home
Create AccountLog in
Avatar of tenriquez39
tenriquez39Flag for Mexico

asked on

how can i do a html page that display or hide images depending on a click button

hi
i need to do a html page with functionality who display an image depending on a click over a button

i attach 2 images

first image it will be web page base with a house's map ...

the idea is..when user do a click on a first pagen numered as 1, the image with all house will  be hide, and the imaged showed in the sub web page  is shown

and then, when user do a click on image circulated on sub web page, is hidden image showed at sub web page, and now is shown image showed at web page base

can someone guide me?


thanks a lot
web-page-base.jpg
sub-web-page.jpg
Avatar of nanharbison
nanharbison
Flag of United States of America image

You can do this with jquery. Here is a page that shows how it's done:
http://www.aperfectmix.com/free_web_design/jquery_examples.html#show-hide

plus there are many other jquery examples on the page.
You can google jquery show/hide image too if you need a better explanation.
Avatar of skullnobrains
skullnobrains

<button onclick="if(document.getElementById('myimage').style.visibility='hidden')document.getElementById('myimage').style.visibility='visible';else document.getElementById('myimage').style.visibility='hidden'; " ></button>

<img id='myimage'>

you can stick the image and button wherever you want in the page as long as you use the same ids

----------

in jquery, you would use the following

<button onclick="$('#myimage').toggle();"></button>

you'll need to load jquery in the first place or it will not work. any version should do. you will be able to use effects such as slideUp or fadeOut
Avatar of tenriquez39

ASKER

hi skullnobrains

i did you said

i think ..missing me something

could you help me please

cause...i write code at my html and up image, but button dont do it nothing

thanks a lot
image-test.html
1.gif
you do not understand what i say

jquery working example
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<button onclick="$('#myimage').toggle();">toggle jquery</button>

<img id='myimage' src="YOUR SOURCE">

Open in new window


js working example

<button onclick="if(document.getElementById('myimage').style.visibility=='hidden')document.getElementById('myimage').style.visibility='visible';else document.getElementById('myimage').style.visibility='hidden'; " >TOGGLE JS</button>

<img id='myimage' src="YOUR SOURCE" height=50>

Open in new window

hi skullnobrains

thanks a lot

i made some actions on a html file i'm making.

i have some details, you may be make me crazy, but...my client want her page with ceratins characteristics.

wel...

i up advance athttp://terrazasixmiquilpan.com.mx/indexi-4.html


the function you help me now run fine, but i have some details:

fisrt : PlanoC1PA  image is show at load page , and i want this page it showed after user make a click on button 1

is it posible hide PlanoC1PA when page is loaded? and then show it when use do a click on numer 1 ?

Also, when user do a click on numer 1, i need to hide Fondo.jpg  showed at load page and enable other button to restart Fondo.jpg  and hide now image PlanoC1PA and show Button 1
indexi-4.html
style.css
Portada2n2.gif
Fondo.jpg
1f.gif
PlanoC1PA.gif
ASKER CERTIFIED SOLUTION
Avatar of skullnobrains
skullnobrains

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
thnaks skulnobraiks

i use your comments, i was usefull

this was final solution : thanks a lot

<html>
<head>
<title>Terrazas Ixmiquilpan</title>

<style type="text/css">
#Style {
position:absolute;
left:110;
top:350;
visibility:hidden;
border:none;
padding:5px;
}
#Style1 {
position:absolute;
left:110;
top:50;
visibility:hidden;
border:none;
padding:5px;
}
#Style2 {
position : absolute;
top:50;left:110;
visibility:hidden;
border:none;
padding:5px;
}
#Style3 {
position : absolute;
top:50;left:110;
visibility:hidden;
border:none;
padding:5px;
}
#Style4 {
position : absolute;
top:50;left:150;
visibility:visible;
border:none;
padding:5px;
}
#StyleA {
position:absolute;
top:720px;
left:75%;
border:none;
padding:5px;
color:#F93;
font-size:32px;
font-family:Arial, Helvetica, sans-serif;
}
#StyleB {
position:absolute;
top:760px;
left:75%;
border:none;
padding:5px;
color:#F93;
font-size:32px;
font-family:Arial, Helvetica, sans-serif
}
#StyleC {
position:absolute;
top:800px;
left:75%;
border:none;
padding:5px;
color:#F93;
font-size:32px;
font-family:Arial, Helvetica, sans-serif
}
#StyleD {
position:absolute;
top:840px;
left:75%;
border:none;
padding:5px;
color:#F93;
font-size:32px;
font-family:Arial, Helvetica, sans-serif
}
#Style5 {
position: relative
}
#Style6 {
position: relative
}
#Style7 {
      position:relative; left:10px; top:50px;
      width:300px;
}
</style>

<link rel = "stylesheet" type = "text/css" href = "test.css">

<script type = "text/javascript">
function test()
{
elem = document.getElementById('plano1');
elem1 = document.getElementById('story');
but = document.getElementById('next');
but1 = document.getElementById('1');


if ((elem.style.display) == 'block')
{
elem.style.display = 'none';
elem1.style.display = 'block';
but.style.display = 'none';
but1.style.display='block';

}
else
{
elem.style.display = 'block';
elem1.style.display = 'none';
but.style.display = 'block';
but1.style.display='none';
}
}



function init()
{
document.getElementById('plano1').style.display = 'none';
document.getElementById('story').style.display = 'block';
document.getElementById('next').style.display = 'none';
document.getElementById('1').style.display = 'block';
}
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>


</head>

<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "c139c2a2-7f70-45c3-863a-331fb8efaa99"});</script>


<body onload = "init()">

<table width="1270" height="1045" border="0" align="center" cellpadding="0" cellspacing="0" class="container">
  <tr >
      <span style="position:relative; left:1100px; top: 190px;"   class='st_facebook_large' displayText='Facebook'></span>
<span style="position:relative; left:1100px; top: 190px;"  class='st_twitter_large' displayText='Tweet'></span>
<span style="position:relative; left:1100px; top: 190px;" class='st_linkedin_large' displayText='LinkedIn'></span>
 
    <td align="left" valign="top" style="background-image:url(images/Portada2n2.gif)">
   

   
   
<div style="background-image:url(images/MiHogar/PlanoC1PA.gif); position:relative; top:130px; left:50px; width:1000px; height:750px;" id = "plano1" class = "image" >




  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div  style="background-image: url(images/MiHogar/PlanoGeneral.gif); position: relative; top: 130px; left: 100px; width: 1000px; height: 750px;" id = "story" class = "story">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div   id = "next" class = "next">
  <p>next
  <input  style="position:relative; top:-450px; left:200px;" type = "button" value = "Plano General" onClick = "test(); ">
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

<div   id = "1" class = "1">
  <p>next
  <input  style="position: relative; top: -450px; left: 800px; height:30; background-color:#2FBF0B" type = "button" value = "1" onClick = "test();" class="">
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</td>
</tr>
</table>


</body>
<html>