DaniWeb IT Discussion Community - CSS – Imagemap - Highlight Item

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- HTML and CSS (http://www.daniweb.com/forums/forum143.html)

- - CSS – Imagemap - Highlight Item (http://www.daniweb.com/forums/thread55278.html)

hgltd

Sep 16th, 2006 7:32 pm

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

FC Jamison

Sep 16th, 2006 11:38 pm

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?

hgltd

Sep 17th, 2006 8:41 am

Re: CSS – Imagemap - Highlight Item

Quote:

Originally Posted by FC Jamison (Post 253095)

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

FC Jamison

Sep 17th, 2006 11:11 am

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!

katarey

Sep 17th, 2006 11:10 pm

Re: CSS – Imagemap - Highlight Item

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

Sep 18th, 2006 5:35 am

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

Sep 19th, 2006 12:11 am

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

FC Jamison

Sep 19th, 2006 12:49 am

Re: CSS – Imagemap - Highlight Item

1 Attachment(s)

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

Sep 24th, 2006 11:03 pm

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

All times are GMT -4. The time now is 9:59 pm.

Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC