PDA

View Full Version : iframe & image swapping



g00fy
Feb 1st, 2003, 12:14 PM
hello all,

what i want to do is have an iframe that swaps html and images on link rollover and loads them via href, no problem so far, except that the onmouseout function destroys the href call if you mouseout of the link and onto the next one :(



<td>
<div align="center"><a href="about.html" target="ifr" onmouseover="document.getElementById('mad').src='about.html'" onmouseout="document.getElementById('mad').src='images/mad.gif'"> About</a></div>
</td>
<td rowspan="4">
<div align="center">
<iframe src="images/mad.gif" title="table_iframe" scrolling="Auto" id="mad" name="ifr" width="300" height="300" align="center" frameborder="no"> </iframe>
</div>
</td>


1. is there a way around this other than not changing on mouseout ?

2. is there a way to refresh the iframe with the initial
image after n seconds then i can do away with the mouseout altogether ?


thanx in advance

g00fy

g00fy
Feb 1st, 2003, 12:47 PM
i must be learning something cause i worked it out :)


thanx to those who would have helped, i have had great success in the javascript forum



regards,

g00fy

GoHF
Feb 1st, 2003, 01:05 PM
just in case you still want an answer to number 2:

--------------------------------------------------------

<script>
var activeTimeout=false;

function changeIframeSrc(iframeId,url){
document.getElementById(iframeId).src=url;
}

function loadTempPage(iframeId,tempUrl){
originalUrl = 'images/mad.gif';
timeUntilReverse = 5000; //miliseconds

if (activeTimeout)
clearTimeout(activeTimeout);
changeIframeSrc(iframeId,tempUrl);
setTimeout("changeIframeSrc('"+iframeId+"','"+originalUrl+"'); activeTimeout=false",timeUntilReverse);
}
</script>

<body>
<table>
<tr>
<td align="center">
<a href="about.html" target="ifr" onmouseover="loadTempPage('mad','about.html')"> About</a>
</td>
<td rowspan="4" align="center">
<iframe src="images/mad.gif" title="table_iframe" scrolling="Auto" id="mad" name="ifr" width="300" height="300" align="center" frameborder="no"></iframe>
</td>
</tr>
</table>
</body>

--------------------------------------------------------

Just use the function loadPageTemp(iframeId,tempUrl) on your mouseover events and the iframe will be set back to the original image after 5 seconds. You can change the original image and the time it takes to reverse by changing the values of the variables originalUrl and timeUntilReverse that are inside the function.

g00fy
Feb 1st, 2003, 01:08 PM
i opted for:

<SCRIPT LANGUAGE="JavaScript">
function restore()
{
setTimeout("document.getElementById('mad').src='images/mad.gif'", 10000);
}
</SCRIPT>

<a href="glossary.html#R" target="ifr" onmouseover="document.getElementById('mad').src='glossary.html#R'" onmouseout="javascript:restore()">

what do u think of this approach ?


thanx g00fy

g00fy
Feb 1st, 2003, 02:09 PM
one problem,

both my code and GoHF's code reload the initial image n times
=> n being the total number of mouseouts of all links within the table (ie., like if you mouseover all of them quickly).

is there a way to only count the last mouseout, ie., only call the setTimeout() function if there has been no mouseover for a second or two?

or only reload the initial image once ?

BTW the timeout still restores the inital image if you are over a link, after moving from another link.

is this what the activeTimeout & clearTimeout is trying to overcome in your code ?


thanx again

g00fy

GoHF
Feb 1st, 2003, 07:31 PM
My code was made thinking about canceling all timeouts if a new one was started but I forgot one essential thing, which was to save the setTimeout() value in the activeTimeout global variable.
Also, I first understood you wanted the url of the iframe to revert N seconds after the "MOUSEOVER" event, not the "MOUSEOUT" event. That's why I coded it the way I did. Sorry =).

To have it do that just add these functions to the <script> block on my code, deleting the old "loadTempPage()" function as well:

<script>

...

function revertIframe(iframeId){
originalUrl = 'images/mad.gif';
timeUntilReverse = 2000; //miliseconds
activeTimeout =
setTimeout("changeIframeSrc('"+iframeId+"','"+originalUrl+"');activeTimeout=false",timeUntilReverse);
}

function loadTempPage(iframeId,tempUrl){
el = event.srcElement;

if (activeTimeout)
clearTimeout(activeTimeout);
changeIframeSrc(iframeId,tempUrl);
}

...

</script>

-------------------------

then just add "onmouseout = revertIframe('mad')" to your <a></a> tags =). Enjoy.
If you want anything else on these functions, and that can be a lot of stuff I have done a zillion times, just drop another line =). I'm always glad to code some more.

g00fy
Feb 2nd, 2003, 12:11 AM
thanx GoHF i appreciate your help,

i,ve posted the site to a testing folder, most of the links wont work but you'll see the iframe (working) and what i'm trying to do.

http://www.madcomputing.com.au/testing/main.html

the iframe still reloads the initial image n mouseout times, i know this cause the 'ticking' is turned on in my browser IE, its not a major problem but you hear alot of ticking, maybe there is a way to force the ticking off ?

also when you mouseout and then mouseover another link when the timeout happens the initial image is restored, even though you are still moused over a link, is there a way to check 'if (!mouseOver)' ?

also my iframes dont work in opera (6.01), i havent tried netscape yet but i thought they were similar, do you know if they should work or not ?

i have another iframe on this page(top left) is this goin to affect the performance of this script ? => it doesnt seem to atm


sorry to ask so many questions


thanx again


g00fy

GoHF
Feb 2nd, 2003, 12:38 AM
I sent you an email with my code. It should be working perfectly. It did on my IE6.0, and the code is bound to work on any IE4+.

Regarding Opera, I don't know the scripting abilities of that browser or it's support to non standard tags such as IFRAME. It's likely that the browser doesnt support them.

Regarding Netscape Navigator, versions 6+ (ONLY) support IFRAMES and the code I did should work perfectly on them.

Finally, regarding there being another Iframe, you can put as many as you wish on your page, this script won't care about them at all. Just don't name any of the other IFRAMES "ifr" or give them the same "mad" ID. =)

Now, IF you can't make my code work by using the mail I sent you, I will create a copy of your website with my code on my server and let you see it working, ok? ;) and then maibe mail it to you in a zip file.

Last, no problem, my life and love is web scripting.