[CS-FSLUG] Html question

Mon Jul 12 08:27:08 CDT 2004

On Sun, 2004-07-11 at 16:38 +0300, Jukka Y wrote:
> On Sunday 11 July 2004 16:02, David M. wrote:
> > On Sunday 11 July 2004 07:21 am, Jukka Y wrote:
> > > Could anyone tell me how to make imagemap which triggers alternative
> > > image or small pop-up window when someone "hoovers" over some area on
> > > page (I'd like to put some scriptures and/or pictures behind those green
> > > "tiles" in the center of my homepage)? Is there any good tutorials for
> > > this? I have not done much html before...
> >
> > You can't accomplish this with HTML. to accomplish this, you'll have to
> > look into Javascript or Macromedia Flash to name a couple. I think
> > Javascript is mostly used, but i've seen quite a few sites using flash for
> > this.
> 
> Bad news (for me..). I do not have a glue of java and only what I have done 
> with flash was editing some others works. You don't happen to know any easy 
> tutorials for this?
> 
> Blessings,
> Jukka

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.