PDA

View Full Version : Replacing some content in a web page



fuliopen
06-15-2009, 08:10 PM
I need to replace some content in a web page with new content, without leaving the page.

When opening the following page, there are two rectangles, one being small and the one large:

http://www.pinyinology.com/listing/quoteHZ.html

When clicking the small rectangle in above page, the two rectangles will be replaced by the two in following page:

http://www.pinyinology.com/listing/quotePY.html

I understand that the two sets of rectangles may need to be coded in one page. I put them in two different ones in order to present my ideas clearly.

I know little about javascript. But from my limited knowledge, I know this can be accomplished with javascript. Thanks for your help.

fuliiopen

Philip M
06-15-2009, 08:27 PM
Your links are invalid - page cannot be displayed.

fuliopen
06-15-2009, 09:49 PM
Thanks a lot for the reply. I don't encounter any problem opening the links. Wondering whether there is another way to send links to a group member. I have sincere desire to do that.

Thanks again.


http://www.pinyinology.com/listing/quoteHZ.html

http://www.pinyinology.com/listing/quotePY.html

fuliopen

Old Pedant
06-15-2009, 11:01 PM
<html>
<head>
<title>Ideographs</title>
<style style='text/css'>
body {margin:50px 80px; background:#ffd; font-size:120%;}
.biaoZhun {cursor:default;}
sup {font-size:75%; color:red; font-weight:600;}
.quote {word-spacing:-1px;}
.words {border:4px blue solid; padding-left:10px; padding-right:10px;}
.goTo {position:relative; left:25px; border:2px red solid; width:150px; padding:4px; margin-bottom:25px;}
#convert {text-decoration:none;}
</style>
</head>
<body>
<h1>Converting Ideographs to Romanization</h1>
<p>
&lt;discussion is here. &gt;
</p>
<div id="IDEO">
<div class='goTo'>
<a href="#" onclick="document.getElementById('PY').style.display='block';
document.getElementById('IDEO').style.display='none';">
Convert to PinYin
</a>
</div>
<div class='words'>
  新中国站在每个人民的面前,我们应该迎接它。
<p>
  新中国航船的桅顶已经冒出地平线了,我们应该拍掌欢迎它。
举起你的双手吧,新中国是我们的。
</p>
</div>
</div><!--end of IDEO-->
<div id="PY" style="display: none;">
<div class='goTo'>
<a href="#" onclick="document.getElementById('PY').style.display='none';
document.getElementById('IDEO').style.display='block';">
Back to Ideographs
</a>
</div>
<div class='words'>
<p class='quote'>
</span><span class="biaoZhun" title='xin&sup1;'>xin<sup>1</sup> </span>
</span><span class="biaoZhun" title='zhong&sup1;'>zhong<sup>1</sup> </span>
</span><span class="biaoZhun" title='guo&sup2;'>guo<sup>2</sup> </span>
</span><span class="biaoZhun" title='zhan⁴'>zhan<sup>4</sup> </span>
</span><span class="biaoZhun" title='zai⁴'>zai<sup>4</sup> </span>
... etc. ...
</div>
</div><!--end of PY-->
<p>
&lt;discussion is here. &gt;
</p>
</body>
</html>

Philip M
06-16-2009, 08:56 AM
Thanks a lot for the reply. I don't encounter any problem opening the links. Wondering whether there is another way to send links to a group member. I have sincere desire to do that.

Thanks again.


http://www.pinyinology.com/listing/quoteHZ.html

http://www.pinyinology.com/listing/quotePY.html

fuliopen

The two links still return Page Cannot Be Displayed for me. Is it because they are in Chinese?