•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 360,988 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,632 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 5056 | Replies: 8 | Solved
 |
•
•
Join Date: Sep 2006
Location: California
Posts: 7
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
CSS – Imagemap - Highlight Item 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
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
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
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?
Do you have a page you can point me to so I can get a better picture of what you are asking for?
•
•
Join Date: Sep 2006
Location: California
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by FC Jamison 
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/agor...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
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
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!
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!
•
•
Join Date: Jul 2005
Location: india
Posts: 143
Reputation:
Rep Power: 3
Solved Threads: 15
Junior Poster
Re: CSS – Imagemap - Highlight Item Helle There,
I hope this will help you!
for example http://www.katarey.com/forHelp
Rahul
http://www.katarey.com
I hope this will help you!
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
•
•
Join Date: Sep 2006
Location: California
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 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
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
•
•
Join Date: Sep 2006
Location: California
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Re: CSS – Imagemap - Highlight Item 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/agor...=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
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/agor...=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
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
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.
It will at least give you an idea of how to use an array to populate a table.
Last edited by FC Jamison : Sep 19th, 2006 at 12:49 am.
•
•
Join Date: Sep 2006
Location: California
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 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
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
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- getting data from a list box. (Visual Basic 4 / 5 / 6)
Other Threads in the HTML and CSS Forum
- Previous Thread: Help?
- Next Thread: includes - trying to bring modules into html documents
