Rollovers - Can this be done without coding?

S

Sitara Lal

I have a table with 2 columns. The left column has a number of lines of
text, each line being an unique phrase (almost like a vertical menu). The
right column is meant to contain images.

When a user hovers over a line of text on the left column, I would like a
corresponding image to be displayed in the right column.

Is there any way to achieve this in FP2003 without using any custom (hand)
coding?
 
B

Bill Somogyi

The Swap Image Behavior is real easy to use, requires no hand coding and
should suite your needs perfectly. You can access it through the
Format/Behaviors menu.

Both of the examples below were created with the swap image behavior to show
examples to some kids I teach.

http://frontpagesolutions.com/_clean/test/interactivebuttons/1.htm
http://frontpagesolutions.com/_clean/tutorials/images/4/index.htm


--
Have Fun Bill

RealDraw Cafe
http://realdrawcafe.com
PhotoFiltre Tips'n Tricks
http://frontpagesolutions.com/photofiltre/
 
C

Craig Schiller

You do know these pages neither look the same nor work in Netscape 7.1, right?

Craig
 
S

Sitara Lal

Thanks Bill, for the prompt response. I had looked at FP's Swap Image
Behavior, but it seems to swap the images into the same space, whereas I
need the new image to appear at a different location (like in the second URL
cited in your above message). How can I achieve that without any extra
coding?

Also, your examples (a) require clicking (first sample URL) whereas I want a
mouseover (b) the mouseover in the second URL (left panel) is on an image,
whereas I want to be able to swap by using mouseover on text.

How does one get around these two problems?

Also, I do not seem to be able to insert any behaviors by selecting text.
When I select some text and then choose Format | Behaviors from the FP menu,
the Insert option in the Behavior panel is greyed out. Insert works fine
when an object (e.g. an image) is selected instead of text.
 
T

Tom Pepper Willett

The both work just fine for me in NS 7.2
--
===
Tom "Pepper" Willett
Microsoft MVP - FrontPage
---
About FrontPage 2003:
http://office.microsoft.com/home/office.aspx?assetid=FX01085802
===
| You do know these pages neither look the same nor work in Netscape 7.1,
right?
|
| Craig
|
| Bill Somogyi wrote:
|
| > The Swap Image Behavior is real easy to use, requires no hand coding and
| > should suite your needs perfectly. You can access it through the
| > Format/Behaviors menu.
| >
| > Both of the examples below were created with the swap image behavior to
show
| > examples to some kids I teach.
| >
| > http://frontpagesolutions.com/_clean/test/interactivebuttons/1.htm
| > http://frontpagesolutions.com/_clean/tutorials/images/4/index.htm
| >
| > --
| > Have Fun Bill
| >
| > RealDraw Cafe
| > http://realdrawcafe.com
| > PhotoFiltre Tips'n Tricks
| > http://frontpagesolutions.com/photofiltre/
| >
| > | > >I have a table with 2 columns. The left column has a number of lines of
| > > text, each line being an unique phrase (almost like a vertical menu).
The
| > > right column is meant to contain images.
| > >
| > > When a user hovers over a line of text on the left column, I would
like a
| > > corresponding image to be displayed in the right column.
| > >
| > > Is there any way to achieve this in FP2003 without using any custom
(hand)
| > > coding?
| > >
| > >
|
 
C

Chuck Davis

Craig Schiller said:
You do know these pages neither look the same nor work in Netscape 7.1,
right?

Craig
Click to expand...
I saw no difference in IE 6, Opera 8, Netscape 7.1 or Firefox 1.0
 
C

Craig Schiller

Well, they don't in 7.1. The links in 7.1 appear as text links, for one thing.
 
S

Sitara Lal

Ron,

Perhaps due to my innate stupidity I am having some difficulty in following
your otherwise succint instructions: How do I apply the swap image behavior
to a hyperlink?

This is what I am doing - after selecting the text (which is hyperlinked to
<a
href="javascript:;"> etc) when I go to Behavior panel and select the Swap
Images option, I only get a list of other images on the document and not
this hyperlink. So how can I attach the Swap Images behavior to this
hyperlink?

