PDA

View Full Version : Need suggestions for an alternative to Iframes



Voronwe
09-11-2004, 08:46 PM
Hello all,
I am currently building a navigation tool for my website which includes a series of buttons next to an anchor image and an area for text.

My goal is this: when the user hovers over the buttons, the anchor image changes to correspond with the image of that button, and the text in the area changes to correspond as well. Swapping the images was no problem, but to swap the area of text, I wasn't sure what to do. It was suggested that I use Iframes, and I tried that out. It worked well in IE, but the code I used to change the target of the iframe didn't work in Netscape or Mozilla. I've been trying to fix that problem, (and I'll include that code if anyone wants to help with that :D), but I'm also wondering if iframes is the best solution for what I want. I notice that when using iframe, it takes a very brief moment to load the frame after the rest of the page, which leaves a small white box appearing against my page's black background. It's only for a moment, but it stands out to me. Also, I would still like this tool to appear fluid even with slower internet connections, and I'm not sure loading an independent page, like iframe does, will allow that - I'm worried about that brief moment in between the iframe loadings where the box could turn white.

You can see my progress here (http://www.thesunderedguard.com/pathways3.php). If you're using IE, you'll be able to see the text aspect of it, but if you're using anything else, you'll only be able to see the image aspect.

And here is a simplified version of the code that is being problematic with any browser aside from IE:

<script>
<!--
function MouseOverRoutine(CrestName)
{
if (CrestName=="smcrest")
{document.all("pathway").src="tsghover.php";}
}

function MouseOutRoutine(CrestName)
{
if (CrestName=="smcrest")
{document.all("pathway").src="blank.php";}
}
//-->
</script>

And the iframe code itself as it stands right now:

<iframe STYLE="position:absolute; TOP:99px; LEFT:537px;
src="http://www.thesunderedguard.com/includes/pathways/blank.php"
name="pathway" width="300" height="120"
frameborder="0" scrolling="auto">
</iframe>

Thanks for any help you can offer,
Voronwe
Chris Samardge