javescript, iframe/div relation.

[Reacton]

hi,

basically what i need is for my 5 individual divs on my webpage to open their respective .html's in an iframe on the same page.

so far i have this:
----------------------------------------
<div id="main">
<script language="JavaScript">
function changeblog() {
document.getElementById("blog_holder").src = "Blogs/frame_blog_1.html";
document.getElementById("blog_holder").src = "Blogs/frame_blog_2.html";
document.getElementById("blog_holder").src = "Blogs/frame_blog_3.html";
document.getElementById("blog_holder").src = "Blogs/frame_blog_4.html";
document.getElementById("blog_holder").src = "Blogs/frame_blog_5.html";
}
</script>
<div id="blog_selection_holder">
<div onclick="changeblog()" id="blog_1">Content for id "blog_1" Goes Here</div>
<div onclick="changeblog()" id="blog_2">Content for id "blog_2" Goes Here</div>
<div onclick="changeblog()" id="blog_3">Content for id "blog_3" Goes Here</div>
<div onclick="changeblog()" id="blog_4">Content for id "blog_4" Goes Here</div>
<div onclick="changeblog()" id="blog_5">Content for id "blog_5" Goes Here</div>
</div>
<iframe id="blog_holder"></iframe>
</div>
---------------------------------
from what i can tell through my little knowledge of javascript is that no matter which div you click it will always just show the last blog( blog_5) in the iframe because the function is in a list.

is there some way i can allocate, "click this div open blog_1, click this div open blog_2" and so on?

any responces much appreciated.

cheers,

Lloyd.

[xelawho]

yes. as far as I can tell you would be better off with this:

<script type = "text/javascript">
function changeblog(theblog) {
document.getElementById("blog_holder").src = "Blogs/frame_"+theblog+".html";
}
</script>
<div id="main">
<div id="blog_selection_holder">
<div onclick="changeblog(this.id)" id="blog_1">Content for id "blog_1" Goes Here</div>
<div onclick="changeblog(this.id)" id="blog_2">Content for id "blog_2" Goes Here</div>
<div onclick="changeblog(this.id)" id="blog_3">Content for id "blog_3" Goes Here</div>
<div onclick="changeblog(this.id)" id="blog_4">Content for id "blog_4" Goes Here</div>
<div onclick="changeblog(this.id)" id="blog_5">Content for id "blog_5" Goes Here</div>
</div>
<iframe id="blog_holder"></iframe>
</div>

[Reacton]

yes. as far as I can tell you would be better off with this:

<script type = "text/javascript">
function changeblog(theblog) {
document.getElementById("blog_holder").src = "Blogs/frame_"+theblog+".html";
}
</script>
<div id="main">
<div id="blog_selection_holder">
<div onclick="changeblog(this.id)" id="blog_1">Content for id "blog_1" Goes Here</div>
<div onclick="changeblog(this.id)" id="blog_2">Content for id "blog_2" Goes Here</div>
<div onclick="changeblog(this.id)" id="blog_3">Content for id "blog_3" Goes Here</div>
<div onclick="changeblog(this.id)" id="blog_4">Content for id "blog_4" Goes Here</div>
<div onclick="changeblog(this.id)" id="blog_5">Content for id "blog_5" Goes Here</div>
</div>
<iframe id="blog_holder"></iframe>
</div>

Thank you very much my firend, i was worried it may have been alot more difficult than that, as my college javascript lecturer couldnt even tell me the answer himself!

cheers though.

Lloyd.