Liens du Vin - Playing with iframe - Open and Close an iframe

Playing with iframe

Pick a Wine (click on the link to open the iframe)

Close the iframe (click on the link to close the iframe)

The code

Height of iframe : when the page is loaded, 0px. To open it change the height

<a href="#" onclick=
"document.getElementById('opt_iframe').style.height='391px';
return false;" title="Pick a Wine" onmouseover="window.status='Click to Open the iframe';
return true; "
onmouseout="window.status=''; return true;">
Pick a Wine</a>
(click on the link to open the iframe)

One Link to Open or Close the iframe - A Flip-Flop

Domaine du Mont d'Or - Vignoble d'exception (Click to Open or Close the iframe)

The code

A simple function change the height of the iframe. We need a variable (i_state) to store the status of the iframe
Create the variable outside the poke_iframe function

var i_state = 0;

functionpoke_iframe (id)
{
var obj = document.getElementById(id);
if (i_state == 1)
{
obj.style.height="0px";
i_state = 0; }
else
{
obj.style.height="380px";
i_state = 1;
}
return;
}

The html for the link. Note we use return=false to not follow the anchor define by href

<a href="#" onclick=
"poke_iframe('my_iframe'); return false;"
title="Click to Open or Close" onmouseover="window.status='Click to Poke the iframe';
return true; "
onmouseout="window.status=''; return true;">
Click to Open or Close</a>