Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

button iframe switch

Posted on 2011-02-28
2
Medium Priority
?
196 Views
Last Modified: 2012-05-11
I have the following code that switches iframes once it is selected from the dropdown menu.  But I now want to get rid of the dropdown menu and have them all as on page buttons instead.  How do I modify my existing code to support them as buttons instead of dropdown selected.

<form name="form1">
<select name="list1" id="list1" onChange="if(this.selectedIndex>0) for(i=0;i<4;i++) if((this.selectedIndex-1)==i) document.getElementsByTagName('iframe')[i].style.display='block'; else document.getElementsByTagName('iframe')[i].style.display='none';" style="font-family:Verdana, Geneva, sans-serif; color:#666; font-size:11px;">
    <option selected value="">Please Select...</option>
    <option>Profile Information</option>
    <option>Overall Leaderboards</option>
    <option>Portfolio Leaderboards</option>
    <option>Friends Invitation</option>
</select>
</form>
</td>
</tr>
</table>
<table width="100%" align="center" id="map_td2">
  <tr>
    <td width="100%" rowspan="31" align="center" valign="top">
    

<iframe src="box/UserData.html" width="720" height="480" frameborder="0" scrolling="no"></iframe>

<iframe width="720" height="480" frameborder="0" scrolling="no" style="display:none" src="../datagrid/box/global_ranking.html"></iframe>

<iframe width="720" height="480" frameborder="0" scrolling="no" style="display:none" src="../datagrid/box/portfolio_ranking.html"></iframe>

<iframe width="720" height="480" frameborder="0" scrolling="no" style="display:none" src="../datagrid/box/invite.html"></iframe>

Open in new window

0
Comment
Question by:MsKrissy
2 Comments
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 2000 total points
ID: 35002566
I think something like this should work.  You will have to use CSS to make the links look like buttons:

<ul id="links">
  <li><a href="/some/path/to/page1.html" target="myIframe">Page 1</a></li>
  <li><a href="/some/path/to/page2.html" target="myIframe">Page 2</a></li>
  <li><a href="/some/path/to/page3.html" target="myIframe">Page 3</a></li>
  <li><a href="/some/path/to/page4.html" target="myIframe">Page 4</a></li>
</ul>

<iframe src="box/UserData.html" width="720" height="480" frameborder="0" scrolling="no" name="myIframe></iframe>

Open in new window

0
 

Author Closing Comment

by:MsKrissy
ID: 35009211
thanks you, this worked greatly.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question