Rollovers - Can this be done without coding?

  • Thread starter Thread starter Sitara Lal
  • Start date Start date
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?
 
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/
 
You do know these pages neither look the same nor work in Netscape 7.1, right?

Craig
 
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.
 
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?
| > >
| > >
|
 
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
 
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
 
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?
| > | > >
| > | > >
| > |
|
 
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?
| > | > | > >
| > | > | > >
| > | > |
| > |
|
 
Things on the web look different to different people, often without any apparent
explanation.

Craig
 
....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?
| > | > | > | > >
| > | > | > | > >
| > | > | > |
| > | > |
| > |
|
 
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...
 
What's to substantiate? I remarked that the page didn't work correctly on my
Netscape 7.1.
 
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!
 
Back
Top