Change image on mouse-over

P

Pete

Is there an easy way to change a remote image on a mouse-over. I have
created a menu (hyper-linked text) and would like to creaste an image in
another frame that will change whenever I mouse over items on the menu. I am
creating my first website and would appreciate any help.
 
T

Trevor Lawrence

Pete said:
Is there an easy way to change a remote image on a mouse-over. I have
created a menu (hyper-linked text) and would like to creaste an image in
another frame that will change whenever I mouse over items on the menu. I
am
creating my first website and would appreciate any help.
--

Yes, with JavaScript

But the image does not need to be in a frame - just place it in a cell of a
table.

I can look for some code to do this, but you will need to use the Code/HTML
view of FrontPage. OK with you ?
 
T

Trevor Lawrence

Trevor Lawrence said:
I can look for some code to do this, but you will need to use the
Code/HTML view of FrontPage. OK with you ?

Here is some code whcih uses an absolutely postioned <div> for the image,
rather than a table cell.

The key part is;
onmouseover="hideit('layer1');setImage('layer1',
'<img src = \'images\\12.jpg\'>');"
onmouseout="hideit('layer1');"

This can be added to your menu item. To get different images for diffrent
items, change the image name on each menu item


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is the page</title>
<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\\12.jpg\'>');"
onmouseout="hideit('layer1');" >
Some English text</a>
</body>
</html>
 
A

Andrew Murray

Yes. In Frontpage 2003 you do that with either Behaviours using your own
images or with Interactive Buttons (using the pre-design buttons, or your
own images).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top