Mouseover Preview

[bobbabuoy]

I would like to show a preview or description of a link (either in a pop-up or in a frame on the current page) when the user scrolls over the button that links to that page. Any code out there for that?

Thanks!

[David Harrison]

Here's a script that should do just that. Except that the bit that shows/hides the descriptions is CSS not JavaScript, which means that it will work for more people.

There is some JavaScript that comes with this, it is for opening a new window when the user clicks an image. This was originally designed as a pop-up script so I thought that I'd leave that bit in in case you wanted to use it.

Both the CSS and JavaScript have been removed to separate files, this is so that you can use this show/hide and pop-up window effect on all pages quite easily.

//------------ SCRIPT INSTRUCTIONS ------------//

There are a couple of things you should know about the script, this line at the very start, in the onclick event handlers for the links:

onclick="opwin(1,'big','Image 1',7);return false;"

The first number (1 in this case) needs to be the number of the image you are popping up, the first bit of text ('Image 1' in this case) in the single quotes will be the description in the pop-up. The last number (7 in this case) should correspond to the total number of images you will be wanting to pop-up in a new window so that the Previous and Next links are written in the pop-up accordingly.

The names of the images are all systematic and have names like:

thumb1.png and big1.png

You can change the names of the thumb images as long as you remember to change them in the <img src="" as well, but for the big images you will need to change them in the <a href="" of the links and also in the event handlers in the links.

/************* CSS INSTRUCTIONS *************/

By the way, there is a little CSS in style attributes for some div tags, this is just for presentational purposes, no point posting something that works well but looks like a mess. You can feel free to remove those styles but if you do, remember to remove the:

position:absolute;

from the file styles.css as well.

If you are going to use tables in your layouts, remember that there is a structure of elements and classes that needs to be kept in place for the CSS to work properly, if this is too much hassle then I'll post a JavaScript version. The structure goes like this:

<div class="thumbs">

<div><a><img><span></span></a></div>
<div><a><img><span></span></a></div>
<div><a><img><span></span></a></div>

etc...

</div>

It is also possible to position all of the span tags (with position:absolute;) in the same place on the page, because only one can be visible at any one time, this would give the effect of a designated description box on the page.



It may come with many instructions and it may look long and complicated but it's not honest, would I lie to you? ;)
The instructions are so numerous so that you can understand fully what is going on and know how to use it to your full advantage.

[bobbabuoy]

Thanks for the very comprehensive post!

[David Harrison]

Was it a useful post though?

[bobbabuoy]

I haven't had a chance to apply it yet but it looks like exactly what I was looking for so I would say yes it was very usefull! I'll let you know if I have any issues with it. We are rebuilding our site and this is one of the features that I want it to have!

Thanks!

BobbaBuoy

[David Harrison]

Hope it helps. :)