text hyperlink mouseover shows picture

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

 

[Murray]

Google "overlib". You can put images into the 'popup' this will give you.

 

[Guest]

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.

 

[Murray]

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.

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?

 

[Guest]

It is fixed width centered. www.taratechnologies.com

 

[Murray]

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?

 

[Guest]

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.

 

[Murray]

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?

 

[Guest]

How would this work to show the picture of the product?

 

[Murray]

Like this -

http://murraytestsite.com/FP/FP-slideshow.html

 

[Guest]

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

 

[Murray]

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!