Loading iframes by clicking a div with nested divs

Question

I have a setof divs with nested items

<div id="second-item" class="dock-item">
  <div class="website-name">Facebook.com</div>
  <div class="website-screenshot"><img src="fb-thumb.png" /></div>
  <div class="page-name">Facebook</div>
</div>
    <div id="third-item" class="dock-item">
  <div class="website-name">Mozilla.com</div>
  <div class="website-screenshot"><img src="uwdt-thumb.jpg" /></div>
  <div class="page-name">Mozilla</div>
</div>

I have an iframe #frame1

<iframe id="frame1"></iframe>

When a user clicks on the parent #second-item div, I need the iframe #frame1 to load facebook.com

When a user clicks on the parent #third-item div, I need the iframe #frame1 to load mozilla.com

How do I do that?

I tried adding inside the divs #second-item and #third-item the followin onclick but it didn't work:

'onclick="frames['frame1'].location.href='http://sitename.com'"'

Answer 1

Many ways lead to Rome (Here just two ways!).

<!-- points on first frame-->
<div id="second-item" class="dock-item" onclick="window.frames[0].location.href='http://facebook.com'"&gt;
  <div class="website-name">Facebook.com</div>
  <div class="website-screenshot"><img src="fb-thumb.png" /></div>
  <div class="page-name">Facebook</div>
</div>
<!-- points on name -->
<div id="third-item" class="dock-item" onclick="window.frames['frame1'].location.href='http://mozilla.com'"&gt;
  <div class="website-name">Mozilla.com</div>
  <div class="website-screenshot"><img src="uwdt-thumb.jpg" /></div>
  <div class="page-name">Mozilla</div>
</div>
<iframe id="frame1" name="frame1"></iframe>

The better solution:

<!-- points on id -->
<div id="fourth-item" class="dock-item" onclick="document.getElementById('frame1').src='http://www.phpclasses.org';return false;">
  <div class="website-name">phpclasses.org</div>
  <div class="website-screenshot"><img src="uwdt-thumb.jpg" /></div>
  <div class="page-name">PhpClasses</div>
</div>