Re: Clickable Image Flip

G'day

> I want to have a series of small photos on a page that act as links;
> HOWEVER, I want each of the original photos to change to a different photo
> to indicate the link has been visited.

I think I get the picture...

> Can this be done in HTML? Or does it have to be a series of JavaScript
> events?

You'll have to use some sort off script - plain HTML can't do this, though
it could be simulated by having many different versions of that same page.
Of course, if the visitor uses the "back" button in their browser after
visiting one of the links, they will get exactly the same page they got the
first time, with exactly the same images...

So let's see how it could be done with javascript.  If the pages are in a
frameset (yeah, I know, some people hate them because they have seen poor
examples of their usage), you could use a few variables (or an array) in the
framesetting document which tracks whether a link has been visited.   Say
there are 4 images/links.  You'd need 4 variables or an array with 4
elements, all of which are initially set to 0 (zero).  Now when one of the
links is selected, you do the mouseover trick AND update the variable to 1.

You also need some script that runs as the page is loaded, so the images
with the "flag" set to 1 are swapped.   Gets tricky, but it's not
impossible.  Only drawback is that javascript will have to be enabled in the
visitor's browser.  And obviously older browsers (IE3, NN2 etc) won't change
the images at all.

Without frames, you would have to use a cookie to track the changes.

A third alternative, which does not depend on javascript,  would be to use a
cgi script (or ASP script?) to draw the initial page dynamically.  I'm no
expert in cgi scripts (yet) so I'm not sure how you would tackle that,
particularly how to actually set the flag on clicking the link.

One thought - the links themselves could call a second cgi script which
updates a "tracking file" or even a cookie and redirects the visitor to the
chosen file.  The links would have to include something that tells the
script which URL to redirect to.   Not too difficult as far as I can see.
On returning to the initial page (remember, it's generated by a cgi script)
the flags are checked and the page is drawn differently depending on those
flags' settings (on or off).

Hope this has given you some ideas.

Regards
--
Bert Doorn, Web Developer
http://www.betterwebdesign.com.au/
Author of "Beginners' Website Design Tips"
http://www.ii.net/~bdoorn/

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA