Links on top of graphics...

Forum Moderators: not2easy

Message Too Old, No Replies

Links on top of graphics...

HOW DO YOU DO IT???

postalblowfish

9:23 pm on Apr 13, 2002 (gmt 0)

How do you specify sectors of large graphics links to different pages?? (i.e. a large picture of a pie, and when you click on different pieces of the pie it takes you to different pages.) The only web design software i have is Adobe PageMill for the Macintosh. Please help me!!

-James

brotherhood of LAN

9:45 pm on Apr 13, 2002 (gmt 0)

postalblowfish, welcome to webmasterworld!

I guess youd be wanting to use an image map, where co-ordinates for each clickable area would be specified in within the tags of your picture

im not 100% sure of the process because I hardly use graphic links, I prefer the keyword rich text links :)

msr986

9:48 pm on Apr 13, 2002 (gmt 0)

Welcome postalblowfish,

You need to do some reading on the html <map> tag.

There are some very good html resources on the web.

Try this search:

[google.com...]

-Marty

tedster

11:14 pm on Apr 13, 2002 (gmt 0)

I rarely use image maps, because I prefer to slice up the graphics and link each slice. But I have found a pretty thorough tutorial about image maps - one that clearly explains the different shapes you can define for hot spots.

Since you can't "slice" an image into any shape except a rectangle, this can be very heplful functionality. Here's the image map tutorial page [kasparius.com]. (Warning - this page does not display properly in Opera)

mivox

7:59 am on Apr 14, 2002 (gmt 0)

Also, some WYSIWYG html design programs have good image map tools. Creating image maps in GoLive is very easy, and I'd imagine Dreamweaver probably has the ability to "draw" in your image map areas as well.

Rhys

12:19 pm on Apr 14, 2002 (gmt 0)

I don't much like image maps because of the loss of useful text, and I am not confidant than SE's can reliably sort out the links from within the imagemap code.
My preference is to lay the image down as a background to a table, or as an underlying layer; then overlay all the links on top using table cells or something to position them.
This way you get to use some text for your links to help the SE ranking, you are making sites that the disabled can use, and you can easily edit the links at a later time if you need to make changes.
If you don't want text in your links, then surround a blank 1X1px GIF sized to the dimensions of the cell, with your <a> tags.

madcat

5:17 pm on Apr 15, 2002 (gmt 0)

My preference is to lay the image down as a background to a table, or as an underlying layer; then overlay all the links on top using table cells or something to position them.

Do you do this sometimes for body text as well?

Take this image for example:

[personal.atl.bellsouth.net ]

I want to place this image in a table cell and fill it with paragraphs of text.
I know I could simply use fireworks or photoshop to write the text and save it as a .gif, but I would rather use CSS text. Is it possible to place text over images like I'm talking about?

Thanks for any insight.

lazerzubb

5:20 pm on Apr 15, 2002 (gmt 0)

Yes you can use CSS for this, or use the image as a background and write the text over it.

madcat

3:41 am on Apr 16, 2002 (gmt 0)

hey lazerzubb--I have placed my gif image within the table cell. How would I go about placing text over it? Using CSS? It is the box in the middle cell.

[personal.atl.bellsouth.net ]

Thanks for any help.

toolman

3:49 am on Apr 16, 2002 (gmt 0)

There is only one way I know of to do this cross browser with css. You must use an absolute url with a td class like this :

background-image : url("http://www.example.com/image/bg.gif");

You can also format the text with the same class.

papabaer

4:01 am on Apr 16, 2002 (gmt 0)

Madcat, using the CSS {background-image:url(images/myimage.gif);} (for example) is a very simple method to place an image as a background for a div, table, paragraph, lists, etc.

I use an image as a background for a music/artist feedback survey throughout my site. I can edit the form text for specific applications, but the image remains the same... talk about getting mileage!

You can check my user profile for the site and use this page for an example: 12_pearls.htm

There are lots of ways to do this with CSS, just be certain to check results for NN4 if that browser is included in your targeted audience.

NN4 and table background images can be troublesome. On a strictly personal note... I do not style for NN4 but am beginning to use the @import rule to serve "unstyled" pages to older browsers. This allows me a larger CSS "toolbox."

madcat

4:34 am on Apr 16, 2002 (gmt 0)

Thanks Papabaer::

This is profound if this actually works out. Man, when can we be free to fully harness the power of CSS without these bleeding browser problems? It will make life so much simpler.

Anyway, for some reason...When I type text in my table cell as one normally would. It doesn't want to follow my lead for some reason. If you could look at that link again (of course I would appreciate it), the text will not recognize the table cell boundaries--I have to add a <br /> to get separate lines. Also the type only starts in the center instead of the top down.

Ever seen this before or know what I'm talking about?
Thanks for your help on this...

papabaer

5:13 am on Apr 16, 2002 (gmt 0)

Madcat, try this style:

.qt-textbox{ width:100%; height:100%;
background:#003 url(images/help.gif) no-repeat;
color:#000;}

(you can also define the div with fixed measurements to match you image: {width:420px; height270px;}

Then remove the image from the table cell and insert this "styled" div:

If you use "centered" text, padding will not be an issue, but if you wish standard, left alignment you can use "paragraphs" within the table cell and apply padding there, thus avoiding the "box-model" issue.

.qt-textbox p {padding:0 5x;}

This will create a rule for paragraphs within .qt-textbox using 0px for top/bottom and 5px for right/left.

Try adding "px" to your fixed td width & height. Divs can also be defined using width:200; but will fail to wrap text without some unit identifier e.g. px.

tedster

8:35 am on Apr 16, 2002 (gmt 0)

> Divs can also be defined using width:200; but will fail to wrap text without some unit identifier e.g. px.

Thank you for pinning that one down!

papabaer

2:38 pm on Apr 16, 2002 (gmt 0)

> Divs can also be defined using width:200; but will fail to wrap text without some unit identifier e.g. px.

That one used to be my "very late at night, almost morning," pitfall - I have too many scars... ;)

Xoc

3:16 pm on Apr 18, 2002 (gmt 0)

You are in luck, because I did my first one last night.


<map name="FPMap0">
<area href="page1.htm" shape="circle" coords="13, 164, 11">
<area href="page2.htm" shape="circle" coords="60, 164, 11">
<area href="page3.htm" shape="circle" coords="150, 119, 11">
<area href="page4.htm" shape="circle" coords="159, 82, 11">
<area href="page5.htm" shape="circle" coords="109, 62, 11">
<area href="page6.htm" shape="circle" coords="194, 14, 11">
<area href="page7.htm" shape="circle" coords="89, 164, 11">
<area href="page8.htm" shape="rect" coords="141, 156, 166, 184">
<area href="page9.htm" shape="rect" coords="168, 156, 189, 184"></map>
<img src="backgroundimage.gif" usemap="#FPMap0" width="226" height="194" />

I don't know how cross-browser this works...my app is an IntraNet, so only has to work in IE and Opera. Image maps are one thing that FrontPage is good for, as I let it write the HTML for me.

papabaer

4:21 pm on Apr 18, 2002 (gmt 0)

Here is an example of an IMAGEMAP using alt tags to describe the individual links.

This works in Opera, IE and even NN4.x!

The online example can be seen at ismsound.com/featurism.htm