Highlighting specific areas in an image map-onmouseover

v777tony · 04-20-2006, 12:14 AM

How do I do what the title says. I think it has something to do with css. But I'm not too use to css yet.
Here's all the necessary code.

Code:

<map id="email">
<area alt="Email Andrew & Andrew" shape="rect" coords="1,413,437,427" href="mailto:Andrew_Andrew_Show@yahoo.com" target="_blank"/>
</map>
<img src="pic\ap.jpg" usemap="#email" width="600" height="435" align="right" border="0"/>

I'm trying to get that specific area(in red) highlited a certain color when people put their mouse over it.

v777tony · 06-06-2006, 09:01 PM

HELLO!!! Is anyone there?¿

©®™¿¡

v777tony · 06-12-2006, 11:45 PM

I really really need help!

Shazzam!©

v777tony · 06-18-2006, 01:54 AM

Does anyone know how to help me with this little annoying problem?

coothead · 06-18-2006, 08:04 AM

Hi there v777tony,

Quote:

Highlighting specific areas in an image map-onmouseover

This can be achieved by using separate images for the highlight areas, as in this example...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>six in one</title>
<base href="http://coothead.homestead.com/files/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
div {
     text-align:center;
     margin-top:50px;
 }
#pic {
     border:3px double #000;
 }
-->
</style>

<script type="text/javascript">
<!--
  var maps=new Array();
        maps[0]='apple0.jpg';
        maps[1]='apple1.jpg';
        maps[2]='apple2.jpg';
        maps[3]='apple3.jpg';
        maps[4]='apple4.jpg';
        maps[5]='apple5.jpg';

window.onload=function() {
   elem=document.getElementsByTagName('area');
for(c=0;c<elem.length;c++) {
   elem[c].id='a'+c;
   elem[c].onmouseover=function() {   
   document.getElementById('pic').src=maps[this.id.split('a')[1]];
   }
   elem[c].onmouseout=function() {   
   document.getElementById('pic').src=maps[0];
   }
  }
 }
   var preloads=[];

function preload(){

for(i=0;i<arguments.length;i++) {

   preloads[preloads.length]=new Image();

   preloads[preloads.length-1].src=arguments[i];



  }
 }
preload('apple0.jpg','apple1.jpg','apple2.jpg','apple3.jpg','apple4.jpg','apple5.jpg');
//-->
</script>

</head>
<body>

<div>
<img id="pic" src="apple0.jpg" alt="" usemap="#apples" />
</div>

<div>
<map id="apples" name="apples">
  <area  coords="0,0,116,146" href="http://www.google.com" alt="">
  <area  coords="124,0,236,146" href="http://www.w3schools.com" alt="">
  <area  coords="244,0,360,146" href="http://www.codingforums.com" alt="">
  <area  coords="0,154,116,280" href="http://www.codingforums.com" alt="">
  <area  coords="124,154,236,280" href="http://www.google.com" alt="">
  <area  coords="244,154,360,280" href="http://www.w3schools.com" alt="">
</map>
</div>

</body>
</html>

coothead

theone3 · 06-18-2006, 08:40 AM

Quote:

Originally Posted by v777tony

HELLO!!! Is anyone there?¿

It's best to provide a link to your page so that people can visualise what is going on.

In this case, you're defining most of the image as part of the map, and you only have one hotspot. Why not just make it a rollover image, and drop the hotspot?

Alternatively, what Coothead has said will work nicely.

v777tony · 06-21-2006, 07:08 AM

Thank you... muchas gracias. I knew someone smart enough would find an answer.

EDIT: I celebrated too soon.

dannyspencer · 08-02-2006, 11:37 PM

Hi there wondering if anyone can help me do something similar...

i have an exploded view diagram of a car engine. each part has a number beside it. i want the user to be able to mouse over the number and have a circle put around it (the number is in the jpg image, not as text)...

Now there are 70 parts on the image so i dont really want to be making 70 div layers to get the circle around the number. Is it possible to do it without having loads of div layers??

The second problem is underneath the image map there is the products listing. basically a list of all the parts. i want the user to be able to hover over an item in the list (or perhaps a link by the side of the listing) and have the number on the diagram highlighted with the circle just like if the user mouses over the number.

Is this possible?! if no one understands i could attempt to explain more...

Cheers, Dan

richpasco · 08-31-2006, 02:58 PM

I have a similar question.

My working client-side image map has several hundred AREAs defining a
MAP on a multi-megapixel image. Now, I would like to modify my code so
that each AREA gets highlighted when the mouse hovers over it.

A technique I've seen involves swapping the entire image with another
(one for each area) that is identical except for the highlighting. This
is practical for a small image and just a few areas. However it is
impractical to pre-store and download several hundred slightly-differing
copies of my multi-megapixel image.

I would prefer to draw each area directly on the image when the mouse
hovers, then restore the original image when the mouse leaves. That way
only two images are needed: the unmodified original, and the scratch
version onto which each highlighted AREA is drawn. What I'm missing is
JavaScript code to highlight an AREA.

I tried Walter Zorn's JSGraphics package
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
but have been unable to make it modify a displayed image.

Surely what I'm trying to do can't be all that unusual. Can anyone
point me to a working example?

- Rich