Roll over effect

N

Nino

I looking to make a rollover through a link in which it will make a picture
appear on a specific point of my choosing on the page.Can this be done with
FrontPage.

Thanks

Nino
 
J

Jim Buyens

-----Original Message-----
I looking to make a rollover through a link in which it
will make a picture appear on a specific point of my
choosing on the page.Can this be done with FrontPage.

Thanks

Nino
Click to expand...

The Behaviors feature in FrontPage 2003 can do this
entirely through the GUI.

If you have an earlier version, try this:

First, switch to HTML view and add a name= attribute to
the picture you want to change. For example:

<img src="lark1.jpg" name="rovpic">

Then, add a script to your <head> section such as:

<script language="JavaScript">
var rov1 = new Image(); rov1.src = "images/lark1.jpg"
var rov2 = new Image(); rov2.src = "images/lark2.jpg"
</script>

where images/lark.jpg and images/lark2.jpg are the two
different picture versions you want.

Finally, surround the mouse-sensitive content with a
hyperlink such as the following:

<a href="javascript:;"
onmouseover="document.rovpic.src = eval('rov2.src');"
onmouseout="document.rovpic.src = eval('rov1.src');">
Your content goes here.</a>

Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------
 
N

Net55

Goto -View toolbars - dhtml effects check it. Insert a
picture - left click it once then choose on the dhtm bar
drop down - choose an event - on mouse over - choose an
effect - swap picture - choose settings - choose picture -
browse to picture in your web. Note: both images should
already be in your web
 
T

Tom Miller

Jim,
You gave an excellent answer except for 1 point. "...a picture appear on a
specific point of my choosing..." Unless I am completely confused, the
JavaScript you wrote changes the image at the site of the button, whereas
they want it to change at an arbitrary location. I'd swear I saw a way to
do it in a JavaScript class but I am still learning...

Respectfully,
Tom Miller, A+, CNA5.1
 
T

Tom Miller

Net55 said:
Goto -View toolbars - dhtml effects check it. Insert a
picture - left click it once then choose on the dhtm bar
drop down - choose an event - on mouse over - choose an
effect - swap picture - choose settings - choose picture -
browse to picture in your web. Note: both images should
already be in your web
Click to expand...
I have used what you have suggested and really like it. But how do you make
it "....appear on a specific point of my choosing .."?

Respectfully,
Tom Miller, A+, CNA5.1
 
J

Jim Buyens

No, the <img> tag can be wherever you want it to be, and the tag that
contains the onmouseover and onmouseout attributes can be wherever you
want it to be.

Here's a complete page.

<html>
<head>
<title>Remote Rollover</title>
<script language="JavaScript">
var rov1 = new Image(); rov1.src = "../images/onion.gif"
var rov2 = new Image(); rov2.src = "../images/onion2.gif"
</script>
</head>
<body>
<p><img src="../images/onion.gif" name="rovpic" width="56"
height="61"></p>
<p>Other content goes here.</p>
<p><a href="javascript:;"
onmouseover="document.rovpic.src = eval('rov2.src');"
onmouseout="document.rovpic.src = eval('rov1.src');">
Rollover trigger goes here.</a></p>
</body>
</html>


Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------
 
Top