Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

exact position

Posted on 1999-07-26
17
Medium Priority
?
271 Views
Last Modified: 2010-04-09
how do i specify the exact location of an image on a page?, what i'm trying to do is... I've got a map of australia on the page. i want to use an image (dot.gif) which is a little red dot and place lots of these images on certain parts of the map. when you press one of these dots (depending where it is) you will go to a specified section lower down the page (using the name="#blahblahblah" technique), what code do i use that is relatively simple to implement?
hope you can help.
0
Comment
Question by:Pynball
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 2
  • 2
  • +4
17 Comments
 
LVL 3

Expert Comment

by:messentary
ID: 1852430
this can be a little difficult if you want to do it by hand.  You will need to use code similar to :

<MAP NAME="map1">
            <AREA SHAPE=CIRCLE COORDS="x, y, radius" HREF="page.htm">
whereas x, y, and radius are coordinates on your image.  You can plug in the coordinates using a photo editor to pinpoint the coordinants.

The easier thing to do is to use an image map creation program.  Here are some good URL's to try.

Windows:
http://www.concentric.net/~automate/hotspots.shtml
http://galadriel.ecaect.ohio-state.edu/tc/mt/
http://www.mediatec.com/


0
 
LVL 3

Expert Comment

by:messentary
ID: 1852431
If you want to do it by hand, the <map> tag does need to be closed out after all the <areas> are completed.  </map>
0
 
LVL 3

Expert Comment

by:messentary
ID: 1852432
oh, yea.  one more point.  If you are doing this by hand, Inside the <IMG> tag for the dot.gif pic, you will need to insert the usemap="#map1" whereas map1 is the name you give the map in the <map> tag.

<<img src="dot.gif" usemap="#map1">
0
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 

Author Comment

by:Pynball
ID: 1852433
cool, i can now put the picture box on screen, but, the image (dot.gif) doesnt show up, and how do i put the dot ON another picture, ive got a australia map on screen (ozmap.gif) and i want the dot on top of that. is it possible?
0
 
LVL 1

Expert Comment

by:Steves2001
ID: 1852434
If you wish to place the image over the top of another image you will need to use layers, this system is extremely incompatible with most older versions of netscape and and all other browsers.  What Iw ould suggest is that you draw the dots on the image in a drawing program(much more compatible)
0
 
LVL 1

Expert Comment

by:TheMadManiac
ID: 1852435
You can create a table with no border (ie invisible) like this:

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD BACKGROUND="yourmap"></TD></TR></TABLE>

you can put your dots (images) over the background image(the map) this way, but they do need to be in the <TD></TD> tag.

I think this is fairly compatible with browsers nowadays.
The easiest way is however the one Steves suggested.

Floris 'wish he could change his nick' van Gog
0
 
LVL 4

Expert Comment

by:chewymon
ID: 1852436
Place the dots on the map in a graphics editor.  Save the map, then messentary comment will work.
0
 
LVL 3

Expert Comment

by:messentary
ID: 1852437
I agree with chewymon, (and not just for the points :)  )  Adobe will work perfectly if you have it.  Just remember that you'll need to flatten the image before saving it.  However, any other image program will do just fine
0
 
LVL 1

Accepted Solution

by:
mushon earned 150 total points
ID: 1852438
Use a Graphic editor such as Photoshop or paint shop pro to put your dot or dots on the map where you want them, save the file as a GIF or JPG.

Now use a client side map creating Util such as Mapedit -
http://www.boutell.com/mapedit/download.html
very easy to use, you just draw a circle around the area you want to be clickable and then specify the link....

Hope this Helps
Moshe Eshel
0
 
LVL 3

Expert Comment

by:messentary
ID: 1852439
Mushon,

This is the second time I've seen you post an answer with a previously stated answer.  If you are that desperate for points, then perhaps you should learn to come up with your own answers.  
0
 
LVL 3

Expert Comment

by:messentary
ID: 1852440
ORIGINAL ANSWERS mushon


0
 
LVL 1

Expert Comment

by:TheMadManiac
ID: 1852441
yeah that's kinda lame.. nothing new in that answer there...
0
 
LVL 3

Expert Comment

by:messentary
ID: 1852442
Pynball,  I find it kind of sad and disappointing that you will accept an answer from someone who evidently likes to copy other peoples answers.  But, c'est la vie.  

Mushon, you will be reported for your numerous ploys of postings answers already stated by other people.  Personally, I don't care about the points, however, I do care that people like you, who are evidently complete morons, will try to boost their petty little egos by stealing points.  You evidently do not know a thing about computers, as all the answers I saw posted by you have been stolen from other people.
0
 

Author Comment

by:Pynball
ID: 1852443
messentary, sorry 2 dissapoint u dood, but i didnt accept anyones answer in particular, i used a combination of sections from the lot to achieve what i hoped, and i thank u all.
0
 
LVL 3

Expert Comment

by:darinw
ID: 1852444
Reviewing question.

darinw
Customer Service
0
 
LVL 4

Expert Comment

by:chewymon
ID: 1852445
Pynball--For future reference, when you accept an answer, only the answer with the green titlebar is accepted.  That is the way the site works.  There are ways to split the points between experts if that is your wish.
0
 
LVL 3

Expert Comment

by:messentary
ID: 1852446
chewymon,

I still owe you 50 points.  Pick them up in HTML

Mess
0

Featured Post

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question