Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 16366

Sep 16th, 2006

CSS – Imagemap - Highlight Item

Expand Post »

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

Similar Threads

getting data from a list box. in Visual Basic 4 / 5 / 6

hgltd

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Sep 2006

Permalink

Sep 17th, 2006

Re: CSS – Imagemap - Highlight Item

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?

FC Jamison

Team Colleague

Reputation Points: 92

Solved Threads: 21

Posting Pro in Training

Offline

436 posts
since Jun 2004

Permalink

Sep 17th, 2006

Re: CSS – Imagemap - Highlight Item

Click to Expand / Collapse Quote 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

hgltd

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Sep 2006

Permalink

Sep 17th, 2006

Re: CSS – Imagemap - Highlight Item

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!

FC Jamison

Team Colleague

Reputation Points: 92

Solved Threads: 21

Posting Pro in Training

Offline

436 posts
since Jun 2004

Permalink

Sep 18th, 2006

Re: CSS – Imagemap - Highlight Item

Helle There,

I hope this will help you!

for example http://www.katarey.com/forHelp

HTML and CSS Syntax (Toggle Plain Text)
 
<!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>
<!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

katarey

Reputation Points: 39

Solved Threads: 23

Junior Poster

Offline

167 posts
since Jul 2005

Permalink

Sep 18th, 2006

Re: CSS – Imagemap - Highlight Item

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

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Sep 2006

Permalink

Sep 19th, 2006

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

hgltd

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Sep 2006

Permalink

Sep 19th, 2006

Re: CSS – Imagemap - Highlight Item

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.

Attached Files

Table Array.zip (3.8 KB, 162 views)

Last edited by FC Jamison; Sep 19th, 2006 at 1:49 am.

FC Jamison

Team Colleague

Reputation Points: 92

Solved Threads: 21

Posting Pro in Training

Offline

436 posts
since Jun 2004

Permalink

Sep 25th, 2006

Re: CSS – Imagemap - Highlight Item

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

hgltd

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Sep 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Help?

Next Thread in HTML and CSS Forum Timeline: includes - trying to bring modules into html documents

DaniWeb Message

Cancel Changes

User Name
Password