| Author |
 Topic  |
|
gelliott
Junior Member
USA
268 Posts |
 Posted - 29 July 2003 : 13:11:06
|
I have an imagemap made up of a bunch of oddball-shaped regions. I'd like to either shade the regions or place little status lights in each region to visually indicate on the page the status of that region (i.e. for printouts). The status will be defined by a field in my database.
The best example I can think of is a US map during a presidential election - they change the color of each state depending on the current returns data. How do you do this without creating one image with every possible combination of colors?!?
The only thing I can thnk of is to place a blank image in the background, then use ASP code to locate the proper colored little 4x4 pixel balls using a coordinate system to place the each ball in the approximate center of each region, but can you load images ontop of images like that? I have no idea how you'd shade a region...
Graphics wizards - what wisdom can you offer? |
* The optimist says the cup is half full. The pessimist says it's half empty. But the engineer knows the truth - the cup's design is incorrectly sized.  |
Edited by - gelliott on 29 July 2003 13:12:29 |
|
|
Nikkol
Forum Moderator
USA
6907 Posts |
|
|
gelliott
Junior Member
USA
268 Posts |
Posted - 29 July 2003 : 14:34:07
|
Nikkol, I'd love to have the code if you don't mind posting it. Is it just the HTML, or are your brown stars determined by a field value within ASP? I looked at your source, and I think I could adapt it to my purpose, but if you did this with asp I'd love to see that as well. Thanks in advance!  |
* The optimist says the cup is half full. The pessimist says it's half empty. But the engineer knows the truth - the cup's design is incorrectly sized. |
 |
