to answer your question, its pretty easy, you don't even need to use frontpage if you know some basic html and javascripts..
first the graphics part, let's label them:
"A" Section we have your logos (any size you want)
"B" Section we have your logos when your mouse is over them
(size should be consistent in corresponding images with Group "A")
"C" Section is the text that comes up when you put your mouse over the logos (keep this size consistent in ALL)
In the "C" Section, you should remember to create a blank.gif file which is the same size. I say gif, so that you make the whole image transparent.
That's with the graphics aspect. Now with the coding:
In your Head Tag, you might want to preload the images which you don't automatically see:
function doPreload()
{
var the_images = new Array('blank.gif','B1.jpg','B2.jpg','B3.jpg',
'C1.jpg','C2.jpg','C3.jpg');
preloadImages(the_images);
}
function preloadImages(the_images_array) {
for(loop = 0; loop < the_images_array.length; loop++)
{
var an_image = new Image();
an_image.src = the_images_array[loop];
}
}
*************
in your body tag add:
onLoad="doPreload();"
*************
so you have A1, A2, A3 somewhere in your code in between your body tags (and your blank.gif):
Whereever your blank.gif is located, give it a name (blank is good... :D)
<img src="blank.gif" name="blank">
For each mouseover, you can do this:
<a href="yourlink.html" onMouseOver="document.ONE.src='B1.jpg';document.blank.src='C1.gif';" onMouseOut="document.ONE.src='A1.jpg';document.blank.src='blank.gif';"><img src="A1.jpg" name="ONE" border="0"></a>
and so on.
This should work.
Remember to change the name attribute for each one, otherwise multiple ones would change. The blank name is common so that the text is changed in the same area.
Later
Duniyadnd