Getting image to appear when passing over plain (non-hyper) text.

[Haldrik]

Hello Everyone:
I'm a total newbie at javascript stuff and I was wondering if someone could direct me towards a proper solution to my problem. I run a language learning website that uses simple text dialogs (no frames or tables). I want to be able to make some words in the text appear in a certain color (say green) and when the learning passes the cursor over these words (say "typewriter") then a picture of the object appears in that exact spot (or say 100 pixels to the right). My pics have various sizes, but I could fix them to a single dimension if that would be best. Also, I've seen several scripts that do similar things, but not exactly what I need for the following reasons:
Image in a popup window: dont want popup windows (just instant popup image!)
Image appears in another cell of the table: not using tables
Graphic magnifying scripts: there's initially NO graphics on the page to serve as thumbnails.
Mouseover changes standard picture: this would be ok, but the picture stays in the same place, so once the user has scolled down the page to read the rest of the dialogue, the original (changing) image has already scrolled off the top and is no longer visible.
(Image pre-loading would be a plus!)
Sorry that message was so long, but I didn't want you guys to think I hadn't done any homework on this issue!
Any help appreciated!

[Moby_Dim]

ok, the adjusting of all images dimensions to equal is the must imho. After this I'd make the following may be: if an average page size is larger than 1 screen, it'd be reasonable to design'em so you have some free vertical space to display images. e.g. let the right side of the page (~100-120px width) be free of text. Then make the image container : e.g.: <img id="img_cont"... and make it positioned like this : position : fixed; top : 10px; right : 10px; Make dummy image - a transparent one and make it be the initial source when you load the page. Then create onmouseover event handler for your words - let it show a corresponding image, changing the src attribute of the container. If you scroll the page, the container will be always visible, and the image will be the same till you trigger mouseover of another word. Seems simple and useful ;)

And welcome to WebmasterWorld.

[Moby_Dim]

btw - i've missed that ie is not good about fixed positioning. Well, use known ie hacks then (or expression(...) to re-define position and top css properties for IE.) Should work fine in IE,Opera, and FF too.