Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Image + Screen Setting Issue

Posted on 2003-10-21
14
Medium Priority
?
230 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
[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
  • 9
  • 5
14 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 9590493
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
ID: 9590578
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
ID: 9590606
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
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 
LVL 31

Expert Comment

by:seanpowell
ID: 9590641
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
ID: 9590841
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
ID: 9590925
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 2000 total points
ID: 9591000
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
 

Author Comment

by:timokeeffe
ID: 9591291
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
ID: 9591325
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
ID: 9592928
Just checking in...
seanpowell
0
 

Author Comment

by:timokeeffe
ID: 9593220
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
ID: 9593255
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
ID: 9593267
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
ID: 9593285
Your welcome - hopefully FP will have better support for positioning div's in the future...

Thanks Tim,
seanpowell
0

Featured Post

Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

Question has a verified solution.

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

Turn A Profile Picture Into A Cartoon Using Photoshop And Illustrator This tutorial will teach you how to make a cartoon style image out of a regular picture. I have tried to keep the tutorial as simple as possible. I used Adobe CS4 for this tuto…
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
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 an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Suggested Courses

604 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