5 Replies - 881 Views - Last Post: 03 June 2008 - 03:34 AM

#1 valencia  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 31-May 08

CSS and image maps?

Posted 31 May 2008 - 03:32 PM

right, so, this is probably a really dumb question and probably isn't possible... (and I probably wont explain it right >.<; )

but I'm looking to condense the amount I have to put into every page at the top, even though there isn't much there now, it'd just be easier if it was all one nice little .css link

so my question is, is there anyway to get an image map into a .css file? so that I wouldn't have to put it onto every single page its needed on, and to just stick in the .css link on each page and have it show up?

this is my current code:

<title>in the NEGATIVE</title>
<link rel="stylesheet" href="http://www.freewebs.com/inthenegative/itn.css">

<div id="over">
<table cellpadding="0" cellspacing="0" width="800" class="whole">
<tr>
<td align="center" width="800">

<img name="map" src="http://www.freewebs.com/inthenegative/itn3.jpg" width="780" height="437" border="0" usemap="#map0"/>

<map name="map0">
<area shape="rect" coords="10,400,110,430" href="http://www.freewebs.com/inthenegative/index.htm">
<area shape="rect" coords="120,400,240,430" href="http://www.freewebs.com/inthenegative/minus.htm">
<area shape="rect" coords="250,400,340,430" href="http://www.freewebs.com/inthenegative/zero.htm">
<area shape="rect" coords="350,400,435,430" href="http://www.freewebs.com/inthenegative/azza.htm">

<area shape="rect" coords="450,400,605,430" href="http://www.freewebs.com/inthenegative/kusheth.htm">
<area shape="rect" coords="620,400,770,430" href="http://www.freewebs.com/inthenegative/positive.htm">
</map>

</tr></td>
<tr><td width="800" valign="top">
<div id="content">

<h1>headline here</h1>
test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here 
test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here 
test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here 
test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here test here 

<br><br>
<br><br><br>
<font size=1 face=verdana color=white>CREDITS FOR MAIN IMAGE<br>
horse (C) <a href="http://stockhorse.deviantart.com/art/Falair-4-41659564 target="new">stockhorse.deviantart.com</a><br>
background (C) <a href="http://resurgere.deviantart.com/art/Package-Noker-Decay-2-12337977" target="new">resurgere.deviantart.com</a><br>
manipulation (C) <a href="http://tayaravena.deviantart.com" target="new">tayaravena.deviantart.com</a><br>
<br>
<br><center>
<!-- Freewebs Sticker -->
<noscript></noscript><!-- --><script src="http://www.freewebs.com/p.js"></script><script language="Javascript" src="http://images.freewebs.com/JS/Freebar/btn_mirrorblack.js">
</script>
</center>

</div>
</td>
</tr>
</table>
</div>



I'm sorry if none of this made sense ^^; I'm really rather bad at this kind of thing >.<;

but thank you to anyone who takes the time to look at this, even if its to tell me its not possible :D

Is This A Good Question/Topic? 0
  • +

Replies To: CSS and image maps?

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1104
  • View blog
  • Posts: 6,913
  • Joined: 07-September 06

Re: CSS and image maps?

Posted 01 June 2008 - 11:10 AM

Sadly, as you said, I am pretty sure that this is impossible. However, depending on how much time you have already spent on your project, and how much you are willing to spend on it as you move forward you may want to look into xml and xsl. Xsl basically tells xml how to look when viewed through a browser and can do things like you are talking about (having the images map in a single file and still having it displayed on all pages that the xsl is parsing).

<edit>Forgot the links to xml/xsl tutorials:
XSL: http://w3schools.com/xsl/default.asp
XML: http://w3schools.com/xml/default.asp
</edit>

The good thing about xsl is it is allowed by most free servers and is fairly powerful.

If you are willing to spend money on your project and get an actual server somewhere out there that allows for php (and doesn't block a ton of commands like funpic.org does*) you could run a simple include statement at the top of a single file and have all the content included dynamically depending on the current page being viewed.

*funpic.org may offer php and mysql, however it is by no means a good free service to use. It tends to put adds on every single page and has gone about deleting many useful functions.

This post has been edited by BetaWar: 01 June 2008 - 11:12 AM

Was This Post Helpful? 0
  • +
  • -

#3 valencia  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 31-May 08

Re: CSS and image maps?

Posted 01 June 2008 - 03:07 PM

thanks for the info :)
and, yeah, I looked around everywhere and impossible seems to be the right word, haha. I think I've got it down enough so its just the image map that needs to be repeated on each page, so, ah well, its not too big a deal ^^

thanks a lot for your help, I'll be sure to look into that! :D
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1104
  • View blog
  • Posts: 6,913
  • Joined: 07-September 06

Re: CSS and image maps?

Posted 01 June 2008 - 09:24 PM

You are welcome. Hope you get your site working nicely.
Was This Post Helpful? 0
  • +
  • -

#5 djkitt  Icon User is offline

  • D.I.C Head

Reputation: 29
  • View blog
  • Posts: 189
  • Joined: 22-May 08

Re: CSS and image maps?

Posted 02 June 2008 - 11:16 PM

You could use the #include directive to include a file containing the Image Map into each page.

<!--#include virtual="insertFileContainingImageMap.inc" --> 



One caveat:

Some servers do not allow server side includes on files with the .html extension. On these systems you can either use the .shtml extension or, if you have access, you can ditrect the server to use server side includes for files ending in .html
Was This Post Helpful? 0
  • +
  • -

#6 rjolitz  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 110
  • Joined: 17-May 08

Re: CSS and image maps?

Posted 03 June 2008 - 03:34 AM

If the server doesn't allow server side includes you could stick in a small piece of PHP code like:

<?php include("filename.html"); ?> 




Which would accomplish the same thing along with give you the ability to edit a single file instead of every page the image map goes into.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1