SL
 
T

Tom Pepper Willett

Not according to another poster who replied to your message.
--
===
Tom "Pepper" Willett
Microsoft MVP - FrontPage
---
About FrontPage 2003:
http://office.microsoft.com/home/office.aspx?assetid=FX01085802
===
| Well, they don't in 7.1. The links in 7.1 appear as text links, for one
thing.
|
| Tom Pepper Willett wrote:
|
| > The both work just fine for me in NS 7.2
| > --
| > ===
| > Tom "Pepper" Willett
| > Microsoft MVP - FrontPage
| > ---
| > About FrontPage 2003:
| > http://office.microsoft.com/home/office.aspx?assetid=FX01085802
| > ===
| > | > | You do know these pages neither look the same nor work in Netscape
7.1,
| > right?
| > |
| > | Craig
| > |
| > | Bill Somogyi wrote:
| > |
| > | > The Swap Image Behavior is real easy to use, requires no hand coding
and
| > | > should suite your needs perfectly. You can access it through the
| > | > Format/Behaviors menu.
| > | >
| > | > Both of the examples below were created with the swap image behavior
to
| > show
| > | > examples to some kids I teach.
| > | >
| > | > http://frontpagesolutions.com/_clean/test/interactivebuttons/1.htm
| > | > http://frontpagesolutions.com/_clean/tutorials/images/4/index.htm
| > | >
| > | > --
| > | > Have Fun Bill
| > | >
| > | > RealDraw Cafe
| > | > http://realdrawcafe.com
| > | > PhotoFiltre Tips'n Tricks
| > | > http://frontpagesolutions.com/photofiltre/
| > | >
| > | > | > | > >I have a table with 2 columns. The left column has a number of
lines of
| > | > > text, each line being an unique phrase (almost like a vertical
menu).
| > The
| > | > > right column is meant to contain images.
| > | > >
| > | > > When a user hovers over a line of text on the left column, I would
| > like a
| > | > > corresponding image to be displayed in the right column.
| > | > >
| > | > > Is there any way to achieve this in FP2003 without using any
custom
| > (hand)
| > | > > coding?
| > | > >
| > | > >
| > |
|
 
T

Tom Pepper Willett

Would you be kind enough to explain that?
--
===
Tom "Pepper" Willett
Microsoft MVP - FrontPage
---
About FrontPage 2003:
http://office.microsoft.com/home/office.aspx?assetid=FX01085802
===
| And therein lies the paradox of the Web.
|
| Tom Pepper Willett wrote:
|
| > Not according to another poster who replied to your message.
| > --
| > ===
| > Tom "Pepper" Willett
| > Microsoft MVP - FrontPage
| > ---
| > About FrontPage 2003:
| > http://office.microsoft.com/home/office.aspx?assetid=FX01085802
| > ===
| > | > | Well, they don't in 7.1. The links in 7.1 appear as text links, for
one
| > thing.
| > |
| > | Tom Pepper Willett wrote:
| > |
| > | > The both work just fine for me in NS 7.2
| > | > --
| > | > ===
| > | > Tom "Pepper" Willett
| > | > Microsoft MVP - FrontPage
| > | > ---
| > | > About FrontPage 2003:
| > | > http://office.microsoft.com/home/office.aspx?assetid=FX01085802
| > | > ===
| > | > | > | > | You do know these pages neither look the same nor work in Netscape
| > 7.1,
| > | > right?
| > | > |
| > | > | Craig
| > | > |
| > | > | Bill Somogyi wrote:
| > | > |
| > | > | > The Swap Image Behavior is real easy to use, requires no hand
coding
| > and
| > | > | > should suite your needs perfectly. You can access it through
the
| > | > | > Format/Behaviors menu.
| > | > | >
| > | > | > Both of the examples below were created with the swap image
behavior
| > to
| > | > show
| > | > | > examples to some kids I teach.
| > | > | >
| > | > | >
http://frontpagesolutions.com/_clean/test/interactivebuttons/1.htm
| > | > | >
http://frontpagesolutions.com/_clean/tutorials/images/4/index.htm
| > | > | >
| > | > | > --
| > | > | > Have Fun Bill
| > | > | >
| > | > | > RealDraw Cafe
| > | > | > http://realdrawcafe.com
| > | > | > PhotoFiltre Tips'n Tricks
| > | > | > http://frontpagesolutions.com/photofiltre/
| > | > | >
| > | > | > | > | > | > >I have a table with 2 columns. The left column has a number of
| > lines of
| > | > | > > text, each line being an unique phrase (almost like a vertical
| > menu).
| > | > The
| > | > | > > right column is meant to contain images.
| > | > | > >
| > | > | > > When a user hovers over a line of text on the left column, I
would
| > | > like a
| > | > | > > corresponding image to be displayed in the right column.
| > | > | > >
| > | > | > > Is there any way to achieve this in FP2003 without using any
| > custom
| > | > (hand)
| > | > | > > coding?
| > | > | > >
| > | > | > >
| > | > |
| > |
|
 
