Help me out with these HTML questions please.

[BZeto]

For my website I designed a .gif image that goes across the top of the page with tabs for all the different sections of the site.

I just left the tabs blank so I could put the actual text links over top of it. Now thats my question, how can I get other images or text to appear in the exact place I want them to over top of the main image?

Also, whats the best way to create a rollover image using HTML? I want the text/images on the tabs to change color when you move your pointer over them. I can make the rollover images I just dont know how to program it with HTML.

I would like to only use HTML if its possible, no java script or anything else.

Thanks.

 

[Beau]

Well... there's no way to use only HTML. You'll have to use some CSS and some javascript.

As far as placing images over top of the gif you use for tabs. You'll need to use absolute positioning and z-index layering in their styles.

Read more here: http://www.w3schools.com/css/css_positioning.asp

Also, if you're wanting to do rollovers and such to change the image that is displayed, you'll use the html javascript event "onMouseOver" to do this.

example:

<img src="foo.gif" onMouseOver="this.src='bar.gif';" onMouseOut="this.src='foo.gif';" alt="foobar"/>

to change the color of links when you mouse over them, you'll need to set up a css stylesheet similar to this:

<style type="text/css" media="all">

a.mylink { color: #FF0000; text-decoration: none; }
a.mylink:hover { color: #0000FF; text-decoration: none; }

</style>

 

[BZeto]

Ok, I ended using the absolute position stuff to align the buttons.

I have a problem though...

My links aren't working, well one of them are, but the others either aren't working, or only part of the image is clickable.

I'm using:

<DIV STYLE="position:absolute; top:33px; left:128px; width:200px; height:25px">
<image with link attached>
</DIV>


But the links seem to be messed up....

I dont think I'm going to do the rollover anymore. Not yet anyway. I need to get this problem fixed.
Do you want me to PM you with my entire code?

 

[BZeto]

Nevermind, I got it. My width and height commands inside of the <DIV> tags didn't match the pictures.


Is there a way to get my page set up to only use so much of a page? Not the whole thing?

Like this example:

HERE

hehe, I was doing some political research and came across his website.
Notice how it doesn't really even use up the right side of the page. I like that design, and I'm wondering how to do that.

Thanks.

 

[Beau]

set up a 3 column table to put everything in.

<table style="border-collapse: collapse; width: 760px;">
<tr>
<td colspan="3">header cell</td>
</tr>
<tr>
<td>left column</td>
<td>main content</td>
<td>right column</td>
</tr>
<tr>
<td colspan="3">footer cell</td>
</tr>
</table>

or... if you prefer to use div tags and style-sheet positioning, check this out: http://www.glish.com/css/

 

[daniel1113]

Perhaps you should just use an image map. It would be MUCH easier to implement, espcially if you are new to HTML.

 

[Beau]

Originally posted by: daniel1113
Perhaps you should just use an image map. It would be MUCH easier to implement, espcially if you are new to HTML.

Oh, but where's the challenge in that

(it is easier though)

 

[BZeto]

Originally posted by: Beau
set up a 3 column table to put everything in.

<table style="border-collapse: collapse; width: 760px;">
<tr>
<td colspan="3">header cell</td>
</tr>
<tr>
<td>left column</td>
<td>main content</td>
<td>right column</td>
</tr>
<tr>
<td colspan="3">footer cell</td>
</tr>
</table>

or... if you prefer to use div tags and style-sheet positioning, check this out: http://www.glish.com/css/

I like the table idea... One thing though, what does border-collapse do?

I may just use the table and div tag/style sheet positioning together.

I dont know much about image maps or how i would set my site up with them, I'll have to read up about them.

 

[Beau]

Originally posted by: BZeto

Originally posted by: Beau
set up a 3 column table to put everything in.

<table style="border-collapse: collapse; width: 760px;">
<tr>
<td colspan="3">header cell</td>
</tr>
<tr>
<td>left column</td>
<td>main content</td>
<td>right column</td>
</tr>
<tr>
<td colspan="3">footer cell</td>
</tr>
</table>

or... if you prefer to use div tags and style-sheet positioning, check this out: http://www.glish.com/css/

I like the table idea... One thing though, what does border-collapse do?

I may just use the table and div tag/style sheet positioning together.

I dont know much about image maps or how i would set my site up with them, I'll have to read up about them.

the border-collapse just makes it so that if you set a border on the individual cells, it'll collapse to whatever the max width of the border was, for example:

<table style="border-collapse: collapse; width: 760px;">
<tr>
<td style="border: 1px solid black;">will have a 1 pixel black border on all sides, except the right, which will be 3 pixels</td>
<td style="border: 3px solid black;">will have a 3 pixel border on all sides.</td>
<td style="border: 2px solid black;">will ahve a 2 pixel border on all sides except the left, which will be 3.</td>
</tr>
</table>

normally the borders would compound so that the first cell would have a right border of 4 pixels, etc. Also, it gets rid of any space between cells (cell-spacing).

an image map is made by using two different html elements, the <MAP> tag and the <AREA> tag, which work in relation to the <img> tag. Here's a good example of this: http://www.w3schools.com/tags/tag_map.asp

 

[BZeto]

Oh I see now.


And I just read about image maps over at htmlgoodies.com. Dang, it would have made my top navigation bar so much easier.

You guys aren't suggesting doing my whole page with image maps right? Just stuff like I explained earlier, right?
Just wanna make sure we're on the same page here.

 

[Beau]

Originally posted by: BZeto
Oh I see now.


And I just read about image maps over at htmlgoodies.com. Dang, it would have made my top navigation bar so much easier.

You guys aren't suggesting doing my whole page with image maps right? Just stuff like I explained earlier, right?
Just wanna make sure we're on the same page here.

correct

 

[winstongel]

Try here more about roll over image......http://www.corelangs.com/css/box/hover.html

winston

For my website I designed a .gif image that goes across the top of the page with tabs for all the different sections of the site.

I just left the tabs blank so I could put the actual text links over top of it. Now thats my question, how can I get other images or text to appear in the exact place I want them to over top of the main image?

Also, whats the best way to create a rollover image using HTML? I want the text/images on the tabs to change color when you move your pointer over them. I can make the rollover images I just dont know how to program it with HTML.

I would like to only use HTML if its possible, no java script or anything else.

Thanks.

---

Hi,

Welcome to AnandTech Forums. I locked the thread because the previous reply was over ten years ago.

Our members refer to such posts as "necro" posts, and some of them tend to post replies ranging from sarcastic to hostile, including possible accusations of spamming, whether warranted or not.

Thanks for understanding.

Harvey
Senior AnandTech Moderator/Administrator