Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

border around image map area


  • Please log in to reply
16 replies to this topic

#1 gor

gor

    CC Newcomer

  • Member
  • PipPip
  • 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
  • 0

#2 Guest_Jordan_*

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).
  • 0

#3 gor

gor

    CC Newcomer

  • Member
  • PipPip
  • 15 posts

Posted 04 October 2008 - 07:00 AM

CSS is prohibited - I can use just HTML
  • 0

#4 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 04 October 2008 - 07:01 AM

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

#5 gor

gor

    CC Newcomer

  • Member
  • PipPip
  • 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

  • image.jpg

  • 0

#6 Guest_Jordan_*

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.
  • 0

#7 gor

gor

    CC Newcomer

  • Member
  • PipPip
  • 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
  • 0

#8 Guest_Jordan_*

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?
  • 0

#9 gor

gor

    CC Newcomer

  • Member
  • PipPip
  • 15 posts

Posted 04 October 2008 - 07:34 AM

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

#10 Guest_Jordan_*

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!
  • 0

#11 gor

gor

    CC Newcomer

  • Member
  • PipPip
  • 15 posts

Posted 04 October 2008 - 07:52 AM

thanks for efford
the very last possibility is to draw it in paintbrush :)
  • 0

#12 morefood2001

morefood2001

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 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

Attached Thumbnails

  • map3.gif

Attached Files


  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download