[CS-FSLUG] Html question

Mon Jul 12 11:31:07 CDT 2004

On Monday 12 July 2004 16:27, K Montgomery wrote:
> Jukka,
>
> Not Java, Javascript.  You want to do something like what I have done on
> my (not actively maintained) website -- for example:
> http://www.albany.edu/~keltik/reference.html -- right?
>
> Search Google for "image rollover javascript" and you may find some
> tutorials.  The code I use is below.
>
> I think that to pop up a window on a "mouseover" (hover) would annoy
> your readers if they aren't expecting it.
>
> - Kathy
>
> ------------------------------------------------
> If you look at the source of the URL I cited above, you'll see the
> following in the <HEAD>:
> <SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>
>
> This refers to a separate file called menu.js, which contains the
> following:
>
> <!--// MENU HIGHLIGHTING SCRIPT -- menu.js
>     // "off" or normal graphics are GIFs named according to the NAME in
> the HTML tag.
>     // "on" graphics have the same name with a "2" appended.
>    function on(name)   {
>         document[name].src = "imgs/menu/" + name + "2.gif";
>         return(false);
>    }
>    
>    function off(name)   {
>         document[name].src = "imgs/menu/" + name + ".gif";
>         return(false);
>    }
> <!-- end script -->
>
> Then, I use the following code in the HTML page to call upon the image
> rollover effect:
>
> <a href="computers.html" onMouseOver="on('comp')" onMouseOut="off
> ('comp')"><IMG SRC="imgs/menu/comp.gif" WIDTH="100" HEIGHT="35"
> BORDER="0" ALT="Computers" NAME="comp"></a>
>
> The "on" and "off" functions are described in the menu.js file.  You can
> put the Javascript code in the HTML document itself without using a
> separate file -- but I find that this way is clearer.

Thanks for your tips Kathy!

I tried to use the examples you gave, but there was some problems because the 
document I try to modify is actually just one big image with small imagemaps. 
This far the image I want to display has stayed either visible or invisible 
no matter how I have tried to modify your example. I try to figure this out 
myself, but if you or someone has time to give me suggestions, I'd love to 
hear them :-)

Document that I try to modify:
http://www.ylonen.info/index.html
Html-code for imagemap:
http://www.ylonen.info/imagemap
Png-image that I'd like to show up from the imagemap:
http://www.ylonen.info/example.png

Blessings,
Jukka