<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#060606; background:url(images/background.png) repeat-y left top;
}

ul, ul li { margin:0; padding:0; list-style:none; }
ol, ol li { margin:0; padding:0; list-style:none; }
div { margin:0; padding:0; }
.clear { clear:both; }

.wrapper { width:100%; height:1000px; border:1px solid #FF0000;  }
.header_wrapper { background:url(images/banner_bg.png) no-repeat left top; height:115px; width:100%; border-bottom:2px solid #FCE66F; } 
.header_wrapper .header { width:906px; height:115px; margin:0 auto; outline:1px solid #0000FF;  }
.header_wrapper .header .logo { float:left; left:0; top:0; width:136px; }
.header_wrapper .header .title { float:left; margin-left:10px; padding-top:42px; width:491px; }
.header_wrapper .header .right { width:245px; height:115px; float:right; outline:1px solid #0000FF; position:relative; }
.header_wrapper .header .right .link { font:Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif; color:#F4E8D1; padding-top:28px; width:145px; height:20px; outline:1px solid #0033FF; position:absolute; right:0;    }
.header_wrapper .header .right .search { width:245px; height:35px; outline:1px solid #FF0000; position:absolute; bottom:20px; right:0; }

.header_wrapper .header .right .link ul li a { line-height:10px; border-left:1px solid #F4E8D1; float:left; text-decoration:none; margin-left:15px; padding-left:15px; color:#F4E8D1; }
.header_wrapper .header .right .link ul li.first a { border:none;  }
.header_wrapper .header .right .link ul li a:hover { text-decoration:underline; }




.container_wrapper { width:923px;  margin:0 auto; background:#060606; outline:1px solid #FF0000;  }
.container_wrapper .nav { margin:0 auto; padding-top:30px; width:923px; height:32px;   font:12px Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif;   }
.container_wrapper .nav ul { list-style:none; margin:0; padding:0;  }
.container_wrapper .nav ul li { display:inline;  margin-top:27px; }
.container_wrapper .nav ul li a { padding:17px 35px;  color:#FF6600; text-decoration:none;   }
.container_wrapper .nav ul li.first a { margin-left:30px; }
.container_wrapper .nav ul li a:hover { background:url(images/hover_button1.png) center center no-repeat; color:#FF6600; }

.container_wrapper .home_container { margin:0 auto; width:906px; outline:1px  solid #0000FF; position:relative; }
.container_wrapper .home_container .container_bg { background:url(images/body_bg.png) repeat-y left top;  }
.container_wrapper .home_container .left { float:left; width:219px; outline:1px solid #0000FF; margin-left:10px;    }
.container_wrapper .home_container .left .background { background:url(images/left_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .left .background .title { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color:#FDFD31; width:190px; border-bottom:2px solid #FF7811; margin-left:12px; padding-bottom:5px; padding-left:2px;    }
.container_wrapper .home_container .left .background .pruduct { width:190px; margin-left:12px; margin-top:5px; }
.container_wrapper .home_container .left .background .pruduct ul li { font:12px Verdana, Arial, Helvetica, sans-serif; color:#FFF500; padding-bottom:5px;  }
.container_wrapper .home_container .left .background .pruduct ul li a { color:#FFF500; text-decoration:none;  }
.container_wrapper .home_container .left .background .pruduct ul li a:hover {  color:#FFF500; text-decoration:underline; }

.container_wrapper .home_container .contain_box { float:left; width:400px; margin:0px 10px 0 10px; }
.container_wrapper .home_container .contain_box .contain_title { font:bold 14px Verdana, Arial, Helvetica, sans-serif; color: #FDFD31; padding:5px 0 8px 0; }
.container_wrapper .home_container .contain_box .text { font:12px Verdana, Arial, Helvetica, sans-serif; color:#ffffff; font-style:normal; text-align:justify; }

.container_wrapper .home_container .right { float:right; width:253px; outline:1px solid #0000FF;  }
.container_wrapper .home_container .right .right_box_bg { background:url(images/right_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .right .right_box_bg .daily_news { width:195px; height:120px; outline:1px solid #00FF00; margin:0 auto; padding:0;  }
.container_wrapper .home_container .right .right_box_bg .daily_news .News_title { font: bold 24px "Times New Roman", Times, serif; color:#000000; text-align:center; border-bottom:2px solid #FA7815;   }
.container_wrapper .home_container .right .right_box_bg .daily_news .news_scroll { font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center;  width:175px; padding-left:20px;  }


.container_wrapper .home_container .right .right_box_bg .login_nox { width:230px; height:200px; outline:1px solid #0000FF; margin:0 auto; margin-top:20px;  }

.footer { margin:0 auto; width:906px; height:73px;  background:url(images/footer2.png) no-repeat; margin-top:5px;  outline:1px solid #0000FF; text-align:center;  }
.footer ul li { font:12px "Times New Roman", Times, serif; color:#C1A579;  display:inline; line-height:80px; margin-left:20px; padding-left:20px;  }
.footer ul li a { font:12px "Times New Roman", Times, serif; color:#C1A579; text-decoration:none; }
.footer ul li a:hover { text-decoration:underline; }

</style>
</head>

<body>


<div class="wrapper">
	<div class="header_wrapper">
		<div class="header">
			<div class="logo"><img src="images/logo.png" height="171" width="136"/></div>
			<div class="title"> <img src="images/banner_title.png" width="500" height="56" /></div>
			<div class="right">
				<div class="link">
					<ul>
						<li class="first"><a href="">Register</a></li>
						<li><a href="">Login</a></li>
					</ul>
				</div>
				<div class="search">
					<table width="245">
						<tr>
							<td><img src="images/search_bg.png" width="179" height="27" /></td><td> <img src="images/go_button.png" width="49" height="29" /></td>
						</tr>
					</table>
				</div>
				<div class="clear"><!-- --></div>
			</div>
			<div class="clear"><!-- --></div>
	    </div>
	</div>
	
	
	
	
	
	<div class="container_wrapper">
	<div class="nav"> 
		<ul>
			<li class="first"><a href="#">Home  </a></li>
			<li><a href="#">Voluntee </a></li>
			<li><a href="#">About Us </a></li>
			<li><a href="#">Events</a></li>
			<li><a href="#"> Donate </a></li>
			<li ><a href="#"> Carrier with us</a></li>
		</ul>	
	</div>
	
	<div class="clear"><!-- --></div>
	<div class="home_container">
		<div><img src="images/body_top.png" width="906" height="12"></div>
		<div class="container_bg">
		<div class="left">
			<div><img src="images/left_box_top_img.png" width="219" height="14" /></div>
			<div class="background">
				<div class="title">EVENTS</div>
					<div class="pruduct">					
						<ul>
							<li>* <a href="#">Whatexpect on Sundays</a></li> 
							<li>* <a href="#">Location and directions</a></li> 
							<li>* <a href="#">Where to go to wear</a></li> 
							<li>* <a href="#">What  for your child</a></li> 
							<li>* <a href="#">Meet the staff</a></li> 
							<li>* <a href="#">ExploreFaith.org</a></li> 
							<li>* <a href="#">Mission Opportunities</a></li> 
						</ul>	
					</div>
			</div>			
			<div><img src="images/left_box_bottom_img.png" width="219" height="15" /></div>
		</div>
		
		
		<div class="contain_box">
				<div class="contain_title">Welcome to Elite Brigade</div>
				<div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</div>
		</div>
		<div class="right">
			<div> <img src="images/right_box_top_img.png" width="253" height="18" /></div>
			<div class="right_box_bg">
					<div class="daily_news">
						<div class="News_title">Daily News</div>
						<div class="news_scroll">

  <marquee height="80" behavior="scroll" direction="up" scrolldelay="50" truespeed="truespeed" scrollamount="1"  onmouseover="this.stop()" onmouseout="this.start()" >

Put Your Images tag here

</marquee>						
						</div>
					</div>
					<div class="login_nox"></div>			
			</div>
			<div><img src="images/right_box_bottom_img.png" width="253" height="17" /></div>
		</div>		
		<div class="clear"><!-- --></div>	
		
		
		</div>
		<div><img src="images/body_bottom_.png" width="906" height="23"/></div>	
	 </div>
	
	
		<div class="clear"><!-- --></div>
	<div class="footer">
		<ul>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact us</a></li>
			<li><a href="#">Privacy Policy</a></li>
			<li><a href="#">Copyright statement</a></li>
		</ul>	
	</div>
	
	</div>
	
	</div>
</div>

</body>
</html>


Hi Friends...........
Above code is an home page of website and I want that when user clicks on register link, the registration form(PHP File) displays below "Welcome to Ankit" by replacing "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
<br>
<span style="font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."</span>
instead of another page.
Anyone plz help me??????????????
Thx in advance............

Recommended Answers

All 10 Replies

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color:#060606; background:url(images/background.png) repeat-y left top;
}

ul, ul li { margin:0; padding:0; list-style:none; }
ol, ol li { margin:0; padding:0; list-style:none; }
div { margin:0; padding:0; }
.clear { clear:both; }

.wrapper { width:100%; height:1000px; border:1px solid #FF0000;  }
.header_wrapper { background:url(images/banner_bg.png) no-repeat left top; height:115px; width:100%; border-bottom:2px solid #FCE66F; } 
.header_wrapper .header { width:906px; height:115px; margin:0 auto; outline:1px solid #0000FF;  }
.header_wrapper .header .logo { float:left; left:0; top:0; width:136px; }
.header_wrapper .header .title { float:left; margin-left:10px; padding-top:42px; width:491px; }
.header_wrapper .header .right { width:245px; height:115px; float:right; outline:1px solid #0000FF; position:relative; }
.header_wrapper .header .right .link { font:Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif; color:#F4E8D1; padding-top:28px; width:145px; height:20px; outline:1px solid #0033FF; position:absolute; right:0;    }
.header_wrapper .header .right .search { width:245px; height:35px; outline:1px solid #FF0000; position:absolute; bottom:20px; right:0; }

.header_wrapper .header .right .link ul li a { line-height:10px; border-left:1px solid #F4E8D1; float:left; text-decoration:none; margin-left:15px; padding-left:15px; color:#F4E8D1; }
.header_wrapper .header .right .link ul li.first a { border:none;  }
.header_wrapper .header .right .link ul li a:hover { text-decoration:underline; }




.container_wrapper { width:923px;  margin:0 auto; background:#060606; outline:1px solid #FF0000;  }
.container_wrapper .nav { margin:0 auto; padding-top:30px; width:923px; height:32px;   font:12px Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif;   }
.container_wrapper .nav ul { list-style:none; margin:0; padding:0;  }
.container_wrapper .nav ul li { display:inline;  margin-top:27px; }
.container_wrapper .nav ul li a { padding:17px 35px;  color:#FF6600; text-decoration:none;   }
.container_wrapper .nav ul li.first a { margin-left:30px; }
.container_wrapper .nav ul li a:hover { background:url(images/hover_button1.png) center center no-repeat; color:#FF6600; }

.container_wrapper .home_container { margin:0 auto; width:906px; outline:1px  solid #0000FF; position:relative; }
.container_wrapper .home_container .container_bg { background:url(images/body_bg.png) repeat-y left top;  }
.container_wrapper .home_container .left { float:left; width:219px; outline:1px solid #0000FF; margin-left:10px;    }
.container_wrapper .home_container .left .background { background:url(images/left_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .left .background .title { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color:#FDFD31; width:190px; border-bottom:2px solid #FF7811; margin-left:12px; padding-bottom:5px; padding-left:2px;    }
.container_wrapper .home_container .left .background .pruduct { width:190px; margin-left:12px; margin-top:5px; }
.container_wrapper .home_container .left .background .pruduct ul li { font:12px Verdana, Arial, Helvetica, sans-serif; color:#FFF500; padding-bottom:5px;  }
.container_wrapper .home_container .left .background .pruduct ul li a { color:#FFF500; text-decoration:none;  }
.container_wrapper .home_container .left .background .pruduct ul li a:hover {  color:#FFF500; text-decoration:underline; }

.container_wrapper .home_container .contain_box { float:left; width:400px; margin:0px 10px 0 10px; }
.container_wrapper .home_container .contain_box .contain_title { font:bold 14px Verdana, Arial, Helvetica, sans-serif; color: #FDFD31; padding:5px 0 8px 0; }
.container_wrapper .home_container .contain_box .text { font:12px Verdana, Arial, Helvetica, sans-serif; color:#ffffff; font-style:normal; text-align:justify; }

.container_wrapper .home_container .right { float:right; width:253px; outline:1px solid #0000FF;  }
.container_wrapper .home_container .right .right_box_bg { background:url(images/right_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .right .right_box_bg .daily_news { width:195px; height:120px; outline:1px solid #00FF00; margin:0 auto; padding:0;  }
.container_wrapper .home_container .right .right_box_bg .daily_news .News_title { font: bold 24px "Times New Roman", Times, serif; color:#000000; text-align:center; border-bottom:2px solid #FA7815;   }
.container_wrapper .home_container .right .right_box_bg .daily_news .news_scroll { font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center;  width:175px; padding-left:20px;  }


.container_wrapper .home_container .right .right_box_bg .login_nox { width:230px; height:200px; outline:1px solid #0000FF; margin:0 auto; margin-top:20px;  }

.footer { margin:0 auto; width:906px; height:73px;  background:url(images/footer2.png) no-repeat; margin-top:5px;  outline:1px solid #0000FF; text-align:center;  }
.footer ul li { font:12px "Times New Roman", Times, serif; color:#C1A579;  display:inline; line-height:80px; margin-left:20px; padding-left:20px;  }
.footer ul li a { font:12px "Times New Roman", Times, serif; color:#C1A579; text-decoration:none; }
.footer ul li a:hover { text-decoration:underline; }

</style>
</head>

<body>


<div class="wrapper">
    <div class="header_wrapper">
        <div class="header">
            <div class="logo"><img src="images/logo.png" height="171" width="136"/></div>
            <div class="title"> <img src="images/banner_title.png" width="500" height="56" /></div>
            <div class="right">
                <div class="link">
                    <ul>
                        <li class="first"><a href="">Register</a></li>
                        <li><a href="">Login</a></li>
                    </ul>
                </div>
                <div class="search">
                    <table width="245">
                        <tr>
                            <td><img src="images/search_bg.png" width="179" height="27" /></td><td> <img src="images/go_button.png" width="49" height="29" /></td>
                        </tr>
                    </table>
                </div>
                <div class="clear"><!-- --></div>
            </div>
            <div class="clear"><!-- --></div>
        </div>
    </div>
    
    
    
    
    
    <div class="container_wrapper">
    <div class="nav"> 
        <ul>
            <li class="first"><a href="#">Home  </a></li>
            <li><a href="#">Voluntee </a></li>
            <li><a href="#">About Us </a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#"> Donate </a></li>
            <li ><a href="#"> Carrier with us</a></li>
        </ul>    
    </div>
    
    <div class="clear"><!-- --></div>
    <div class="home_container">
        <div><img src="images/body_top.png" width="906" height="12"></div>
        <div class="container_bg">
        <div class="left">
            <div><img src="images/left_box_top_img.png" width="219" height="14" /></div>
            <div class="background">
                <div class="title">EVENTS</div>
                    <div class="pruduct">                    
                        <ul>
                            <li>* <a href="#">Whatexpect on Sundays</a></li> 
                            <li>* <a href="#">Location and directions</a></li> 
                            <li>* <a href="#">Where to go to wear</a></li> 
                            <li>* <a href="#">What  for your child</a></li> 
                            <li>* <a href="#">Meet the staff</a></li> 
                            <li>* <a href="#">ExploreFaith.org</a></li> 
                            <li>* <a href="#">Mission Opportunities</a></li> 
                        </ul>    
                    </div>
            </div>            
            <div><img src="images/left_box_bottom_img.png" width="219" height="15" /></div>
        </div>
        
        
        <div class="contain_box">
                <div class="contain_title">Welcome to Elite Brigade</div>
                <div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </div>
        </div>
        <div class="right">
            <div> <img src="images/right_box_top_img.png" width="253" height="18" /></div>
            <div class="right_box_bg">
                    <div class="daily_news">
                        <div class="News_title">Daily News</div>
                        <div class="news_scroll">

  <marquee height="80" behavior="scroll" direction="up" scrolldelay="50" truespeed="truespeed" scrollamount="1"  onmouseover="this.stop()" onmouseout="this.start()" >

Put Your Images tag here

</marquee>                        
                        </div>
                    </div>
                    <div class="login_nox"></div>            
            </div>
            <div><img src="images/right_box_bottom_img.png" width="253" height="17" /></div>
        </div>        
        <div class="clear"><!-- --></div>    
        
        
        </div>
        <div><img src="images/body_bottom_.png" width="906" height="23"/></div>    
     </div>
    
    
        <div class="clear"><!-- --></div>
    <div class="footer">
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Copyright statement</a></li>
        </ul>    
    </div>
    
    </div>
    
    </div>
</div>

</body>
</html>

Hi Friends...........
Above code is an home page of website and I want that when user clicks on register link, the registration form(PHP File) displays below "Welcome to Ankit" by replacing "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
<br>
<span style="font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."</span>
instead of another page.
Anyone plz help me??????????????
Thx in advance............

g

This cannot be done with HTML or CSS. However, it can be accomplished in several other languages. I suggest asking here.

Thanks, Arkinder

Those Link you want open on same page set this ( target="_self" ) property.

Like as <a href=" You Link name" target="_self">Menu Name</a>

The standard way to do this is by using a code called AJAX. However, there is a way to do this purely with html. I suggest taking a look at the source code for this page, it should be very helpful, and you can see their example close to the bottom of the page, where it describes their games.

Cheers!

I believe you both are miss reading the question. The user wants the content switched from, "Lorem Ipsum is simply dummy text of the printing and typesetting industry...." To the registration form when the user clicks a registration link.

HTML alone does not have the ability to replace elements via onclick.

Regards, Arkinder

I understood what the poster wants, if you look at my post, you can see how to do exactly that with html. Basically it involves the link being a link to a hidden target on the same page, and you change the target to unhidden and the previous section to hidden when you do that. Again, take a look at the source code for the page I posted in my previous post....

Cheers!

If your trying to change whether an object is hidden or not with html you can't. Thats more up the alley of Javascript. One decent option is to use an iframe and make the page change inside the frame, if done right it can look like an item was hidden then made visible. Thats what I got out of your post, if this isn't what your asking for let me know and I can try to be more specific.

Check this out:

<div class="tabs"> 
				<ul class="tabNavigation" id="navi">
				<li><a href="#game1" class="selected">Text Twist</a></li>
                <li><a href="#game2" class="">Pong</a></li> 
                <li><a href="#game3" class="">Nim</a></li>
                <li><a href="#game4" class="">Word Scramble</a></li> 
				<li><a href="#game5" class="">Blackjack</a></li> 
				<li><a href="#game6" class="">Hangman</a></li> 
				<li><a href="#game7" class="">Nalil</a></li> 
            		
                </ul>
		<div id="game1" style="display: block;">
		<h3> Text Twist </h3>
		<p>Text Twist is a game where you have two minutes of play time per puzzle. The goal is to create as many words as possible from the six letters provided. If you can find at least one six letter word, you win that level and get to keep going. Can you find it in time?</p>
		<a href="TextTwist.msi"> Download </a>
		</div>
        <div id="game2" style="display: none;"> 
            <h3>Pong</h3> 
            <p>Pong is a classic. It is known and loved by gamers the world over.  It is also my first journey into the realm of graphics programming.  The plot is simple. 2 paddles with one ball in between. The goal is to NOT miss the ball.  So simple and so easy.  Anyone can do it right?
Pong is currently in the beta stages of testing. Still to come will be (most likely) background music, menu system, and possibly updated graphics as well.</p> 
			<a href="PongBeta1.msi"> Download </a>
        </div> 
        <div id="game3" style="display: none;"> 
 
            <h3>Nim</h3> 
            <p>Nim is a game of logic. Depending on the rules that you can pick, the person to take the last orb is either the winner or loser.  You can take up to three orbs (assuming they all come from the same group) per turn. Pick carefully though, cause one misguided pick could lead your opponent right to victory.  Can you outwit him or not?</p> 
			<a href="Nim.msi"> Download </a>
        </div> 
        <div id="game4" style="display: none;"> 
            <h3>Word Scramble</h3> 
            <p>Word Scramble is a simple enough game.  Just un-scramble the letters to make a word.  It almost seems too simple. Is it really that easy though?</p> 
			<a href="wordscramble.msi"> Download </a>
		</div> 
		<div id="game5" style="display: none;"> 
            <h3>Blackjack</h3> 
            <p>Blackjack is a simple game of you against the dealer. The goal is to get as close to 21 as possible without going over. If you can get closer than the dealer you win. Can you beat the house?</p> 
			<a href="Blackjack.msi"> Download </a>
		</div> 
			<div id="game6" style="display: none;"> 
            <h3>Hangman</h3> 
            <p>Hangman is the classic word guessing game that everyone remembers from their childhood. Guess what letters are in the mystery word?  Can you figure out the puzzle before the hangman comes?</p> 
			<a href="hangman.msi"> Download </a>
		</div> 
			<div id="game7" style="display: none;"> 
            <h3>Nalil</h3> 
            <p>Naillil is the outcome of my fevered dreams. It is a life long dream and is light-years from finished.  This game I am taking through all the stages of game development. Right now it is a simple text based adventure with a pretty background image.  Where it will go from here is anyone’s guess. This game is ever evolving and ever changing so keep a special eye on this one.  No matter what other projects come along I always end up back here!</p> 
			<a href="Naillil.msi"> Download </a>
        </div> 
		<div class="waste" style="display: none;"></div> 
</div>

I understood what the poster wants, if you look at my post, you can see how to do exactly that with html. Basically it involves the link being a link to a hidden target on the same page, and you change the target to unhidden and the previous section to hidden when you do that. Again, take a look at the source code for the page I posted in my previous post....

Cheers!

HTML cannot change elements by itself. The link you provided is not purely HTML - jQuery is being used to show and hide the elements.

http://adkins-software.com/js/job.js

Regardless, it's an excellent example of what the poster wants. ^_^


Regards, Arkinder

Right. Didn't catch that, point taken. At any rate, there it is.

Cheers!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.