Solved

Image + Screen Setting Issue

Posted on 2003-10-21
14
223 Views
Last Modified: 2013-12-24
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????
0
Comment
Question by:timokeeffe
  • 9
  • 5
14 Comments
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 

Author Comment

by:timokeeffe
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 

Author Comment

by:timokeeffe
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:timokeeffe
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Just checking in...
seanpowell
0
 

Author Comment

by:timokeeffe
Comment Utility
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
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
 

Author Comment

by:timokeeffe
Comment Utility
I figured it out. I changed the following:

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

then tested at all resolutions. this will work thanks
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Your welcome - hopefully FP will have better support for positioning div's in the future...

Thanks Tim,
seanpowell
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

When deciding to adopt any help desk solutions many factors should be explored before taking decisions. This will change from business to another but in general there are some kind of rule of thumb. Here are some quick tips: Do we need only ticket…
When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now