Not all image mapped popups working

[stephgl]

Hi all,

I have a topic with two mapped images. One has six mapped spots for topic popups, they are all in a row on the image like this:

H H H H H H

Everything works as it should.

On the second image, the hotspots are arranged approximately like this:

H
H H
H

However, in previewing or viewing the built WebHelp output, only the top-left hotspot works reliably. The other sections respond slowly or not at all. Ideally, the three spots on the left would make a column, and the 4th on the right would be as tall as the three together. But, I tried shrinking the big one to give the arrangement shown to see if that would help, and it did not.

I did already check to make sure the target frame is "Popup" for each, and all my linked topics are present and accounted for.

Any ideas?

-Steph

[LTinker68]

Did you double-check that the hotspots aren't overlapping? You might also want to open the topic in the Internal Text Editor and double-check that the correct links are associated with each hotspot.

[RamonS]

Also, one thing to check is if the dimensions of the image changed, but the field definitions were not updated. As far as I know the field definitions in the head of a page are unaware of anything changing to the image they refer to.

[stephgl]

Thanks for the leads, Lisa and Ramon.

I removed the image map, resized the image externally and replaced the file, then remapped it, making sure all of the links are correct and all the topics have the same popup target frame.



Panes 1 and 2 are working. Only the upper half of Pane 4 is working. Pane 3 and the lower half of Pane 4 are not working. It is as if the lower 55% of the image is not mappable.

I'm stumped, but then again I'm a newbie!

Thanks much,
-Steph

[RamonS]

Which browser do you use? Or did you try this in IE?

[stephgl]

HI Ramon,

I'm using IE7...

-Steph

[RamonS]

Try it in a web browser, not IE.

[stephgl]

I'm sorry, I don't understand. When I am using Internet Explorer to view the built output, is that not using a web browser?

[RamonS]

IE is a virus magnet (such as via ActiveX with its horrible security model) and it also doesn't adhere to web standards. IE is just bad software. So stuff not working in IE isn't really a surprise to me. That said, if it also doesn't work in Opera, Firefox, or if it has to be even Chrome then for sure something is wrong with the page. Fact is, a page coded up to W3C standard can render badly or not at all in IE. As far as I am concerned IE is crapware and not a web browser. In all fairness, IE7 is way better than IE6, but still a far cry away from where it should be.
What I'm getting at is that you should test the output in at least the most commonly used browsers (Firefox, Chrome, Opera, Safari, and yes, IE) to determine if it is a browser issue or a page issue. Working in QA I can't count how many times I marked up bugs that really were caused by inappropriate or incomplete test environments. Especially FireFox has several excellent add-ons that allow for detailed debugging of page content.

[LTinker68]

Try it in a web browser, not IE.

You gotta stop saying stuff like that. You're confusing the baby propeller heads who haven't been on the forums long enough to recognize your standard rants.

I'm sorry, I don't understand. When I am using Internet Explorer to view the built output, is that not using a web browser?

See.

[RamonS]

Why should I stop recommending proper QA practices? Only going by what IE shows will get the baby propellers in really hot water down the road. Now they have the time to take look at all the browser platforms and make decisions they find work best for them. Once stuff is out in the field they don't have that luxury and the claim "it works in IE" doesn't count a dime then. Or as in this case, when claiming it doesn't work in IE, so it must be a Flare problem is just stopping too short. Test with other browsers and see what happens, especially since IE ignores portions of W3C standards and replaces it with non-standard behaviour. If it works in none of the browsers I am all for taking a look at what Flare does or doesn't do.

[LTinker68]

I was referring to the fact that you don't count IE as a web browser. IE may not be a great web browser (I avoid it as much as I can), but it's still a web browser.

[SteveS]

I was referring to the fact that you don't count IE as a web browser. IE may not be a great web browser (I avoid it as much as I can), but it's still a web browser.

...and the only one a lot of end users know about. So we got to make stuff that works in IE. Know your target audience...

[stephgl]

IE functionality is my primary concern, not the last thing to consider, as I am working.

I am developing a Help file for applications that will be fully resident on the end user's PC. These applications require Windows, and will launch the Help file into an encapsulated instance of IE regardless of user's default browser of choice. (The user will have the option of launching the Help indpendently in their default browser from the Start menu but that is a secondary concern.) Since our software applications are used heavily in schools, we found this setup to be necessary in order to get around feature-disabling security problems in Windows, of which some are caused by using the MOTW and some caused by NOT using MOTW (and others ultimately caused by the school network admins, which is a topic unto itself).

