Forum Home Forum Home > Expression Web > Expression web 3 and 4
  New Posts New Posts RSS Feed - Hotspots Won't Stay Put When I Test the Page
  FAQ FAQ  Forum Search   Register Register  Login Login


Welcome to expression web help - thank you for joining us.

Hotspots Won't Stay Put When I Test the Page

 Post Reply Post Reply
Author
Message
OfficeTrainingLady View Drop Down
Just starting out
Just starting out
Avatar

Joined: 12 Jan 2018
Location: Suwanee, GA
Status: Offline
Points: 8
Post Options Post Options   Thanks (0) Thanks(0)   Quote OfficeTrainingLady Quote  Post ReplyReply Direct Link To This Post Topic: Hotspots Won't Stay Put When I Test the Page
    Posted: 24 Mar 2018 at 8:04pm
I made several hotspots on my website in the Master.dwt.  When I test the site in Google Chrome or Internet Explorer, the hotspots are not in the same place.  It looks like they are moving about an inch to the left every time.  It looks like EW is using some coordinates.  Should it be doing that?  How can I "attach" the hotspots to the image so they stay in place when published?  This always worked in FrontPage.  I am still getting used to EW.

<div id="container" style="width: 100%px; height: 805px;" class="auto-style5">
<map id="ImgMap0" name="ImgMap0">
<area alt="" coords="101, 78, 194, 113" href="WhyCompass.html" shape="rect" />
<area alt="" coords="240, 84, 302, 110" href="OurTeam.html" shape="rect" />
<area alt="" coords="347, 82, 430, 112" href="YourFuture.html" shape="rect" />
<area alt="" coords="6, 70, 80, 120" href="index.html" shape="rect" />
</map>

Back to Top
Sponsored Links


Back to Top
tcertain View Drop Down
Admin Group
Admin Group
Avatar

Joined: 04 Apr 2008
Location: United States
Status: Offline
Points: 3943
Post Options Post Options   Thanks (0) Thanks(0)   Quote tcertain Quote  Post ReplyReply Direct Link To This Post Posted: 26 Mar 2018 at 9:24am
width: 100%px;
has to be px in order for coordinates to work correctly, OR your img has to have a div that is positioned absolutely by css

Ex:
#ImgMap0 {width: 500px; height: 100px; position:absolute; top:300px; left: 800px;}

position: absolute;  makes this absolutely in one spot and only then can coordinates work correctly.

This also assumes there is nothing else in your stylesheet that is moving your map or moving something around your map such as the container that says class="auto-style5" that I have no idea what that css style is doing.

You really need to set up a temp page on your website and give us the page url so that we can see what is really controlling your problem. EW makes auto styles when you drag things where you want them, sometimes without you realizing it. It can be in the page, or it can change things in your style sheet that you do not realize changes other things on other pages. EW was built with static pages that do not change size in mind. There are a million ways that styles set in stylesheets, pages and inline can change other styles everywhere else.

I have a free book here that will help a beginner understand EW better. I wrote it 10 years ago and lots of things have changed, but it will give you a basic understanding of how styles work.




TCertain
"The Truly Educated Never Graduate" - Author Unknown
Back to Top
OfficeTrainingLady View Drop Down
Just starting out
Just starting out
Avatar

Joined: 12 Jan 2018
Location: Suwanee, GA
Status: Offline
Points: 8
Post Options Post Options   Thanks (0) Thanks(0)   Quote OfficeTrainingLady Quote  Post ReplyReply Direct Link To This Post Posted: 05 Apr 2018 at 12:06pm
Hi TCertain,
I played around with it and I thought, at first, it worked but it turns out no.  My hotspots are on the masthead and there are several of them next to each other horizontally.  I have redone this Master.dwt many times and even remade the WHOLE site.  No dice.  All of the hotspots land an inch or so to the left of where they are supposed to be.  Here is the code below:  Also the Graphic I am laying the hotspots over is set to absolute and width is 100%px.  Hopefully this information will help.  I cannot publish it yet since it looks soooo bad.  Your thoughts?

<body style="width: 100%" id="masthead">

<!-- Begin Container -->
<!-- Begin Masthead -->
<div id="masthead" style="height: 721px">
<map id="ImgMap0" name="ImgMap0">
<area alt="" coords="883, 94, 997, 143" href="Httpdocs/OurPhilosophy.html" shape="rect" />
<area alt="" coords="8, 90, 76, 127" href="Httpdocs/default.html" shape="rect" />
<area alt="" coords="95, 85, 198, 134" href="Httpdocs/WhyCompass.html" shape="rect" />
<area alt="" coords="227, 87, 320, 137" href="Httpdocs/OurTeam.html" shape="rect" />
<area alt="" coords="339, 85, 439, 137" href="Httpdocs/YourFuture.html" shape="rect" />
<area alt="" coords="1013, 91, 1114, 139" href="Httpdocs/Resources.html" shape="rect" />
<area alt="" coords="1133, 91, 1223, 140" href="Httpdocs/Contact.html" shape="rect" />
</map>
<img alt="" height="698" src="Httpdocs/Picture_Library/Head15.png" usemap="#ImgMap0" width="100%" /></div>
<!-- End Masthead -->

Back to Top
OfficeTrainingLady View Drop Down
Just starting out
Just starting out
Avatar

Joined: 12 Jan 2018
Location: Suwanee, GA
Status: Offline
Points: 8
Post Options Post Options   Thanks (0) Thanks(0)   Quote OfficeTrainingLady Quote  Post ReplyReply Direct Link To This Post Posted: 05 Apr 2018 at 12:09pm
Hi TCertain,
I played around with it and I thought, at first, it worked but it turns out no.  My hotspots are on the masthead and there are several of them next to each other horizontally.  I have redone this Master.dwt many times and even remade the WHOLE site.  No dice.  All of the hotspots land an inch or so to the left of where they are supposed to be.  Here is the code below:  Also the Graphic I am laying the hotspots over is set to absolute and width is 100%px.  Hopefully this information will help.  I cannot publish it yet since it looks soooo bad.  Your thoughts?

<body style="width: 100%" id="masthead">

<!-- Begin Container -->
<!-- Begin Masthead -->
<div id="masthead" style="height: 721px">
<map id="ImgMap0" name="ImgMap0">
<area alt="" coords="883, 94, 997, 143" href="Httpdocs/OurPhilosophy.html" shape="rect" />
<area alt="" coords="8, 90, 76, 127" href="Httpdocs/default.html" shape="rect" />
<area alt="" coords="95, 85, 198, 134" href="Httpdocs/WhyCompass.html" shape="rect" />
<area alt="" coords="227, 87, 320, 137" href="Httpdocs/OurTeam.html" shape="rect" />
<area alt="" coords="339, 85, 439, 137" href="Httpdocs/YourFuture.html" shape="rect" />
<area alt="" coords="1013, 91, 1114, 139" href="Httpdocs/Resources.html" shape="rect" />
<area alt="" coords="1133, 91, 1223, 140" href="Httpdocs/Contact.html" shape="rect" />
</map>
<img alt="" height="698" src="Httpdocs/Picture_Library/Head15.png" usemap="#ImgMap0" width="100%" /></div>
<!-- End Masthead -->

Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down



This page was generated in 0.032 seconds.