[Slice]

Hey guys, I have recently made a new site project here: www.home-of-the-ancients.com . The site was basically a shell whilst I uploaded some content; but now I want to make it better.

I decided to update the site to something a little more complex but I was wondering if someone could point my in the right direction. I know how I want the site to look, but I don't know if I need to use actionscript or flash or whatever. Here is a link to how I would like it to look:

http://www.home-of-t...ge-template.jpg

See the section with the orange glow? I want that to be a link and to glow on mouse over. (It will be a real image of a stargate, not an outline drawing.)

I am willing to learn whatever I need to, in order to get this going :).

[Lemur]

Some seriously heavy css knowledge and for sure more experience in design or color choice would help as well. You can check the css tutorials section to get an idea, I made a few tutorials, menu design and basics in there that could be of some help.

[Travis1012]

My first thought when looking at the image of the Stargate which you want to have links in it is, Image Map Hotspots. I am thinking if you used Image Map Hotspots on the image of the Stargate, using the polygon hotspot, you could have links where you want them. It might be possible to have hover images when you hover over the links on the webpage, giving the effect of the orange glow.

I have not actually myself used hover images with image map hotspots, but it might be possible.

EDIT:

Lemur is right. Seriously heavy CSS knowledge is probably a good idea.

This post has been edited by Travis1012: 10 February 2010 - 05:14 PM

[Slice]

Thanks for the great tips guys. I've been experimenting for a little and come up with this as a possible solution (although I'm not fond of using absolute positioning.. another way around it?)

http://www.home-of-t...om/newtest.html

I'm guessing it wont work in any resolution other than what I am using though, 1024x768.

@Travis1012, How would I use the MapHotspots?

[Travis1012]

I did some research into this problem and well you can not put actual image map hotspots on the background. Sorry. But absolute positioning is basically the same thing anyway, in image map hotspots, you tell it where in the image to put the link (absolute positioning). Maybe absolute positioning, as you have done, is a better way to do it.

Another way (which is using Image Map Hotspots) is inserting it as an image and not a background and using image map hotspots. I have never done a background this way, but in my research (using Google) someone said this was possible.

This post has been edited by Travis1012: 10 February 2010 - 08:15 PM

[Excavator]

Hello Slice,
Stu Nichols has a pretty simple (depending on your experience I guess) image map demo here - http://www.cssplay.c...enu/mantis.html
That might give you some ideas.

/edit... Here is another one that'a very cool - http://www.stunichol.../solar_map.html

Search his site for "image map", he's got others that you may like better.

This post has been edited by Excavator: 11 February 2010 - 03:09 AM

[Travis1012]

Excavator, on 11 February 2010 - 07:06 PM, said:

Hello Slice,
Stu Nichols has a pretty simple (depending on your experience I guess) image map demo here - http://www.cssplay.c...enu/mantis.html
That might give you some ideas.

/edit... Here is another one that'a very cool - http://www.stunichol.../solar_map.html

Search his site for "image map", he's got others that you may like better.

Very nice I will have to remember those sites for later.

This post has been edited by Travis1012: 11 February 2010 - 05:42 AM

[Lemur]

I wouldn't use absolute positioning, it really complicates things. I'll throw you a base level template with left side bar whenever I get back to work with some. As far as the background just put no-repeat in the css and you're golden.

[Slice]

Thanks alot guys with all the help it's much appreciated! I'm going to try out using some of the techniques from the Stu Nicholls site, once I get my head round it! >.<


EDIT:

Been learning about some of these hotspots for a couple of hours now and come up with this:

http://www.home-of-t...om/newtest.html

It's not the design I had planned but I'm still getting used to it. Anyone recommend a way to maximise use of space if I want to display my pages inside the gate?

(ps: ignore the boxes in the middle :tup:

This post has been edited by Slice: 11 February 2010 - 04:46 PM

[Travis1012]

I love the Stargate, did you make it yourself?

P.S. I Like Stargate and I am a member of your forums

[Slice]

Travis1012, on 12 February 2010 - 01:44 AM, said:

I love the Stargate, did you make it yourself?

P.S. I Like Stargate and I am a member of your forums

It's a stock image of the Atlantis gate

Hopefully I will have some more members in time, it's a little quiet on there at the moment.