Homepage image (with clickable links)

[the supervillain]

Hey everyone!
I am redoing my site! I have a few things I need to change with the appearance and am wondering how to do it.

First, I want an image on the homepage. Possible broken into 3 separate images ( I can handle all this in photoshop). Once I have that, i want it to be centered on the homepage, and have the 3 parts of the image clickable to other areas of the site (ie, specific galleries). Can I have it so when someone hovers over one section of the image, it will have a text overlay that says the gallery the link will take them to?? Is this too much??

I know there are some guru's out there that can help me out!! :)



***hey 100th post!! :)***

[thaKing]

Hey everyone!
I am redoing my site! I have a few things I need to change with the appearance and am wondering how to do it.

First, I want an image on the homepage. Possible broken into 3 separate images ( I can handle all this in photoshop). Once I have that, i want it to be centered on the homepage, and have the 3 parts of the image clickable to other areas of the site (ie, specific galleries). Can I have it so when someone hovers over one section of the image, it will have a text overlay that says the gallery the link will take them to?? Is this too much??

I know there are some guru's out there that can help me out!! :)
sure, just create an image map and use that as your homepage...i did that - used the bio box, placed my image there and added the image map coordinates...lastly removed the items i didn't want/need on homepage...

[the supervillain]

Okay, I am going to try that out! How do you put the coordinates and all that in the code?? (I have no clue about html etc)

Thanks

[thaKing]

Okay, I am going to try that out! How do you put the coordinates and all that in the code?? (I have no clue about html etc)

Thanks if this doesn't make sense, google for image map using photoshop so that you can see screenshots...

there are 4 coordinates for a map (a link)...the first two numbers are the x,y for the top left part of the link...the last two are the x,y for the bottom right of the link...

let's use a square picture in an example...so, to get these numbers using PS (i'm going off memory here since i don't have PS installed on this machine) just put your mouse over the top left part of the area you want to be a link, the top left corner of the pic...down along the bottom of PS will be your coordinates within the image (make sure you have your settings in preferences to be pixels and not inches, or something else)...you might see something like 235,430...those are the first two numbers...now, put your cursor over the bottom right corner of the image you want to link...you see another set of numbers like 376, 650...those are your second set of numbers...you do this for each are you want to be a link...

if you have to include these within a map tag and reference this map in your img tag...here's an example code when finished:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="rect" coords="90,58,130,72" href="mercur.htm" alt="Mercury" />
<area shape="rect" coords="150,58,180,72" href="venus.htm" alt="Venus" />
</map> so there is one image called planets.gif referencing a map called planetmap....then there is the actual map with coordinates...for the first rectangular link the top left corner of the link is at position 0,0 and the bottom right corner is 82,126...

again, you may need to google to get some screenshots for this to all make sense....but this gets you an idea of what you need to do...

[the supervillain]

Thank you! Thank you!
This is great,
after some googling, I think I figured it out :)

I will post back here, if I need anymore help!

[the supervillain]

okay, I cant get the image to center itself! I added <center></center>
around the image src!

no go! :)

[the supervillain]

One more thing,
I was just browsing your site Jeremy, I want to have the homepage set up pretty much like yours is!
did you do all that with a biobox mapped image??

Please enlighten me :)

[thaKing]

One more thing,
I was just browsing your site Jeremy, I want to have the homepage set up pretty much like yours is!
did you do all that with a biobox mapped image??

Please enlighten me :)
yep, all with the bio...do you have the image setup using your biobox (went to your site but it needs a password)...i have one image (a copy of my biz card essentially)...then each link is part of the map...once you have the image associated with your image box, you can include/exclude whatever you'd like from the homepage using CSS...

so, here's where i'd start: upload image to you site gallery...select the O image and use that for the bio...then see if you can create your map for links...then, if there's anything you don't want, exclude that with CSS...

if you had a specific image to look at, or some specific items you want help with, that'd make it easier...

[the supervillain]

Hi, thanks for the timely response :P
My website is password protected just to keep people from seeing it when its under construction, just in case I miss anything!

So your image on your main page, is not a background image? Its actually html in your bio box?

I have my image in the biobox, and the mapping thing working. Basically I want to hide everything else on the homepage asides from this image. Right now, I can't get the image to even be centered. It seems to be aligned with the left side of the bio box edges.

I have to work early in the morning, so I am off to bed, but i am going to be working on this tomorrow night, if need be, I can 'pm' the password to see the site if you want to give me a hand?

That would be much appreciated!

Regards

[thaKing]

i would be more than happy to help...but i must tell you i am leaving first thing in the morning for the Dominican Republic and won't be back for 8 days...if you're willing to wait that long, shoot me a pm...:ivar

[the supervillain]

not sure if I can wait that long :)

I had to redo the image, so I am uploading it now, going to try it out.

[the supervillain]

I removed the password from the page :)