Freepages-Help-L Archives

Archiver > Freepages-Help > 2005-10 > 1129466199


From: Ken McInnes <>
Subject: Re: [FreeHelp] How do I make this?
Date: Sun, 16 Oct 2005 22:39:26 +1000


Referring to the example webpage at <http://www.public.asu.edu/~putti/#>;

Firstly, the page uses a simple anchor around an image <.a
href="..."><.img src="..." alt="..." title="..." /><./a> to link to the
later pages. (The links then use javascript to 'pop-up' new windows
which is another issue.)

Secondly, the page uses a javascript effect to change the image
'onmouseover'.
The 'text' items in the example ('Resume', 'Graphic Design', Art
History') are in fact images that are changed 'onmouseover' and changed
back 'onmouseout'.

Now back to the basics. You can learn how to do simpler basic javascript
onmouseover/onmouseout rollovers by looking through basic javascript
tutorials, say at <http://www.w3schools.com/>;, or more specifically at
<http://www.w3schools.com/js/js_animation.asp>;

Be aware that the 'Document Object Models' to reference objects such as
images, that enable these 'onmouseover/onmouseout' scripts to work can
be different for different browsers, and can be different in HTML 4.01
and XHTML. (The student example does not work in Mozilla Firefox.)

So yes, I agree with some of the earlier comments, be very wary of
simply copying and using code from other websites, take the time to
learn what is going on.

-------------

Changing the topic slightly, many webpage makers are gradually moving to
simpler code for basic menus, say using a simple list of links, that is
then styled using CSS. By doing this we separate function (a list of
links) from presentation (a great dynamic graphic menu). These links can
be made dynamic by applying style using the dynamic pseudo-class :hover
to change, say, the background image behind an anchor, when the mouse is
'hovered' over the anchor. There is a very good set of Tutorials about
how to do this at: <http://css.maxdesign.com.au/>; and there are many
great examples at <http://csszengarden.com/>; and in the 'CSS Resources'
from csszengarden. The advantage of doing this instead of using
javascript is that the webpage is then more device as well as browser
independent.

Hope this helps,

regards

Ken McInnes

This thread: