HTML + layout ?

[Sikawtic]

I need to know how to put buttons on top of a picture you already have (i want to make a layout for my site). The picture looks as such:
http://img.photobucket.com/albums/v102/2x2=6/top_bannercopy.gif
the home/maps/mods are the buttons that will be posted over the back picture...

Help please.... i'll give you karma :D

[TheBB]

I don't understand... you want help with making the buttons link? Because as far as I can see the buttons are already on the picture...

[Neo]

Are the buttons supposed to do anyhting?

If not just make an Image map xD

-Neo

[Sikawtic]

how do you do an image map (and i have them saved in different pix, the one above is all of them together...)
and yes... the buttons will link to other pages...

[TheBB]

You don't have to have different objects. Just use one image and make an image map for it. Image maps:

<map name="map">
<!-- define each area of the image and where it links using the following template: -->
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xN,yN" href="..."/>
</map>

<img src="..." usemap="#map"/>

[Sikawtic]

ok...

so
<map name="map"> okies, i understand that...
<!-- define each area of the image and where it links using the following template: -->a comment.. yay
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xN,yN" href="..."/>WTH???
</map> got that

<img src="..." usemap="#map"/> this is the other pix correct???

[UED77]

The first value has to be the first X coordinate of the first polygon, then the first Y, then the second X.

If you wait a little bit, I might even do it for you. But I gotta run now.

UED77

[Sikawtic]

i just genna look in my big ole' deital deital html booky... :D

i forgot i had that :D

[TheBB]

Okay, on the image, you have to define areas that should link to different pages. That's what the area shape does. For the parallellogram shaped buttons on your picture, you need 5 x,y coordinates to designate the button shape (the first and the last is the same). That's what the coords attribute is for. The href attribute works just like a normal link. So if you want your home button to point to home.html, you want an area tag like this:

<area shape="poly" coords="..." href="home.html"/>

Where coords is 10 numbers that in pairs designate the points that, if you draw a line through each one in order, you outline the button "home". To find the coordinates you probably need a graphics editor.

Make one such area tag for each button (all of them in the same map) and then put the one big image with everything on it up on the site, and assign it to the map you just made.

[Sikawtic]

okies, i think i'll figure this out, but my next question:
how do i make areas that i can write text... with a different scroll thing than the page and such...i believe this is sometimes called a blog...

EDIT:
UED77: i might take you up on your offer... i have no clue what i'm doing... i'll give you the address's to the pics.

[TheBB]

They're called frames. Just search on google for crying out loud.

[UED77]

Since you didn't give the the URLs for the two separate pictures, I did it for the one you posted here. You'll just gonna have to use that.

Here's the image map, fully XHTML compatible:

<img src="top_bannercopy.gif" width="600" height="150" border="0" usemap="#menumap" />
<map name="menumap">
<area shape="poly" href="home.html" alt="alttext" coords="435,118, 487,118, 472,133, 420,133" />
<area shape="poly" href="maps.html" alt="alttext" coords="491,118, 537,118, 521,133, 476,133" />
<area shape="poly" href="mods.html" alt="alttext" coords="540,118, 581,118, 581,133, 526,133" />
</map>

UED77

[Sikawtic]

ty UED77 :D i was genna post them, but it was hectic over here... people almost fighting for the comp :(

[hammocksleeper]

If the buttons are already separate images, why don't you just add a hyperlink to them? Why go through all the trouble of creating an image map?!? ....

[Seal]

because its damn hard to have all the images go in the right positions.

[ZombieKing]

I can appreciate what you are trying to do, but there is a simple way that you might have overlooked. Use Fireworks or Flash in conjuction with photoshop and you could do what you wanted in hardly any time at all.

[BSTRhino]

Of course, this way, the page loads faster, runs for people who don't have flash, and best of all, google can read it! And we all love google.

That was very helpful of you UED77. You're very hung up on the XHTML thing, aren't you?

Now, I have a question. ZeroDarkStar, you were saying something about the 'slice' tool? I heard that photoshop can do a lot of your HTML programming for you, is the 'slice' tool how you do that?

How well does photoshop make this HTML? Do you still have to fix it up afterwards?

[SexForTwo]

Two ways, one might be better than the other depending on how you think.

Put your td style as this:

background-image: url(FULL URL TO IMAGE);

You will have to scale your tables accordingly to prevent image repeating. You can remove it using CSS, of course, but then you get awkward spaces between the image and table.

Then overlay a table within, no bgcolor or background images, no border/cellpadding/cellspacing, and place the images accordingly.

OR, you can use image maps. Place the <map> and <area> tags within the <head> tag, and name the map tag with name="INSERT NAME HERE". Then put usemap="#INSERT NAME HERE" inside your image tag. Replace INSERT NAME HERE with a better name, obviously.

Also, I think the image cannot have NOHREF or something.

[Seal]

if you didn't know, style is really important part of a modern webpage.
background-image: url(FULL URL TO IMAGE);
the url can be relative to the page, as in:

when the page which calls the CSS is in http://null.nothing.net/~asdf/page.html, and the image is in http://null.nothing.net/~asdf/images/image.png, the background-image definition would be:
background-image: url(images/image.png);
to prevent image repeating, either define the cell size to match the size of the bg image, or even better:
background-repeat: no-repeat;
that should be correct, not fully sure.

[Neo]

Uhm. Its a header, why the hell would you not just use an imagemap? There are some things -- beleive it or not -- that the older, simple, way of doing it is more useful then CSS.

Image Maps are perhaps the easiest way to define a header, rather then try to slice it up (especially with buttons that arent perfectly 'square')

-Neo