|
|
Nikkol
Forum Moderator
USA
6907 Posts |
|
|
gelliott
Junior Member
USA
268 Posts |
Posted - 29 July 2003 : 15:11:01
|
| I can appreciate that - I'm headed out on a business trip right now - will check back in a day or so when I return... Thanks. |
* The optimist says the cup is half full. The pessimist says it's half empty. But the engineer knows the truth - the cup's design is incorrectly sized. |
|
|
|
gelliott
Junior Member
USA
268 Posts |
Posted - 02 August 2003 : 14:22:02
|
| Nikkol, here's that promised reminder to post the asp code for your stars... Thanks! In the meantime, I'll try to stumble through based on the resulting html... |
* The optimist says the cup is half full. The pessimist says it's half empty. But the engineer knows the truth - the cup's design is incorrectly sized. |
|
|
|
Nikkol
Forum Moderator
USA
6907 Posts |
Posted - 02 August 2003 : 15:30:47
|
It's not that pretty. Here's a general description
this line gets the x, y coord of the image you want to place other images on top of
i put this here to write a legend describing what the stars where for
this is the recordset i opened that contains the information telling me which part of the map i need to place a star (for us this was position openings in districts - each case represents a different area on the map to place the star
i had to play with these numbers until i was satisfied with the star placement
this was for items that didn't have a place on the map but i wanted to include them .. so i placed them under the legend
<script language="javascript">
function getXYcoord(nvn) {
var elm = document.images[nvn];
if (document.layers) return elm;
// NS4 images contain x and y values
var rd = { x:0 ,y:0 };
do { rd.x += parseInt(elm.offsetLeft);
rd.y += parseInt(elm.offsetTop);
elm = elm.offsetParent;
} while (elm);
return rd
}; //end getXYcoord ( string ) -> object{x,y}
var pos = getXYcoord('kymap');
document.write("<div id='legend' class='small' style='position:absolute;left:"+pos.x+";top:"+pos.y+";'>");
document.write("<img src='images/brownstar.gif'> position openings for <%=Year(Date())+1%>")
document.write("</div>")
<%
do while not openpos.eof
Select Case openpos(0)
Case 10
starx = 45
stary = 130
Case 11
starx = 95
stary = 80
Case 12
starx = 130
stary = 125
Case 13
starx = 165
stary = 85
Case 14
starx = 194
stary = 40
Case 15
starx = 165
stary = 45
Case 16
starx = 235
stary = 70
Case 17
starx = 295
stary = 55
Case 18
starx = 228
stary = 10
Case 19
starx = 215
stary = 125
Case 20
starx = 260
stary = 125
Case 21
starx = 290
stary = 100
end select
if openpos(0) > 9 and openpos(0) < 22 then
%>
d1x = pos.x + <%=starx%>;
d1y = pos.y + <%=stary%>;
document.write ("<img src='images/brownstar.gif' style='position:absolute;z-index:2;left:"+d1x+";top:"+d1y+"'>")
<%
end if
if openpos(0) = 3 or openpos(0) = 4 or openpos(0) = 5 then
%>
if (IE4==1) {
legend.innerHTML += "<br /><%=openpos(1)%>";
} else {
document.getElementById("legend").innerHTML += "<br /><%=openpos(1)%>";
}
<%
end if
openpos.movenext
loop
%>
</script>
I put this code near the bottom of the page. |
Nikkol ~ Help Us Help You | ReadMe | 3.4.03 fixes | security fixes ~ |
Edited by - Nikkol on 02 August 2003 15:34:35 |
|
|
|
gelliott
Junior Member
USA
268 Posts |
Posted - 02 August 2003 : 16:14:20
|
WOW! Thanks for the colors - that makes it very clear. This solves several of my problems. I think I'll need that javascript function at the top of your page as well (the one that sets IE4=x, but what about IE5 or 6?). Since I have several hundred map areas, I'll probably code the xy star positions in the db, and minimize the asp file length. And in my case, every polygon in my map will get a star, it's simply a matter of which one.
I've noticed that if your page loads while the window is half-sized, and then you maximize it, the stars loose their alignment when the page redraws - also occurs when loaded maximized and then it is half-sized. Any idea how to re-triger the javascript when the browser window changes size? |
* The optimist says the cup is half full. The pessimist says it's half empty. But the engineer knows the truth - the cup's design is incorrectly sized. |
|
|
|
Nikkol
Forum Moderator
USA
6907 Posts |
Posted - 02 August 2003 : 16:49:21
|
| on the resize thing, you'd have to do a reload if the window was resized. it doesn't work in every browser. do a search for javascript window reload resize and i bet you'll find a script. |
Nikkol ~ Help Us Help You | ReadMe | 3.4.03 fixes | security fixes ~ |
|
|
|
gelliott
Junior Member
USA
268 Posts |
|
|
gelliott
Junior Member
USA
268 Posts |
Posted - 11 August 2003 : 00:06:52
|
OK, this works quite beautifully in Netscape 7.x (if I leave off the legend), but IE 6 returns 0,0 for the coordinates of the underlying image. Here is a link to a text version of the include file I've created for this purpose. I've commented in the top of the include file how the image tag appears in the final html - I believe I have the image name correct in both places it needs to be. Can you help?!? What am I missing?
Here's what the various pages look like:
Netscape 7 with no legend
Netscape 7 with legend
Internet Explorer 6
|
* The optimist says the cup is half full. The pessimist says it's half empty. But the engineer knows the truth - the cup's design is incorrectly sized. |
|
|
|
HuwR
Forum Admin
United Kingdom
20600 Posts |
Posted - 11 August 2003 : 04:03:49
|
| if I remember correctly, there is a bug in IE which means you need to move the object in script before it will return its position. |
|
|
|
Nikkol
Forum Moderator
USA
6907 Posts |
|
|
Nikkol
Forum Moderator
USA
6907 Posts |
|
|
gelliott
Junior Member
USA
268 Posts |
Posted - 11 August 2003 : 09:17:54
|
Y'all get up waaay to early for me! It happens when the page loads. Identifying a width and height for the base image does not help.
HuwR, your comment got me searching for positioning bugs on Google, and I think I found the problem - you can not define floating DIV classes within a table. I moved this include file below the WriteFooter sub, and it positions much better.
The only trick I have left is that Netscape places the bottom left corner of the floating image at the coordinates specified, whereas IE places the top left corner. If there's an easy way to determine which browser I'm using, then I can add or subtract half of the image height accordingly. (I placed in my database the center coordinate of the image, allowing me to use various-sized images without having to re-code the coordinate in the DB).
I'll look for a browser detect script (preferrably an asp-based on since my position adjustment would be much cleaner in asp), but if you know one off the top of your head you'd like to give me a link to, I'd appreciate it. Thanks for you help, both of you - this is a really slick-looking result!!! |
* The optimist says the cup is half full. The pessimist says it's half empty. But the engineer knows the truth - the cup's design is incorrectly sized. |
|
|
|
Nikkol
Forum Moderator
USA
6907 Posts |
Posted - 11 August 2003 : 09:39:30
|
| But mine works and I have my image in a table. (don't know about netscape though). I can send you the actuall file I use if you want to shoot me an email, but I won't be able to do it until later tonight. |
Nikkol ~ Help Us Help You | ReadMe | 3.4.03 fixes | security fixes ~ |
|
|
|
Topic |
|
Topic Locked
