Mouseover for photo showing text with link to full page bio

  • Thread starter Thread starter Maureen
  • Start date Start date
M

Maureen

Hi, Can anyone recommend the best way to do this in FP03? I have tried the
behaviors but don't see where I can get a small, clean small white screen
with a paragraph of text (then maybe a Learn More link to a more full-blown
page). Thanks for any suggestions to do it in FP or for an easy script I can
buy as I am not a programmer.
 
Hi

Maureen

You could a layer to your page. Set the layer background as white. Insert
the text into that (or insert a table into the layer and then insert the text.

The good thing about doing it this way is that you can add a behaviour to
something on your screen to make the layer visible or not (set the layer to
visible = no to start with). A good idea would be to add a large X in the
top courner of the lay and use that to hide the layer (set the visible = no
behavious on click of this X)

Good look with your project.
 
Two changes:

First, change
<td width="216" style="border-top-style: none; border-top-width: medium;
text-align:center">
<div style="position: absolute; width: 213px; height: 146px; z-index: 1;

to

<td width="216" style="border-top-style: none; border-top-width: medium;
text-align:center">
<div style="position:relative;">
<div style="position: absolute; width: 213px; z-index: 1;

And change

</td> to </div></td>
This will fix the position of the layer relative to the image, rather
than relative to the top left of the browser. Any changes in browser
width or font size instigated by the user will cause the layer to appear
to move around the page if this change is not made.

Also notice I removed the height attribute from the layer. If you
restrict the height then, if the user changes the text size (and users
will do this) the text will either overlap text lower down the page, or
the text will be cut off - either way it will be unreadable.


2nd change:

Add a link to the layer text that closes (hides) the layer, and remove
the onmouseout from the image. The problem here is that when you hover
over the image the layer opens and effectively you have moused out from
the image, closing the layer - and hence the flicker.

Change:

<a href="javascript:;">
<img border="0" src="../speakers/steve.jpg" width="216" height="287"
style="cursor: pointer"
onmouseover="FP_changeProp(/*id*/'layer1',0,'style.visibility','visible')"
onmouseout="FP_changePropRestore()"></a>

to

<a href="javascript:;">
<img border="0" src="../speakers/steve.jpg" width="216" height="287"
style="cursor: pointer"
onmouseover="FP_changeProp(/*id*/'layer1',0,'style.visibility','visible')"></a>

And add a link to the layer text, similar to:

<a href="javascript:;"
onclick="FP_changeProp(/*id*/'layer1',0,'style.visibility','hidden')"
Close this window</a>
Click to expand...
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp
 
Thank you. Two questions: Which </td> are you referring to (to change to
</div></td>? Is it possible to do what you are saying in FP (vice looking at
the code)? I know I can get rid of the mouse out affect but doesn't that
force the person to close the window only - not go to another page? Or are
you saying to have them close the window or go to another page?
 
The </td> is the one corresponding to the
<td width="216" style="border-top-style: none; border-top-width: medium;
text-align:center">
<div style="position: absolute; width: 213px; height: 146px; z-index: 1;
This cell contains the layer.

The close window link is required since there is no other way to close
it. It will be in addition to the link to a new page.

The new link can be added in design view, using a behaviour on the link
to hide the layer.
The relatively positioned div can also be added in Design View:

Make sure you have the layers task bar and the quick tag selector
showing.
View->Task Pane , then select Layers from the drop-down at the top of
the Task Pane.
View->Quick Tag Selector

The Quick Tag Selector shows where you are in the tags used in the page,
and if you are currently editing a table cell will show something like:

<body> <table> <tr> <td>


Use the task pane to select the layer.
On the Quick Tag Bar, Click the (highlighted) <div>, then click the down
arrow that appears.
Click Wrap Tag on the menu
In the Quick Tag Editor box that appears, type
<div style="position:relative"> (the angle brackets will already be
there)
Click the green checkmark
Click anywhere in the design pane.

If you look at code view, or do this in Split View, you will see the
code has changed correctly, including the </div> being put in place
before the </td>.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp
 
Back
Top