Textflip, not imageflip [Archive]

Click to See Complete Forum and Search --> : Textflip, not imageflip

naomiw

04-02-2003, 06:36 AM

Hi,

I know how to do double image flips, either with a Javascript function or directly in the onMouseOver statement. Is it possible to do the equivalent with text on my webpage? Perhaps I can label the text with a name the same way as an image has a name? I realise I could turn the text into an image, but that would be slower to load.

Thanks

gil davis

04-02-2003, 06:50 AM

There are a couple of ways you can do this, depending on the browsers you want to support, and how fancy you want to get, and what you want it to look like.

In any CSS capable browser (NS 4+, IE 4+, Mozilla, Opera), you can use two layers that overlap each other - one visible and the other hidden, each with different text. Just change the visibility to appear to swap them.

Or, you could just use one layer and use document.write() to change the text (there are caveats to this - buggy implementation in NS 4, especially in tables).

In IE 4+, NS 6+ and Mozilla, you can use innerHTML to replace the text - similar to document.write().

naomiw

04-02-2003, 07:02 AM

OK - I like the sound of the second option, using document.write(). But how can I control where on the page the write takes place? What I want to happen is that when the mouse moves over a menu item, the picture and text elsewhere on the page changes. So how does the write() function fit with the onMouseOver (or javascript function)? It works for the image because I can refer to document.imagename.src. Do you have any examples you can point me to?

Thanks

gil davis

04-02-2003, 07:48 AM

<head>
<script>
function changeText(txt, obj) {
if (document.layers)
{document.layers[obj].document.write(txt);
document.layers[obj].document.close();}
else
{if (document.getElementById)
{document.getElementById(obj).innerHTML = txt;}
else
{if (document.all)
{document.all[obj].innerText = txt;}
}
}
}
</script>
</head>
<body>
<a href="#" onmouseover="changeText('New text','d1')" onmouseout="changeText('Original text','d1')">change it</a>
<div id="d1" style="position: absolute; top: 100px; left: 100px">Original text</div>
</body>The document.write() did not work as expected in IE. The layer moved.