Highlighting image segments in JS/HTML [Archive]

Click to See Complete Forum and Search --> : Highlighting image segments in JS/HTML

danny770

January 31st, 2006, 05:18 AM

I have an image (component diagram) which I've sectioned in order to make individual components clickable. However, I'd like to extend this so that an idividual component's area becomes highlighted when the mouse is hovered over it. Is it possible to do this in Javascript, or another language? My code is as follows:

<html>

<head>

<title>Image Map Popup Demonstration</title>

<script language="JavaScript">
</script>

</head>

<body bgcolor="#ffffff" text="#333333">
<p>

<IMG align="centre" SRC="linux.bmp" HEIGHT="1002" WIDTH="1447" usemap="#linux.bmp" border="0">

<noscript>
<p>
I'm sorry, your browser must be JavaScript enabled to participate in the
popup window demonstration. Depending on your browser, you may be able
to turn your JavaScript off and on via a preferences menu.
</noscript>
<p>

<map name="linux.bmp">
<area shape="rect" coords="77,133,104,780"
href="javascript:P('test.htm',200,333)" alt="POSIX API">
<area shape="rect" coords="113,133,140,780"
href="javascript:P('test.htm',200,333)" alt="Logging">
<area shape="rect" coords="190,209,234,228"
href="javascript:P('test.htm',200,333)" alt="APC">
<area shape="rect" coords="190,239,234,258"
href="javascript:P('test.htm',200,333)" alt="WC">
<area shape="rect" coords="190,269,234,288"
href="javascript:P('test.htm',200,333)" alt="CLM">
<area shape="rect" coords="190,299,234,318"
href="javascript:P('test.htm',200,333)" alt="TMG">

</map>
</body>
</html>

Thanks in advance! :)

PramodsNair

January 31st, 2006, 06:37 AM

Dear danny770,

I think you can achive the needed results and more by adopting a CSS made Image map. You can find a very good example at

http://www.frankmanno.com/ideas/css-imagemap/

and

http://www.webreference.com/programming/image_map/

Both are good examples

Pramod S Nair

danny770

January 31st, 2006, 07:17 AM

Thanks Pramod. The second example is not quite what I'm looking for, as it highlights the area only when the mouse it NOT hovering above it.

I have white shapes with black text which I'd like to change to black shapes with white text, as the user hovers the mouse above them.

There are over 150 "hotspots" on my image which need to be covered, so I'd like to be able to extend what I've done previously, rather than painfully go through each one again; having to state the xy co-ordinates of each rectangle.

Is there anything I can simply tag on to what I've done which will have the desired effect, with little extra cost in terms of time? Essentially I want to say "I've already defined a number of rectangular areas on the screen. If one of these is hovered over, change its appearance to make it highlighted."

Sorry, but I couldn't read the first example, as my company's intranet has blocked that link.

PeejAvery

January 31st, 2006, 09:03 AM

Is it possible to do this in Javascript, or another language?
You can do it in Internet Explorer with JavaScript but other browsers don't recognize the CSS parameters.

In another language you cannot do exactly what you are thinking. You can, however, make a table of multiple images and change that image when your cursor moves over it. This would be simple to set up in PHP by echoing the HTML.