Loading a page into a frame using a mouseover

IS300 · Apr 22, 2004

I currently have an IFRAME imbedded in my web page. What I want to do is when a user moves their cursor over a link, that link will automatically load in that frame, but when they move it away from that link, it disappears from the frame.

Sort of like a mouse over image, except with a webpage instead

Any ideas?

Thanks,

LFI · Apr 22, 2004

Set onmouseover and onmouseout events of the link to call a function sending two parameters (true for onmouseover and false for onmouseout and 'this' for itself).

e.g.,

Code:

<a href="target.html" onmouseover="loadIframe(this, true);" onmouseout="loadIframe(this, false);">
...
<script>
function loadIframe(anchor, loadIt)
{
 if(loadIt)
  iframeName.location = anchor.href;
 else
  iframeName.location = "about:blank";
}
</script>

Normally I'd test this before I send a response, but I'm on my way out the door.

'hope this helps.

--Dave

BillyRayPreachersSon · Apr 22, 2004

This works for me:

Code:

<html>
<head>
<script type="text/javascript">
<!--
	function showLink(aObj) {
		document.getElementById('myIframe').src = aObj.href;
		return(false);
	}

	function hideLink(aObj) {
		document.getElementById('myIframe').src = 'about:blank';
		return(false);
	}
//-->
</script>
</head>
<body>
	<a href="[URL unfurl="true"]http://www.google.co.uk/"[/URL] onmouseover="return(showLink(this));" onmouseout="return(hideLink(this));">Google<a>
	<br>
	<a href="[URL unfurl="true"]http://www.yahoo.co.uk/"[/URL] onmouseover="return(showLink(this));" onmouseout="return(hideLink(this));">Yahoo<a>
	<br>
	<iframe id="myIframe"></iframe>
</body>
</html>

Hope this helps,
Dan

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Loading a page into a frame using a mouseover

IS300

MIS

LFI

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor