I'm trying to set up a web page for a summer school project...I wanted to have a "family tree" of characters as a first image and then when you click on each character, the site will take you to a page with details about them.
Something like this: http://www.foxprints.com/tracy/story/charact/ (but with pictures instead of names)
Or like this: http://lackadaisy.foxprints.com/characters.php
Also, it would be okay if instead of going to another page when a picture is clicked on, info could just pop up if you hovered over a character's picture.
Is there any way to do something like this, preferably using a free web host? It doesn't have to be exactly like the examples, but just that general idea...
I hope that all makes sense and thanks so much in advance!!!
Website/HTML Help?? 10pts!?
2009-06-29 3:16 am
回答 (6)
2009-06-29 4:08 am
✔ 最佳答案
There are a few ways of doing that. 1. To create a tree with clickable images that takes you to another page, the easiest is to make an image map. Basically, create the entire map as one big image and then using image mapping, specify each individual sections to point to a different page. For this, all you need is an image editing software that will help you create image maps (ie. Photoshop, GIMP). The software will auto-generate the HTML codes you need.
2. Using CSS and Javascript - instead of creating an image map, you'll arrange the individual images using CSS. Then use Javascript to create the hover popups. To do this, you'll need to read more on Javascript mouseover and CSS positioning.
Image mapping and CSS is generally supported by all web hosts, as long as the host supports HTML (ie. you can create and upload your own HTML pages).
2009-06-29 3:23 am
You will first need to make the image. After that you will need to make an image map for that image in order to create links on the names.
2009-06-29 3:22 am
You need to use image mapping to make each part of the picture have a different link
alternatively,
you could use many images and then images of lines to connect them, and to make the things pop up above their heads you could use java-script and swap the images with a mouseOver event (one image no text, one image has text above it)
I am not sure if either of these options will work with a free webhost, but you could try using freewebs.com
alternatively,
you could use many images and then images of lines to connect them, and to make the things pop up above their heads you could use java-script and swap the images with a mouseOver event (one image no text, one image has text above it)
I am not sure if either of these options will work with a free webhost, but you could try using freewebs.com
2009-06-29 3:38 am
Yes, the "pop up when you hover" is a Javascript command like onmouseclick. The pictures can link to the other page like the following:
<img src="file/picture" a href="thepage.html" width="100px" height="100px" alt="A picture" />
I don't know enough javascript or Dynamic HTML to tell you how to do the mouseover, sorry :(
-Billy
<img src="file/picture" a href="thepage.html" width="100px" height="100px" alt="A picture" />
I don't know enough javascript or Dynamic HTML to tell you how to do the mouseover, sorry :(
-Billy
2009-06-29 3:22 am
yes, this is possible.
2009-06-29 3:19 am
Go to moonfruit.com and upload pictures (: Make sure they are .gif format.
收錄日期: 2021-05-01 16:36:29
原文連結 [永久失效]:
https://hk.answers.yahoo.com/question/index?qid=20090628191608AAzBaxy