border around image map area

#1 gor

CC Newcomer

Member
15 posts

Posted 04 October 2008 - 02:23 AM

hi
how to draw some border around area in image map?
or how to highlight it in any possible way?
thanks

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

#2 Guest_Jordan_*

Guest

Posted 04 October 2008 - 06:55 AM

Why don't you just use CSS and wrap a div tag around it? With the CSS you could create a border and there are many different types (dotted line, solid line, etc).

#3 gor

CC Newcomer

Member
15 posts

Posted 04 October 2008 - 07:00 AM

CSS is prohibited - I can use just HTML

#4 Guest_Jordan_*

Guest

Posted 04 October 2008 - 07:01 AM

oh. Paste your HTML code please and I will help.

#5 gor

CC Newcomer

Member
15 posts

Posted 04 October 2008 - 07:07 AM

thanks a lot:

<html>
<body bgcolor="868686">
  <div align="center"><img alt="java Duke" usemap="#map" width="300" height="300" src="image.jpg"/></div>
  <map name="map">
    <area shape="rect" coords="81,107,181,155" href="imgRed.html" >
    <area shape="circle" coords="247,61,25" href="imgBlack.html" >
    <area shape="poly" coords="49,283,79,159,142,166,190,140,190,126,203,135,259,211,266,274,257,288,210,261,154,247,102,262" href="imgWhite.html">
  </map>
</body>
</html>

it is my school assignment, so some things are strange (like resizing of the image)

here is the image:

Attached Thumbnails

#6 Guest_Jordan_*

Guest

Posted 04 October 2008 - 07:16 AM

Ok, in your img tag just add a border="xx" where xx is the size. For example:



<html>

<body bgcolor="868686">

  <div align="center"><img alt="java Duke" usemap="#map" width="300" height="300" src="image.jpg" border="1"/></div>

  <map name="map">

    <area shape="rect" coords="81,107,181,155" href="imgRed.html" >

    <area shape="circle" coords="247,61,25" href="imgBlack.html" >

    <area shape="poly" coords="49,283,79,159,142,166,190,140,190,126,203,135,259,211,266,274,257,288,210,261,154,247,102,262" href="imgWhite.html">

  </map>

</body>

</html>

That should do what you are looking for.

#7 gor

CC Newcomer

Member
15 posts

Posted 04 October 2008 - 07:21 AM

yes, I found this solution on the internet, but it doesn't work to me - it makes border around the whole image - not just around areas

#8 Guest_Jordan_*

Guest

Posted 04 October 2008 - 07:28 AM

Oh, I see. I don't know if that is possible. What version of HTML?

#9 gor

CC Newcomer

Member
15 posts

Posted 04 October 2008 - 07:34 AM

4.01 - the newest one
and i must use only internet explorer :sneaky2:

#10 Guest_Jordan_*

Guest

Posted 04 October 2008 - 07:49 AM

I know of no way. I'll send morefood in here, he may have an answer for you!

#11 gor

CC Newcomer

Member
15 posts

Posted 04 October 2008 - 07:52 AM

thanks for efford
the very last possibility is to draw it in paintbrush

#12 morefood2001

CC Leader

Expert Member
1011 posts

Posted 04 October 2008 - 08:22 AM

There is no clean cut valid HTML only way to do this that I am aware of, even after taking a course in web design and a half hour of research on google.

In order to do this, you will either need to split all of the images up and link them individually, use CSS, or use JavaScript. The cleanest option in this case that I am aware of is JavaScript.

I've simplified your project a bit by making areas in an image. Attached is what I have come up with.

Note that I found the Image and some of the HTML from google, not sure where though since I clicked on hundreds of links, so if you know the location, kindly add it to this thread to give credit where its due

.

Phil