text hyperlink mouseover shows picture

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Is there a way to have a regular text hyperlink and also have the function of
a picture showing when the mouse is moved over the link. Course they still
need the hyperlink ability. I really don't want to use a picture link. I
experimented with this and when you move the mouse over the link it seems to
resize things and jump alot.
 
I will look at this, but I am looking for a purely front page solution (if
there is one)rather than have to implement a javascript.
 
I will look at this, but I am looking for a purely front page solution (if
there is one)rather than have to implement a javascript.
Click to expand...

How many 'popup' things do you want to have?

How is your site built? Is it fixed width and centering, or fixed width and
left aligned, or flexible?
 
How many 'popup' things do you want to have?

???

And, is this only on one page?

And, what will trigger the popups - text or images?
 
Depends on the page. They want to have a listing of their products (could be
as many as 20 +) that when you mouseover shows a image of the product and
then they customer would be linked to the information page for that
productwhen they click.
 
So, why not have a list of products down the side of the page, and use the
Set Text of Layer to load a single layer with the desired product
information for each list element?
 
I have not used layers hardly at all, so I am going to try and figure out how
this works. Do you know of any helpful links the detail how this is set up?
Thanks
 
Do you know of any helpful links the detail how this is set up?

Not really. Here's how I did it, though -

1. I put those 5 thumbs into individual paragraphs, one above the other.
That places them along the left margin of the page.
2. I put a layer on the page in the location you see -

<div id="layer1"><p>Watch this space as you mouseover the thumbs.</p></div>
3. I selected the first thumb, and inserted FP's Behavior with Set Text >
Set Text of Layer
4. In the dialog panel for this behavior, I selected "layer1" and then I
entered the following image tag -

<img src"/FP/images/cordogl2.jpg" width"300" height="301">

When I clicked OK, the behavior was applied to the thumbnail image as
follows -

<a href="javascript:;" onMouseOver="FP_setLayerText(/*id*/'layer1', '&lt;img
src=&quot;/FP/images/cordogl2.jpg&quot; width=&quot;300&quot;
height=&quot;301&quot;&gt;')" onFocus="FP_setLayerText(/*id*/'layer1',
'&lt;img src=&quot;images/cordogl2.jpg&quot; width=&quot;300&quot;
height=&quot;301&quot;&gt;')">

5. In turn, I selected each remaining thumb and applied the STOL behavior,
specifying a different image each time.

As they say, bada bing, bada boom. What you see there is the result.

Now - you do have to know a little about HTML to get the image tags right.
And you need to know a little about CSS to use the layer properly (go here
for some hints - http://www.great-web-sights.com/g_layerlaws.asp).

Good luck!
 
Back
Top