If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

mouse over links - show images

Hi, I am sick of my cheap looking website, but since I don't have money to pay someone, I am going to use html code to build it myself. So far, I've got my home page set up the way I like it, complete with a few anchor tags/links that (when hovered over) turn bold, increase font size, and change color. Really cool looking! They are bundled together and I have four "classes", each "class" changes it's own color or font when moused over.

I want people to be able to hover over my links, without loseing their properties, and for each link hovered, I would like to have an image display (and then not display when the mouse is not hovering), and I would need to adjust the image dimentions and place it in a specific area as well.

I found a code that (kind of) works, but it removes my link properties, so I won't be using it. I'm starting to get a head ache.

Does anyone know a way to mouse over links (and I have a few to hover over) and show images (specific image for each link)and still keep my links.

Thank you so much!
I looked at the examples submitted, and went with this one - I tinkered with it and came up with something I can use -----YAYYY, it does what I want it to do!!!.
NOW (since I'm not real good at this), would you be so kind to clean it up if it needs to be? ....and Thanks!

Hi Mikethepainter,
Looks like you're getting there! Just a few comments. First, you seem to have some extraneous code, such as the duplicated image (same ID and everything -- just delete one of them) plus a block of styles with the #Style selector, which aren't applied to anything.
Also, the first time you rollover the links there is a big delay as the images load. To prevent this, you can preload them in a script somewhere in the <head>. For each image, just create an <img> element and set its 'src' property, as follows

Code:

document.createElement ("img").src = [here put the URL of the image];

You don't need to save the element node that's returned by createElement(). Simply creating it preloads the image and that's all you want.

Hi Mikethepainter,
Looks like you're getting there! Just a few comments. First, you seem to have some extraneous code, such as the duplicated image (same ID and everything -- just delete one of them) plus a block of styles with the #Style selector, which aren't applied to anything.
Also, the first time you rollover the links there is a big delay as the images load. To prevent this, you can preload them in a script somewhere in the <head>. For each image, just create an <img> element and set its 'src' property, as follows

Code:

document.createElement ("img").src = [here put the URL of the image];

You don't need to save the element node that's returned by createElement(). Simply creating it preloads the image and that's all you want.

Yes, I found the duplicates while building onto it, and deleted some other coding that didn't appear to be doing anything anyways. (Keep in mind, I have no idea what I'm doing), but I am thrilled that the coding I have is still working. I am using a real time html edit web page and watching what happens to my work as it is done. It's fun, but it's not as easy as it looks. - Thanks for the response!

Don't forget to preload the images. Once you've shown the images in your own browser, they'll be cached and will display fast, so it's easy to forget that the first time other users hover over a link there might be a long delay before the image appears.

The "var img; ... window.onload..." code is where the global variable 'img' gets declared and initialized. You can see 'img' used later in the 'onmouseover' and 'onmouseout' code.

I got in the habit of including alt="" so that the page will validate at W3C. It's not necessary. 'alt' is intended to provide alternative text if the browser can't display the image (for example, it can't find it).

Target1 and Target2 should be filled in with the URLs of the link targets.

Just put it in a <script> element in the HEAD. BTW, an alternative way to preload an image that you'll see a lot is to use the Image() constructor, so the following two lines of JavaScript are equivalent: