Log in

View Full Version here: : Web Help Needed


sheeny
17-06-2006, 04:43 PM
I know it's not strictly astro related, but I need some advice on how to overlay two images on a web page. Perhaps my terminology here is not accurate so I'll describe what I want to do.

I have seen a web page somewhere (I think it was a lunar site?) which showed an image, and when you run the cursor over the image text appears naming each feature. So you can see the image both with labels and without.

Is this a fairly simple thing to do in html (i.e. within my grasp:P ) and if so how? My current skills are limited to basic html - no psp, asp, perl, java, etc.

If it isn't so simple, I guess my alternative is to make an animated gif and alternate between the clear image and the labelled one.

Thanks in advance,

Al.

Vermin
17-06-2006, 06:36 PM
The easiest way would be to make two images (one with the overlay, one without) and implement a javascript "mousover" event to switch to the one with the overlay.

Do a Google for "mouseover" (also called rollovers) there are tones of tutorials on how to do this and plenty of code available.

You may have to "preload" (another word to search) the second image if it is fairly large.

I think you could also use DIV tags but am unsure about this.

acropolite
17-06-2006, 06:51 PM
Most web editors (e.g. Frontpage) allow mouse over comments as part of the object properties.

sheeny
18-06-2006, 01:09 PM
Thanks guys!

Frontpage sounds like its on the edge of my comfort bubble... might have to push a little bit that way first, but the rollovers sounds interesting. I'll have a look at that too!

Al.

Shawn
24-06-2006, 04:29 AM
Hi There

If you have squiz at my site. www.ravenshoe.net (http://www.ravenshoe.net) there is NO au on the end of it,
you will see a rollover image elswhere event which is actually just an overlay. on the meade hand controller, feel free to view source, but not to criticise my rather unprofesional code.:P

Hope it helps.