mouse over buttons

  • Thread starter Thread starter James E Middleton
  • Start date Start date
J

James E Middleton

I would like to create mouse over buttons or links that behave as follows:

The button text is in English, when moused over, shows the Japanese
translation. Is this possible with FP2003 interactive buttons, or do I need
to do this with a 3rd party (hopefully free) applet?
 
James said:
I would like to create mouse over buttons or links that behave as
follows:
The button text is in English, when moused over, shows the Japanese
translation. Is this possible with FP2003 interactive buttons, or do
I need to do this with a 3rd party (hopefully free) applet?
Click to expand...

Is this any different from any mouseover?

That is, put the English text on the button and then have an onmouseover to
display the Japanese (I would think an image file would be best.)

Not an interactive button, but just a simple button
<input type="button" value="English text" onmousoever="japtext()" />
where japtext() is a Javascript function which displays an image file with
the Japanese text

I haven't tried this at all and it is possible I may not have given enough
explanation.

If you need more, I can try to put some code together.
 
Thanks,

I'l give your suggestion a shot. Not being an expert, I'll probably get
stuck somewhere along the line...

I'll post back and let you know in a day or two.

Regards,

Jim
 
James said:
Thanks,

I'l give your suggestion a shot. Not being an expert, I'll probably
get stuck somewhere along the line...

I'll post back and let you know in a day or two.
Click to expand...

Jim,
Here is an example of what I mean by using onmouseover to display an image.

This has the disadvantage (or it could be an advantage) that the image
always appears in the same place. It is sized at 100px X 25px and positioned
at 200px from left, 30px from top.

There are ways of ensuring that the <div> with the image follows the mouse
cursor (like a tooltip). This is a little more complex, but I have tested it
and it works. If you want this feature, I will post the code.

<html>
<head>
<script language="JavaScript">
function hideit(elid)
{
var e = document.getElementById(elid).style
e.display = (e.display != 'block') ? "block" : "none"
}
function setImage(id,txt)
{ document.getElementById(id).innerHTML = txt }
</script>
</head>
<body>
<div id="layer1"
style="position: absolute; width: 100px; height: 25px;
z-index: 1; left: 200px; top: 30px;
font-family: verdana,arial,sans-serif;
font-size: 14px; font-color: black;
border: solid black 1px; display: none;">
</div>
<a href="#" onmouseover="hideit('layer1');setImage('layer1',
'<img src = \'images\\yellbox.gif\'>');"
onmouseout="hideit('layer1');">
Some English text</a>
</body>
</html>

Note that in this parameter '<img src = \'images\\yellbox.gif\'>');"
the extra slashes ( \ ) are necessary, i.e. \' not ' and \\ not \
A file 'images\anyfile.gif' has to be entered as \'images\\anyfile.gif\'

You will need to create the image file containing the Japanese text and and
use it instead of 'yellbox.gif' (which was just a file I used for testing).
If this image file is greater in size than 100px X 25 px, then adjust the
width and height in <div id ="layer1" ..> to its size.

I'll be interested to see how you progress.
 
Back
Top