So, I am required to have my WebHelp output work in IE7. In asking this question, I was not claiming that Madcap has a bug, or that IE has a bug, I assumed that as a new user I was probably doing something wrong. I was hoping that experienced users had either encountered this before and could tell me what I might be doing wrong. Or, if a known bug in either platform existed someone could clue me in on it so I could move on to something other than an image map to present the material in that topic or build in redundancy, such as image-mapped popup topics AND expanding text below the image,using the same snippets.

If anyone has any insight to offer on the original topic, I would appreciate it. For example, has anyone else seen this symptom in ANY context?

Thank you,
-Stephanie

[RamonS]

Well, one way to find out what the issue is would be to open the output in a different browser as mentioned before. That way the problem can be better isolated. But I guess any advice given is irrelevant when one isn't a Microsoft hugger.

[KevinDAmery]

Leaving browsers aside and getting back to the original symptoms....

Have you tried opening the topic up in a text editor and seeing if there is any difference in the HTML between the hot spots that work and those that don't?

FWIW, I've never seen this happen, although I'm using CHMs instead of webhelp so the behaviour may be different. But I don't see any inherent reason why one hotspot should work and another not work. This suggests to me that there's something in the code that isn't playing nice.

[stephgl]

Actually, your point was taken. I have just finished downloading Firefox and testing the page, it is working in Firefox and not in IE7 so perhaps this is a bug in IE7, I will go look for help elsewhere on the Web to see if this is a known issue with a known solution since it hasn't been seen here before.

Kevin, thanks, I did take a look with the text editor previously and the hotspots were all of the same structure. Nothing jumped out at me:

</map>
<map id="map2">
<area shape="rectangle" coords="4,16,65,57" href="../Pane1.htm" target="_popup" title="Click for Pane 1 description" />
<area shape="rectangle" coords="5,70,66,130" href="../Pane2.htm" target="_popup" title="Click for Pane 2 description" />
<area shape="rectangle" coords="4,142,64,277" href="../Pane3.htm" target="_popup" title="Click for Pane 3 description" />
<area shape="rectangle" coords="75,20,355,279" href="../Pane4.htm" target="_popup" title="Click for Pane 4 description" />
</map>

[KevinDAmery]

Yeah, that looks normal to me. Are there any differences in the popup topics themselves?

IE isn't exactly my favourite browser either, but it usually doesn't just act up at random. (It's dumb, but it's reasonably consistent in it's dumbnes....)

[stephgl]

Well, all I found on the Web about IE7 and image map problems were due to missing hashmarks with usemap, and those are present.

But, I did discover something else while experimenting. My mapped images are in a DIV tag along with a couple of paragraphs, and I've made a float: left image class to get the captions to appear to the right of the images and aligned with the top of the images. I am holding the DIV "open" to the bottom of the image using a last paragraph with no text, but the "clear" attribute applied.

I noticed that the mappable portion of my image, the top 50%, coincides with the location of the caption paragraphs. Where they stop, the image mapping stops! I reset the image class to remove the float, and now the entire image is mappable.

I tried it again, leaving the "clear" paragraph out of the div tag and reapplying the float: left class, and the problem reappears.

I do have one other image that is mapped and working correctly, it happens to be a long flat image so the caption paragraph next to it is about the same height. That's why the symptom was masked in that one.

So, will simply plan my content to not use the float and image map features together on the same picture, and simply leave the caption and description paragraphs below mapped images instead of trying to have them parked to the right.

-Steph

[KevinDAmery]

Wouldn't surprise me if IE is attempting to float the popups in a strange way. So I think your approach sounds like the simplest way to get things to work everywhere.

[LTinker68]

So, will simply plan my content to not use the float and image map features together on the same picture, and simply leave the caption and description paragraphs below mapped images instead of trying to have them parked to the right.

Well, that makes sense, because the map coordinates are fixed, not dynamic like the position of a floated element could be. Even just centering an image in a paragraph can cause problems with image maps, because the position of the image varies with the width of the browser window, but image map coordinates are fixed from the top left corner of the browser window. If you wanted the image indented a bit, then you could put it in the second column of a table, with the first column of the table having a fixed width. Wouldn't be centered, but if you wanted it indented under a heading then that would be a way to do so.

If you really wanted to use a floating DIV, your only option would be to break the images into numerous pieces, build the pieces into a table so that they realign to the proper layout (the table would be in the DIV), then do hyperlinks on the image pieces directly instead of using hotspots over the pieces.

[stephgl]

Thanks for the explanation of how image map coordinates work, LTinker68. That's the kind of thing this newbie doesn't know. I am fairly new to Madcap, CSS, HTML, all of it, and this is my first large project from scratch.

Since in my layout it is the caption text that moves and not the image itself when I apply float: left to the image, it is hard for me to remember it is the image that is "floated" and not the text. It just seemed weird that the paragraph length of the wrapped text would determine the mappable part of the image! I'm glad I now know what not to do, that's important.