Image + Screen Setting Issue

I am using an image of the United States map to link Sales Rep contact info for each state. I then use the Autoshape feature to place transparent images with links on each state's name (TX, CA). The problem is if the image is loaded on another PC set with higher or lower resolutions the link image onn the state name moves. any ideas how to standarize this????
timokeeffeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
This is most likely a browser issue dealing with the page margins, etc.
If you can post the code you're using for the page, we should be able to clear up the problem...
0
timokeeffeAuthor Commented:
Here is the code:


<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="states_files/filelist.xml">
<title>MDMD</title>
<base target="main">
<!--[if !mso]>
<style>
v\:*         { behavior: url(#default#VML) }
o\:*         { behavior: url(#default#VML) }
.shape       { behavior: url(#default#VML) }
</style>
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head>

<body background="../bg.gif">

<p align="center"><b><font color="#FFFFFF" size="4">Please Click on State Link for Contacts</font></b></p>

<p align="center">
<img border="0" src="../untitled.gif" width="674" height="409" align="middle"></p>

<p align="center">&nbsp;</p>

<p align="center"><!--[if gte vml 1]><v:rect id="_x0000_s1064"
 alt="" href="http://sym-faq/staging/salesmap/states/sym_ca.asp" style='position:absolute;
 left:2in;top:175.5pt;width:27.75pt;height:19.5pt;z-index:1' filled="f"
 stroked="f"/><![endif]--><![if !vml]><span style='mso-ignore:vglayout;
position:absolute;z-index:1;left:192px;top:234px;width:37px;height:26px'><a
href="http://sym-faq/staging/salesmap/states/sym_ca.asp"><img border=0
width=37 height=26 src="states_files/image001.gif" title="" v:shapes="_x0000_s1064"></a></span><![endif]><!--[if gte vml 1]><v:rect
 id="_x0000_s1063" alt=""
 href="http://sym-faq/staging/salesmap/states/sym_tx.asp" style='position:absolute;
 left:323.25pt;top:260.25pt;width:22.5pt;height:21pt;z-index:1' filled="f"
 stroked="f"/><![endif]--><![if !vml]><span style='mso-ignore:vglayout;
position:absolute;z-index:1;left:431px;top:347px;width:30px;height:28px'><a
href="http://sym-faq/staging/salesmap/states/sym_tx.asp"><img border=0
width=30 height=28 src="states_files/image002.gif" title="" v:shapes="_x0000_s1063"></a></span><![endif]></p>

</body>

</html>
0
seanpowellCommented:
Okay - I'll have a look at the code, but first glance shows that the images are trying to be positioned absolutely.

Try adding the following before the closing </head> tag:

<style>
<!--
body { margin:0px; padding: 0px; }
//-->
</style>
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

seanpowellCommented:
You can also clean up the code like so:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>MDMD</title>
<style>
<!--
body { margin:0px; padding: 0px; }
//-->
</style>
</head>
<body background="../bg.gif">
<p align="center"><b><font color="#FFFFFF" size="4">Please Click on State Link for Contacts</font></b></p>
<p align="center"><img border="0" src="../untitled.gif" width="674" height="409" align="middle"></p>
<p align="center">&nbsp;</p>
<span style='position:absolute; z-index:1; left:192px; top:234px; width:37px; height:26px'><a href="http://sym-faq/staging/salesmap/states/sym_ca.asp"><img border=0 width=37 height=26 src="states_files/image001.gif"></a></span>
<span style='position:absolute; z-index:1; left:431px; top:347px; width:30px; height:28px'><a href="http://sym-faq/staging/salesmap/states/sym_tx.asp"><img border=0 width=30 height=28 src="states_files/image002.gif"></a></span>
</body>
</html>
0
timokeeffeAuthor Commented:
This change to

<span style='position:absolute

works fine for my resolution settings at 1024x768, but the links still move half way across the image at 800x600. any ideas to solve thsi issue??
0
seanpowellCommented:
Sorry tim - does the map have to be centered on the screen, or can you position it with top and left values as well:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>MDMD</title>
<style>
<!--
body { margin:0px; padding: 0px; }
//-->
</style>
</head>
<body background="../bg.gif">
<p align="center"><b><font color="#FFFFFF" size="4">Please Click on State Link for Contacts</font></b></p>
<span style='position:absolute; z-index:0; left:100px; top:100px; width:674px; height:409px'><img border="0" src="../untitled.gif" width="674" height="409" align="middle"></span>
<p align="center">&nbsp;</p>
<span style='position:absolute; z-index:1; left:192px; top:234px; width:37px; height:26px'><a href="http://sym-faq/staging/salesmap/states/sym_ca.asp"><img border=0 width=37 height=26 src="states_files/image001.gif"></a></span>
<span style='position:absolute; z-index:1; left:431px; top:347px; width:30px; height:28px'><a href="http://sym-faq/staging/salesmap/states/sym_tx.asp"><img border=0 width=30 height=28 src="states_files/image002.gif"></a></span>
</body>
</html>
0
seanpowellCommented:
You'll need to adjust the margins and widths, but this should also work with centering the map...

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>MDMD</title>
<style>
<!--
body { margin:0px; padding: 0px; }
//-->
</style>
</head>
<body background="../bg.gif">
<p align="center"><b><font color="#FFFFFF" size="4">Please Click on State Link for Contacts</font></b></p>
<div style="position:absolute; left:50%; margin-left:-337px; z-index:0;">
<img border="0" src="../untitled2.gif" width="674" height="409" align="middle">
</div>

<div style='position:absolute; z-index:1; left:50%; top:200px;  margin-left:-200px; width:37px; height:26px'><a href="http://sym-faq/staging/salesmap/states/sym_ca.asp"><img border=0 width=37 height=26 src="states_files/image001.gif"></a></div>
<div style='position:absolute; z-index:1; left:50%; top:300px;  margin-left:-150px; width:30px; height:28px'><a href="http://sym-faq/staging/salesmap/states/sym_tx.asp"><img border=0 width=30 height=28 src="states_files/image002.gif"></a></div>

<p align="center">&nbsp;</p>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
timokeeffeAuthor Commented:
The last suggestion screwed the image even more. the link to calif. the ifrts link is now half way acrross the image in the middle of the map. the setting were the 1024X768, so now the settign which worked before no longer work with the last suggestion you made.
0
seanpowellCommented:
I'm just using example pixel values, as I don't have access to the images that you're using, so there's no way to judge where the div's should be going. Are you able to modify the sizes to suit?
0
seanpowellCommented:
Just checking in...
seanpowell
0
timokeeffeAuthor Commented:
seanpowell,

which settings do I edit to move the transparent images over the correct position?

Also there seems to be an outline of a frame that extends beyon my image. If I drag this dotted line in, it changes all the code and does not work.

If  I can move this image around page this solution could work.
0
seanpowellCommented:
Which solution is your preference - having the main image centered automatically or positioned from the left and top?

The outline of a frame is just FP's way of showing that there's a div on the page (they drive me nuts). Resizing the dotted line will affect where the div sits, so you don't want to do that...
0
timokeeffeAuthor Commented:
I figured it out. I changed the following:

top:200px;  margin-left:-200px

then tested at all resolutions. this will work thanks
0
seanpowellCommented:
Your welcome - hopefully FP will have better support for positioning div's in the future...

Thanks Tim,
seanpowell
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development Software

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.