I am looking for an integration of CSS, JavaScript and image maps. I
am looking for working code and will be as specific as possible.
GOAL:
I have a Web page showing corporate work site locations on a map. I
would like to have a rollovers on a map update a defined table cell on
the page with a short description. For example:
Map Description
|------|
| x1 | (image)
| | Lorem ipsum
| x2| Lorem ipsum
|------| For more link
where the description area is blank until there is a rollover at
either x1 or x2. And I would like to use CSS so that I don't have to
update the base map - I want to just read in a data file and have
those points appear over the map.
DETAILS:
The base map will be a single static image, but the work sites change
every few months. I want to indicate a work site with a simple red dot
graphic (for example) and have a circular area around each dot as an
image map hotspot. I want the image map and the dot positioning to be
dynamic so that when the page loads the points are positioned by
reading in data from a text file. I am flexible on the format of the
file. Required fields are:
coord_name name of data point
coord_x x coordinate of point relative to 0,0 of map image
coord_y y coordinate of point relative to 0,0 of map image
dot_image the image path of the dot to appear at coordinate
dot_image_hi the image path of the dot when rolled over or clicked
hotspot_radius the size of the circular area in the image map
div_name the name of the division on the page to update
descr_image the image path of the image in the description
descr_text the text for the description
descr_URL_name the name for a link at end of the description
descr_URL the URL for the link
It seems to me that the following process would be efficient:
1. On page load, read in the data file
2. Create the image map based on the image coordiates, radii and
link to the div on the page
3. Use CSS positioning to place the dot images in a layer above
the base map
4. As an area is rolled over, swap the image of the dot. If the area
is clicked, swap the image of the dot
5. Upon click in the image map area for that point update the
div with image, text and URL
You may assume that I have defind the various areas on the page using
tables. I am expecting about 20-35 points but no more than 50 points
and this is for a corporate site (not dialup). I want the solution you
offer to load quickly - if this cannot be done with my current
specifications let me know what my options are I will consider
limitations. For example, I can change the dot_image and dot_image_hi
to be colors (dot_color, dot_color_hi) rather than images if that will
produce a significant speed boost (each point won't really need its
own image, most points will use the same graphics). I would like
images for the dots and images for the descriptions to pre-load to
minimize delays.
I am guessing that loading the data file into an array in JavaScript
and looping through each element is the way to go, but you decide what
is efficient. I require that all scripting occur client side. |
Request for Question Clarification by
snapanswer-ga
on
02 Apr 2004 19:52 PST
I have a solid approach for you, except it does not use javascript,
and the "data file" is in the css itself. The css can be made to
match the list of required fields you have provided, very nearly, if
not exactly.
I do have some questions before I toil in the code.
Does the size of the radii of the hotspot circle change from point to
point, or is it uniform? (They can be different, I just want to know
for testing).
Do you forsee the hotspot areas overlapping? As you might suspect,
this would cause a problem no matter which technique is used.
This final question may be a deal breaker for you, I hope not. Can
the "hotspot" be a square with a height and width equal to 2r? (In
other words, it would be the same height and width as the circle).
When you move your mouse over the area, you would still get what
appears to be a hotspot circle, though the invisible container is a
box. It is possible that I can do this with a circular element, but,
I am concerned about cross-browser support. Let me know your thoughts
on that.
My thought is to create the HTML and CSS for 50 points. Then the
unused points are hidden unless coordinate data is provided for them.
You could use a different graphic for each point, if necessary.
However, if the "dot" and "hotspot" graphic are uniform it will
improve load times.
If this approach looks like a winner, and you have a specific example
you want me to code for you, let me know.
Thanks.
|
Clarification of Question by
nosneb-ga
on
02 Apr 2004 20:51 PST
I think I get it, instead of looping and building an array dynamically
you will read in a data file of 50 values. I guess this is OK, since
it will work in this application though I do wish it was more
generally applicable.
Square areas are fine (though cross browser support isn't required).
Dots rather than images are also fine. Overlapping is a potential
issue - I think it will be necessary for each hotspot to be different
sizes. I can then tune the hotspot sizes.
|
Request for Question Clarification by
snapanswer-ga
on
02 Apr 2004 22:45 PST
Actually, if you don't have 50 data points than the CSS for the extras
can remain undefined if you like. You can add or remove data points
as you wish. The way I am thinking of it, it should not be more
difficult than having a third file of coordinates. In fact, my belief
is that this should be easier to maintain. If you want to go beyond
50 data points, you would simply add more <li> tags to the html and
more corresponding styles to the css, so I think you will find this
approach very extendable.
If you have an image or anything that you would like me to use for
this, post a link and I will use it. Otherwise, this is the basic
approach.
A page with two <div> boxes. One div is the image. The other div
displays your updating information depending upon which point is
clicked on. It will use css instead of <map> tags. It will only use
JavaScript if I must use it to update the "information" div.
I will use a single gif image file to serve as the dots on the map, as
well as the "hotspot" circle using a CSS techniqe that speeds loading
and prevents "flickering" when updating the state of the graphic.
The goal is to have all dynamic information contained in the css file
so that it serves as the only file that needs to be updated. This
includes descr_image, descr_text, descr_URL_name, descr_URL which I
should be able to make work. My goal is to have a single file that is
easy to maintain. And, when it comes time to update information, you
can simply duplicate the file and update the points.
I will get started, but, if there is still a concern, just let me know
and I will address it or leave the question for another researcher, at
your request.
Thanks for such an interesting project to work on. I am looking forward to it.
|
Clarification of Question by
nosneb-ga
on
03 Apr 2004 05:18 PST
This sounds good; please start. Things I wanted to ensure we are still
going to do: variable size square hotspots (and corresponding size
info in data file); highlight dot color (or dot image) during rollover
and after clicked; that the URL is separate from the description -
does it need its own div (some points may not have a URL, and the
descriptive text might change, etc)?
The single data file that I can expand or contract to meet the number
of data points wil work very well. I think I will need to see it in
action for any additional comments.
|
Request for Question Clarification by
snapanswer-ga
on
06 Apr 2004 01:51 PDT
Unfortunately, it appears that I will not be able to provide a
satisfactory answer. So, I will be curious to see what another
researcher comes up with.
I have it all working, except, I am unable to pass a clickable link
(descr_URL) from the CSS file into the web page. Text generated by
CSS purposely does not pass through the rendering engine. I had hoped
I would come up with a way to use JavaScript to extract it from the
CSS file, but, if there is a way, I'm not finding it. The only
workaround I can think of is to have the link of descr_URL appear in
the html file instead of the CSS. However, this fails to meet the
goal of all data being contained in a single file.
If I knew more about XSL, it is possible that I could use XML+XSL to
do this. But, I think I reached the point of diminishing returns as
it relates to the investment of time.
I am hopeful that a JavaScript maven will throw something together for you.
I am glad I looked into it, since it is amazing to see what one can do
with CSS these days. Though, these techniques are best supported in
Mozilla (Firebird, Firefox), Opera, and Safari... IE isn't quite there
yet.
Good luck with your project. I am sorry I couldn't be of more help.
|
Clarification of Question by
nosneb-ga
on
10 Apr 2004 12:10 PDT
I have given this some thought and perhaps there is a way to use the
CSS code that you have developed. Consider the following: the CSS
writes to the div with the following:
For more <A HREF="javascript function(link_url)">information</A>
where the word information is the clickable link and the page uses a
javascript function to change the location of the page in the current
window to the passed parameter value. In this way all of the data
would still be contained in one file and a single javascript function
would be added to the page.
Please indicate if you think this is workable, I am very eager to get
this rolled out. Thanks.
|
Request for Question Clarification by
snapanswer-ga
on
11 Apr 2004 16:38 PDT
What you describe is precisely what it will not do, but, precisely
what I had hoped it would do.
Currently, CSS generated text bypasses the browsers rendering engine.
Therefore, it does not provide a rendered clickable link. Instead,
you would see the source code, just as you have written it.
If you like, I would be happy to post what I have so far as an answer.
Or, if you would rather not pay the full price for something missing
this feature, you could post another question for me to answer at the
price you feel appropriate.
I really wish it had been the complete solution for you, but, it might
give you the 90% you need to begin.
|
Clarification of Question by
nosneb-ga
on
11 Apr 2004 20:34 PDT
If the following doesn't solve it then I will post a new question
because I would like to see what you have. But first, perhaps consider
something like the following:
<HTML><HEAD><TITLE>TEST</TITLE>
<SCRIPT TYPE="text/javascript">
function clickMe() {
msg = document.linkForm.linkURL.value
alert (msg);
window.location=msg;
return;
}
</SCRIPT>
<style type="text/css">
.linkCell {cursor:pointer;}
.link {color: blue; text-decoration: underline;}
</style>
</HEAD>
<BODY>
<TABLE BORDER=0><TR>
<TD onClick="javascript:clickMe();" class="linkCell"><FORM
NAME="linkForm"><P class="link">For more...</P><INPUT TYPE="hidden"
NAME="linkURL" VALUE="anotherpage.htm"></FORM></TD>
</TR></TABLE>
</BODY></HTML>
What I am proposing is to bypass passing the link code to the cell. I
think the above shows that I can simulate the link behavior. Can the
CSS you have pass the URL value into the form field value? Or, some
other accessible property of a form element? I can then use a generic
JavaScript function to grab the data from the form element and
proceed.
Thank you for your effort.
|
Request for Question Clarification by
snapanswer-ga
on
13 Apr 2004 15:13 PDT
The answer (to the best of my knowledge) is know. There is not a CSS
selector or property that can update the "value" for the form.
Primarily, CSS can deal with style and position (which let's it
complete 90% of this task). However, in its current form, it cannot
transform browser data. To the extent that data tranformation is
permitted using things like :before and :after it is data that
bypasses the rendering engine (meaning that tags like <a href...>
appear as literal text instead of a rendered clickable link.
That is the hurdle.
However, there may be workarounds, though not pretty. For example, I
can envision where this troublesome link we are trying to overcome is
hard coded into the html. For example, the link for the 23 job site
could point to page23.html. Then, one could copy a destination page
and give it this page23.html name, or create an alias or mod_rewrite
rule to forward to a desired page. But, the downside of that idea is,
it is not as nice as having the destination URL in the same file with
the rest of the items to be updated.
In any event, if you would like me to provide what I have, let me know
if you want me to post it as an answer to this question, or another.
Thanks.
|
Clarification of Question by
nosneb-ga
on
22 Apr 2004 22:49 PDT
OK, I have been digging and I have found this example from
http://css.somepeople.net/dynamic
-----------------------------------------------------------------
<style type="text/css">
.first
{
color: black;
}
.second
{
color: red;
}
</style>
<script language="JavaScript">
function change(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}
</script>
<h1 class="first" id="changeme">Changeable text</h1>
<a href="javascript:;" onClick="change('changeme', 'second');">RED</a>
| <a href="javascript:;" onClick="change('changeme',
'first');">BLACK</a>
----------------------------------------------------------------------------
Now, it looks like we may be able to get the links to work by using a
little JavaScript - this code updates the class on the fly. So if we
can call JavaScript then perhaps the link can be more dynamic. Or: if
the link code always has to to be the same, can the JavaScript
function called either: pass a parameter to the function or set a
cookie that the function uses.
I have re-read your posts and really thought about it and don't see
that what you have said rules out this approach? If this works I will
very motivated to tip generously.
|
Request for Question Clarification by
snapanswer-ga
on
26 Apr 2004 08:45 PDT
I will look at this over the next to days. Hopefully, we can get this
done before the question expires. I will keep you updated on any
progress.
|
Request for Question Clarification by
snapanswer-ga
on
29 Apr 2004 00:07 PDT
I am still running in to the same problem. It is true that style
information can passed along dynamically using JavaScript. However, I
still don't know a way to pass a rendered URL to the page from CSS
into the rendered page.
I think probably the way to get this done, with everything in a single
file, is to create a .js file of JavaScript that contains all the
variable, including some to be passed as CSS style information.
Then, a JavaScript code could be use to compose the entire page. This
sounds doable.
Unfortunately, I don't believe my JavaScript skills will be enough to
make it happen. Please believe that I wish I had better news. I just
do not see a way for me to answer this completely to your
satisfaction. I share your frustration.
|
