Register and join over 40,000 other developers!
Recent Topics
-
Print specific values from dictionary with a specific key name
Siten0308 - Jun 20 2019 01:43 PM
-
Learn algorithms and programming concepts
johnnylo - Apr 23 2019 07:49 AM
-
Job Gig PHP Form Needed
PJohnson - Apr 18 2019 03:55 AM
-
How to make code run differently depending on the platform it is running on?
xarzu - Apr 05 2019 09:17 AM
-
How do I set a breakpoint in an attached process in visual studio
xarzu - Apr 04 2019 11:47 AM
Recent Blog Entries
Recent Status Updates
Popular Tags
- networking
- Managed C++
- stream
- console
- database
- authentication
- Visual Basic 4 / 5 / 6
- session
- Connection
- asp.net
- import
- syntax
- hardware
- html5
- array
- mysql
- java
- php
- c++
- string
- C#
- html
- loop
- timer
- jquery
- ajax
- javascript
- programming
- android
- css
- assembly
- c
- form
- vb.net
- xml
- linked list
- login
- encryption
- pseudocode
- calculator
- sql
- python
- setup
- help
- game
- combobox
- binary
- hello world
- grid
- innerHTML

border around image map area
Started by gor, Oct 04 2008 02:23 AM
16 replies to this topic
#1
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
how to draw some border around area in image map?
or how to highlight it in any possible way?
thanks
#2
Guest_Jordan_*
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
Posted 04 October 2008 - 07:00 AM
CSS is prohibited - I can use just HTML
#4
Guest_Jordan_*
Posted 04 October 2008 - 07:01 AM
oh. Paste your HTML code please and I will help.
#5
Posted 04 October 2008 - 07:07 AM
thanks a lot:
it is my school assignment, so some things are strange (like resizing of the image)
here is the image:
<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:
#6
Guest_Jordan_*
Posted 04 October 2008 - 07:16 AM
Ok, in your img tag just add a border="xx" where xx is the size. For example:
That should do what you are looking for.
<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
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_*
Posted 04 October 2008 - 07:28 AM
Oh, I see. I don't know if that is possible. What version of HTML?
#9
Posted 04 October 2008 - 07:34 AM
4.01 - the newest one
and i must use only internet explorer :sneaky2:
and i must use only internet explorer :sneaky2:
#10
Guest_Jordan_*
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
Posted 04 October 2008 - 07:52 AM
thanks for efford
the very last possibility is to draw it in paintbrush
the very last possibility is to draw it in paintbrush

#12
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
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 Files
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