C

Craig Schiller

Things on the web look different to different people, often without any apparent
explanation.

Craig
 
T

Tom Pepper Willett

....and you still can't substantiate what you are talking about?

--
===
Tom "Pepper" Willett
Microsoft MVP - FrontPage
---
About FrontPage 2003:
http://office.microsoft.com/home/office.aspx?assetid=FX01085802
===
| Things on the web look different to different people, often without any
apparent
| explanation.
|
| Craig
|
| Tom Pepper Willett wrote:
|
| > Would you be kind enough to explain that?
| > --
| > ===
| > Tom "Pepper" Willett
| > Microsoft MVP - FrontPage
| > ---
| > About FrontPage 2003:
| > http://office.microsoft.com/home/office.aspx?assetid=FX01085802
| > ===
| > | > | And therein lies the paradox of the Web.
| > |
| > | Tom Pepper Willett wrote:
| > |
| > | > Not according to another poster who replied to your message.
| > | > --
| > | > ===
| > | > Tom "Pepper" Willett
| > | > Microsoft MVP - FrontPage
| > | > ---
| > | > About FrontPage 2003:
| > | > http://office.microsoft.com/home/office.aspx?assetid=FX01085802
| > | > ===
| > | > | > | > | Well, they don't in 7.1. The links in 7.1 appear as text links,
for
| > one
| > | > thing.
| > | > |
| > | > | Tom Pepper Willett wrote:
| > | > |
| > | > | > The both work just fine for me in NS 7.2
| > | > | > --
| > | > | > ===
| > | > | > Tom "Pepper" Willett
| > | > | > Microsoft MVP - FrontPage
| > | > | > ---
| > | > | > About FrontPage 2003:
| > | > | >
http://office.microsoft.com/home/office.aspx?assetid=FX01085802
| > | > | > ===
| > | > | > | > | > | > | You do know these pages neither look the same nor work in
Netscape
| > | > 7.1,
| > | > | > right?
| > | > | > |
| > | > | > | Craig
| > | > | > |
| > | > | > | Bill Somogyi wrote:
| > | > | > |
| > | > | > | > The Swap Image Behavior is real easy to use, requires no
hand
| > coding
| > | > and
| > | > | > | > should suite your needs perfectly. You can access it
through
| > the
| > | > | > | > Format/Behaviors menu.
| > | > | > | >
| > | > | > | > Both of the examples below were created with the swap image
| > behavior
| > | > to
| > | > | > show
| > | > | > | > examples to some kids I teach.
| > | > | > | >
| > | > | > | >
| > http://frontpagesolutions.com/_clean/test/interactivebuttons/1.htm
| > | > | > | >
| > http://frontpagesolutions.com/_clean/tutorials/images/4/index.htm
| > | > | > | >
| > | > | > | > --
| > | > | > | > Have Fun Bill
| > | > | > | >
| > | > | > | > RealDraw Cafe
| > | > | > | > http://realdrawcafe.com
| > | > | > | > PhotoFiltre Tips'n Tricks
| > | > | > | > http://frontpagesolutions.com/photofiltre/
| > | > | > | >
message
| > | > | > | > | > | > | > | > >I have a table with 2 columns. The left column has a number
of
| > | > lines of
| > | > | > | > > text, each line being an unique phrase (almost like a
vertical
| > | > menu).
| > | > | > The
| > | > | > | > > right column is meant to contain images.
| > | > | > | > >
| > | > | > | > > When a user hovers over a line of text on the left column,
I
| > would
| > | > | > like a
| > | > | > | > > corresponding image to be displayed in the right column.
| > | > | > | > >
| > | > | > | > > Is there any way to achieve this in FP2003 without using
any
| > | > custom
| > | > | > (hand)
| > | > | > | > > coding?
| > | > | > | > >
| > | > | > | > >
| > | > | > |
| > | > |
| > |
|
 
