Hi
Does anyone have a solution or can point me in the right direction for my problem?
I’m using an image map where the links (on the same page) refer to a vertical list of information. I would like to insert a small image (preferably) or highlight with a cell bg color or have some other means to indicate the line of data they expect to display. It can be rather confusing to determine where the information is even though I have anchored the link to display first at the top of the page.
Is this possible for CSS or should this be done in JS. If JS is required any links to reference would be appreciated.
Thanks!
Dan
hgltd
0
Newbie Poster
Recommended Answers
Jump to PostHelle There,
I hope this will help you! :idea:
for example http://www.katarey.com/forHelp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
Jump to PostI did this a month or so back for a client.
It will at least give you an idea of how to use an array to populate a table.
All 8 Replies
FC Jamison
31
Posting Pro in Training
Team Colleague
I'm not exactly sure what you are asking for here...
Do you have a page you can point me to so I can get a better picture of what you are asking for?
hgltd
0
Newbie Poster
I'm not exactly sure what you are asking for here...
Do you have a page you can point me to so I can get a better picture of what you are asking for?
Hi
Thanks for the response.
Hey, I know what I mean. :lol: As a former moderator of 4 boards my post was especially lame, wasn't it?
*ok go here:
http://www.esimfg.com/esi-store/agora.cgi?product=Hip-Abductor-Adductor-2000a
Click on a part number in the exploded view then you will be taken to the product (part). The part you clicked on will be at the top of your browser's viewable area. However, in most cases all of the rest of the parts will be staring you in the face. To those who may not be Internet savvy it's going to take awhile for them to get used to image maps. To have the product number's td bg highlighted or a small ASCII arrow or something to indicate the chosen part would be very helpful indeed.*
*I would prefer CSS if it's possible but JS would be fine too. The technique (if it exists) is probably buried under terminology I’m not aware of for a successful google search because i can't find any reference anywhere, at least not obvious reference. I may have passed it up unaware.
*At any rate links to reference, solution(s), ideas or jokes and humor are very much appreciated.
*Please insert "thank you" and "please" wherever appropriate.
Regards,
Dan
FC Jamison
31
Posting Pro in Training
Team Colleague
hmm...off the top of my head, I'd suggest using a JavaScript onclick event to change the background of the specified cell.
You could then have a small image as the background.
How to get it to go away would be a trick, though...perhaps use a timer to revert back to the original background after 10 seconds?
Hey...it's an idea, anyway!
katarey
27
Junior Poster
Helle There,
I hope this will help you! :idea:
for example http://www.katarey.com/forHelp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Active Anchor</title>
<style type="text/css">
<!--
.demo
{
color:#000033;
background-color:#f2f2f2;
visibility:hidden;
}
table
{
border:#cccccc 1px solid;
}
-->
</style>
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
// -->
</script>
</head>
<body>
<img src="1.jpg" alt="test" width="300" height="150" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="16,19,79,56" href="#1" onclick="toggleBox('demodiv',1); toggleBox('demodiv2',0); toggleBox('demodiv3',0);"/>
<area shape="rect" coords="100,72,180,111" href="#2" onclick="toggleBox('demodiv',0); toggleBox('demodiv2',1); toggleBox('demodiv3',0);" />
<area shape="rect" coords="210,26,280,89" href="#3" onclick="toggleBox('demodiv',0); toggleBox('demodiv2',0); toggleBox('demodiv3',1);" />
</map>
<table width="59%" border="0" cellpadding="2" cellspacing="2" bordercolor="e2e2e2">
<tr>
<td width="24%" align="center" valign="middle"><div ID="demodiv" class="demo">Active Anchor</div></td>
<td width="76%" valign="middle"><a name="1" id="1"></a>Anything 1 </td>
</tr>
<tr>
<td align="center" valign="middle"><div ID="demodiv2" class="demo">Active Anchor</div></td>
<td valign="middle"><a name="2" id="2"></a>Anything 2 </td>
</tr>
<tr>
<td align="center" valign="middle"><div ID="demodiv3" class="demo">Active Anchor</div></td>
<td valign="middle"><a name="3" id="3"></a>Anything 3 </td>
</tr>
</table>
</body>
</html>Rahul :)
http://www.katarey.com
hgltd
commented:
thankful for the help and solution
+1
hgltd
0
Newbie Poster
Rahul and FC Jamison,
You guys are gentlemen and scholars! Thank you very much for taking the time to answer my plea for help.
Blessings on you and your families!
Dan
hgltd
0
Newbie Poster
Rahul
Your solution works great! I have it partially integrated into one of the product pages. You can see it here:
http://www.esimfg.com/esi-store/agora.cgi?product=AB-Back-2200a
The products enabled with the JS on the image map are:
H085b
LA2200
UA0010
FA2200
This is exactly the solution I was looking for. There is one little issue I’m hoping there is a solution for, though. If there were maybe 10 links per image at the most then the solution as is would be fantastic. However, many of the machines have 25 or 30 or more parts each. This means that each link would require 25 or more toggleBox strings as the JS is currently scripted. That is a LOT of toggleBoxs per line to hand code! 900 toggleboxes per page. Whew! That is of course providing I’m not misunderstanding the coding scheme.
I’m hoping someone could streamline this into an array or something to ease the page load and the work load before I commit to hand coding 900 toggleboxes per page. Grin.
Thanks for your consideration.
Regards,
Dan
FC Jamison
31
Posting Pro in Training
Team Colleague
I did this a month or so back for a client.
It will at least give you an idea of how to use an array to populate a table.
hgltd
commented:
helpful
+1
hgltd
0
Newbie Poster
Hi,
Well I seem to have encountered another problem. There are multiple links in the image maps that go to the same destination. Apparently this script is too narrow in scope as it only allows for single instances.
I know some perl and pretty much nothing about JS though the similarities are apparent.
The questions are, in this statement...
function toggleBox(szDivID, iState)
what is the value or function of the "sz" preceeding the DivID? In JS can the DivID have qualifiers for multiple instances such as DivIDa, DivIDb, DivIDc and so on?
Thanks!
Dan
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.