Roll over effect

Nino · Mar 2, 2004

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

MD Websunlimited · Mar 2, 2004

What version of FP? FP3 yes FP2/0 no.

Take a look at J-Bots Image components at
http://www.websunlimited.com/order/Product/Image/Image_help_dir.htm

Jim Buyens · Mar 2, 2004

-----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

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)
|/---------------------------------------------------
*----------------------------------------------------

Net55 · Mar 2, 2004

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

Net55 · Mar 3, 2004

FrontPage doesn't do that but there are a few scipts here
that will:
http://www.dynamicdrive.com/dynamicindex14/index.html

Tom Miller · Mar 3, 2004

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

Tom Miller · Mar 3, 2004

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

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

Jim Buyens · Mar 4, 2004

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)
|/---------------------------------------------------
*----------------------------------------------------

Guest · Mar 27, 2004

You said in FP2003, you can do this entirely inside of the GUI? How? I can't find any step-by-step instructions anywhere. Does it have something to do a change property event for the image behavior? I can't figure that one out at all.

Stefan B Rusynko · Mar 27, 2004

Select the image on the page, then use Format Behavior (Insert) Swap Image

--

| You said in FP2003, you can do this entirely inside of the GUI? How? I can't find any step-by-step instructions anywhere. Does
it have something to do a change property event for the image behavior? I can't figure that one out at all.

Guest · Mar 28, 2004

Select the image on the page, then use Format Behavior (Insert) Swap Imag

Can you be a bit more specific as to how that can make an image appear "on a specific point of choosing"? As far as I can tell, that only will make an image appear on the same location as the image the behavior is being applied to. What if I have image A on the left of the page and I want image B to appear on the right of the page, upon a mouseover of picture A

Jim Buyens said that the remote rollover can be done within the Frontpage 2003 GUI. I'd like to know how to do that

Ronx · Mar 28, 2004

See www.rxs-enterprises.com/tests/rollover.htm
--
Ron
Reply only to group - emails will be deleted unread.

BB Iverson said:
Image

Can you be a bit more specific as to how that can make an image appear "on

a specific point of choosing"? As far as I can tell, that only will make an
image appear on the same location as the image the behavior is being applied
to. What if I have image A on the left of the page and I want image B to
appear on the right of the page, upon a mouseover of picture A?

Jim Buyens said that the remote rollover can be done within the Frontpage

2003 GUI. I'd like to know how to do that.

Guest · Mar 28, 2004

Thanks for the help. However, I neglected to mention that my image 1 is an interactive button. I didn't see where to change the location of the image 1, as it is an interactive button, to "javascript:;" so I left that unchanged. I tried to insert it in code view, but it conflicted with the hyperlink of the interactive button

The swap image for image 2 worked great onmouseover, but it didn't change back to the original image 2 onmouseout. The button didn't change back to its original image, either. Could the two onmouseout events be conflicting each other?

Ronx · Mar 28, 2004

See inline below
--
Ron
Reply only to group - emails will be deleted unread.

BB Iverson said:
Thanks for the help. However, I neglected to mention that my image 1 is

an interactive button.

No problem, but may be an issue if you need to edit the button properties.

I didn't see where to change the location of the image 1, as it is an

interactive button, to "javascript:;" so I left that unchanged.

The image needs to be a hyperlink. "javascript:;" is a valid location that
does nothing. Leave the button's hyperlink unchanged.

I tried to insert it in code view, but it conflicted with the hyperlink of the interactive button.

The swap image for image 2 worked great onmouseover, but it didn't change

back to the original image 2 onmouseout.

If this is my example, that was intentional - just change the onmouseout
image location to that of the original Image 2.

The button didn't change back to its original image, either. Could the two

onmouseout events be conflicting each other?

It's possible - but does not happen in my tests. See
www.rxs-enterprises.com/tests/rollover.htm (revised)

Guest · Mar 29, 2004

So, what is the fix for this? How can I work around not affecting the button's images, but having the remote rollover image show up upon mouseover (elsewhere on the page) and go away upon mouseout?

Ronx · Mar 29, 2004

So, what is the fix for this?

Fix for what? If you quoted the post you are responding to it makes it
easier to answer.

How can I work around not affecting the button's images, but having the

remote rollover image show up upon mouseover (elsewhere on the page) and go
away upon mouseout?

There is an example of this on www.rxs-enterprises.com/tests/rollover.htm
where a remote image is swapped with another when an Interactive Button is
moused over, and the original image replaced on mouseout.
If you want the image to appear and disappear altogether, then you are going
into the world of layers and absolute positioning, which may be easy or
difficult depending on your page construction, and your target audience's
choice of operating system, browser size and/or screen resolution.

Guest · Mar 29, 2004

Your revised test did the trick! It works like a charm. That process should be added to all help docs for Frontpage 2003. I couldn't find anything like it elsewhere. Thanks a bunch!

Hyperlink Rollover Effects	4	Mar 31, 2006
can I add a screen tip without a hyperlink to something?	2	Jul 2, 2007
Creating remote rollovers	3	Aug 21, 2009
i only get one image saved after creating interactive buttons	4	Jan 31, 2007
Formatting text differently on the same page	1	Oct 23, 2005
annoying screen flicker during rollovers	7	Sep 11, 2008
Rollover Hyperlink Effects	3	Nov 11, 2003
How to create a mouse over effect	4	May 28, 2008

Roll over effect

Nino

MD Websunlimited

Jim Buyens

Net55

Net55

Tom Miller

Tom Miller

Jim Buyens

Guest

Stefan B Rusynko

Guest

Ronx

Guest

Ronx

Guest

Ronx

Guest

Ask a Question

Similar Threads