pcadv Posted January 18, 2007 Share Posted January 18, 2007 Hi,I want to design a webpage such that if any one option is clicked.. then all remains same except a frame. That is to say.. all things remain same except the picture in the frame keeps changing with change of option selected.the options are in one div and the frame is in other div.In other words, if PA is selected then only iframe src will change. similarly with other li options.<div id="container"><H3 style="left: 20px; text-align: left"> Photographs </H3><div class="small"><ul class="none"><li>PA</li><li>St</li><li>HMB</li><li>SC</li><li>SF</li></ul></div><div class="inlineframe"><iframe src="index.html" width="100%" height="70%"></iframe></div></div>Is it possible that I can have one page coding. If anyone can suggest something, it would be great.thanks, Link to comment Share on other sites More sharing options...
pulpfiction Posted January 18, 2007 Share Posted January 18, 2007 Try this... <html><head><script type="text/javascript">function change(imgsrc) {frames['testiframe'].location.href = imgsrc}</script></head><body> <div id="container"><H3 style="left: 20px; text-align: left"> Photographs </H3><div class="small"><ul class="none"><li><a href="java script:change('imgname1.jpg');">PA</a></li><li><a href="java script:change('imgname2.jpg');">St</a></li><li><a href="java script:change('imgname3.jpg');">HMB</a></li><li><a href="java script:change('imgname4.jpg');">SC</a></li><li><a href="java script:change('imgname5.jpg');">SF</a></li></ul></div><div class="inlineframe"><iframe id="testiframe" name="testiframe" src="someimg.gif"></iframe></div></div></body></html> Link to comment Share on other sites More sharing options...
pcadv Posted January 18, 2007 Author Share Posted January 18, 2007 Try this...<html><head><script type="text/javascript">function change(imgsrc) {frames['testiframe'].location.href = imgsrc}</script></head><body> <div id="container"><H3 style="left: 20px; text-align: left"> Photographs </H3><div class="small"><ul class="none"><li><a href="java script:change('imgname1.jpg');">PA</a></li><li><a href="java script:change('imgname2.jpg');">St</a></li><li><a href="java script:change('imgname3.jpg');">HMB</a></li><li><a href="java script:change('imgname4.jpg');">SC</a></li><li><a href="java script:change('imgname5.jpg');">SF</a></li></ul></div><div class="inlineframe"><iframe id="testiframe" name="testiframe" src="someimg.gif"></iframe></div></div></body></html> Hello pulpfiction,Thanks for your response and help. However, somehow, the iframe src is not working. Am also not sure what excatly to write in the src. Can you explain a little bit further?Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now