B

Bill Somogyi

Sorry Sitara, I was in a hurry when I posted and didn't explain better.

1st off a couple points:

1) Unless you want to get into hand coding you will need to resize all the
images you want to use in your image menu to the same dimensions otherwise
there will be distortion.

2) Not knowing exactly what you want to do I can only assume and will
address the issue below:
This is what I am doing - after selecting the text (which is hyperlinked
to
<a
href="javascript:;"> etc) when I go to Behavior panel and select the Swap
Images option, I only get a list of other images on the document and not
this hyperlink. So how can I attach the Swap Images behavior to this
hyperlink?
Click to expand...

By selecting the text you have already attached the behavior to the text.
The #null link or (javascript link) is nothing more than a way to show the
viewer that it is a link and it also creates the hand cursor when they hover
over the link. Now if you want the Link to be clickable to another page you
would naturally just put a regular link instead of the #null link. An
example of this usage may be: you are showing a product catalogue, the image
shows when you hover, and then a new page opens with specs and more images
when you click.

So you are correct you only see images which is what you want to swap. Just
select the image you want swapped from the list, browse to the image you
want to show and then select "Restore if you want the original image back.

BTW: You don't have to use a link if you don't want to, just make sure you
have instructions on the page that tells the viewer if they mouse-over they
will see more images.

--
Have Fun Bill

RealDraw Cafe
http://realdrawcafe.com
PhotoFiltre Tips'n Tricks
http://frontpagesolutions.com/photofiltre/




Sitara Lal said:
Ron,

Perhaps due to my innate stupidity I am having some difficulty in
following
your otherwise succint instructions: How do I apply the swap image
behavior
to a hyperlink?

This is what I am doing - after selecting the text (which is hyperlinked
to
<a
href="javascript:;"> etc) when I go to Behavior panel and select the Swap
Images option, I only get a list of other images on the document and not
this hyperlink. So how can I attach the Swap Images behavior to this
hyperlink?

SL
Click to expand...
 
C

Craig Schiller

What's to substantiate? I remarked that the page didn't work correctly on my
Netscape 7.1.
 
G

Guest

Yeah, it's possible. I can give an example for the left-hand and right-hand
columns.

Left-hand side:

<br><input readonly value="Butterfly"
style="border : 1px solid blue;background : lime"
onclick="image.src = 'http://images.picsearch.com/is?217739614193'"
onblur="image.src = ''">

<br><input readonly value="Rabbit"
style="border : 1px solid blue;background : lime"
onclick="image.src = 'http://images.picsearch.com/is?376153042708'"
onblur="image.src = ''">

<hr>

Right-hand side:

<img name="image" src="">

You don't have to use any javascripting either!
 

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

Similar Threads

Formatting of columns 4
Can this be done with coding? 4
Change a DBRW custom query 3
lining up text without tables 13
What is beige space created when moving layout template borders? 1
Autogroup then sum - can it be done? 5
Can this be done in FrontPage 3
Indenting causes my text to disappear.. help! 3

Top