How to use coordinates in a CSS file?

[agw_01]

Hi guys,

Just having a shot at creating a HTML page with CSS for the layout and have a question.

I'm using a map with co-ordinates to create separate links without the use of separate images.

The code goes something like this...

<map name="map">
	<area shape="RECT" COORDS="6,8,113,36" href="hardware/" />
	<area shape="RECT" COORDS="168,8,269,36" href="software/" />
	<area shape="RECT" COORDS="324,8,445,36" href="network/" />
	<area shape="RECT" COORDS="498,8,643,36" href="web/" />
	<area shape="RECT" COORDS="699,8,793,36" href="contact/" />
</map>

What I'm looking to do, is put that into the CSS page (which is indexed at the start of the HTML file) so that when the map is called...

<img src="menu.gif" border=0 usemap="map"/>

... it looks at the CSS page, rather than having the code for the map on each separate HTML page.

Is this possible?

Cheers.

 

[SiriusB]

I am not sure what you mean..

Why wouldn't you have the HTML for the map in the HTML file?

CSS is ONLY for the way a page looks. ALL content and structure should be in HTML. Remember, not everyone viewing your site may be able to see/use your CSS file.

 

[Mickey]

Why wouldn't you have the HTML for the map in the HTML file?

CSS is ONLY for the way a page looks. ALL content and structure should be in HTML. Remember, not everyone viewing your site may be able to see/use your CSS file.

And he's trying to replace an image map with a nice menu and style it using CSS.

What you need to do is create the HTML for your menu, something like:

<ul id="menu">
<li class="m1"><a href="#">hardware</a></li>
<li class="m2"><a href="#">software</a></li>
<li class="m3"><a href="#">network</a></li>
<li class="m4"><a href="#">web</a></li>
<li class="m5"><a href="#">contact</a></li>
</ul>

Then do your CSS something like:

#menu li a
{
display:block;
height:28px;
text-indent:-2000px;
overflow:hidden;
background: transparent url(menu.gif) no-repeat;
}
#menu li
{
display:block;
height:28px;
}
#menu li.m1 a
{
background-position:8px 6px;
width:107px;
}
#menu li.m2 a
{
background-position:168px 6px;
width:101px;
}
...

This is assuming that all the graphics you want for each button is contained within the region.

If you want to keep the whole image map in place but just have clickable regions then what you need to do is have some CSS like:

#menu
{
display:block;
background: transparent url(menu.gif) no-repeat;
height:300px;
width:300px; /* change for actual values */
position:relative;
}

#menu li a
{
display:block;
height:28px;
text-indent:-2000px;
overflow:hidden;
}
#menu li
{
display:block;
position:absolute;
height:28px;
}
#menu li.m1
{
top:8px;
left:6px;
width:107px;
}
#menu li.m2
{
top:168px;
left:6px;
width:101px;
}
...

Haven't tried any of this in a browser so there could be errors, hope this helps


Mick.

 

[agw_01]

SiriusB, what I wanted to do was instead of having the image map in each separate HTML file, just have it once in the CSS file which would then be called upon on each page load of the HTML.

It wasn't a necessity to have it like that, but I thought it'd be much easier if I wanted to change the menu layout/content

Mickey, that's superb. I'm sure I'll be able to get something sorted out of all that code... thanks very much

 

[unknowndomain]

Its not possible unless you use PHP or ASP to read in a small file which has just the image map in but the effect is the same it just means that instead of the image map physically being in the html all the time its only in there when the client views it.

PHP: <?php echo file_get_contents("map.htm"); ?>
ASP: <!--#include file ="map.htm"-->

 

[boycee]

SHTML will do it also which is available on most free/cheap hosts. (SSI Include)

Or you can store it in a JS (javascript) file and have that create it between two divs.

Or you could be really cleaver and do it with an IFRAME which updates a parentDiv with the menu. (AJAX stylie)


FYI -> I'm not saying these methods are the best, using a server side include would obv be ideal, but the above will also work.

 

[unknowndomain]

The asp code is SSI anyways.

 

[boycee]

Yes but that assumes he has a host that has asp support.