FBML image maps will be the death of me!
August 18, 2010 1:43 PM Subscribe
Trying to create image map in Facebook and used image-maps.com now my image is HUGE and distorted. What's wrong?
I am trying to create an image map for a custom page in Facebook. The image I am using I am able to display at the correct size just by displaying the image. I uploaded it to image-maps.com and when I display it now the image is gigantic and cuts off.
My guess is it has something to do with the piece that seems to set it as a background.
I am trying to create an image map for a custom page in Facebook. The image I am using I am able to display at the correct size just by displaying the image. I uploaded it to image-maps.com and when I display it now the image is gigantic and cuts off.
My guess is it has something to do with the piece that seems to set it as a background.
Can you please replace your < and > characters with "<" and ">" respectively (without quotes) so the HTML will display properly on this site?
posted by The Winsome Parker Lewis at 1:49 PM on August 18, 2010
posted by The Winsome Parker Lewis at 1:49 PM on August 18, 2010
div style="display:block; width:400px; height:700px; background:url(http://mywebsite.com/image.jpg); position:relative; margin:2px auto 2px auto;">
change the width and height to the demensions of the linked image.
posted by royalsong at 1:51 PM on August 18, 2010
change the width and height to the demensions of the linked image.
posted by royalsong at 1:51 PM on August 18, 2010
Response by poster: Royal Song: I tried that and all it does is cut off parts of the jpeg.
posted by UMDirector at 2:02 PM on August 18, 2010
posted by UMDirector at 2:02 PM on August 18, 2010
Is your mywebsite.com your website, or is it image-maps.com?
Something blew up the size of your image when you made the image map; it sounds like.
posted by royalsong at 2:06 PM on August 18, 2010
Something blew up the size of your image when you made the image map; it sounds like.
posted by royalsong at 2:06 PM on August 18, 2010
Response by poster: <div style="display:block; width:400px; height:700px; background:url(http://mysite.image.jpg); position:relative; margin:2px auto 2px auto;">:
<div>:<:a style="left:53px; top:373px; background:transparent; display:block; width:290px; height:0; padding-top:98px; overflow:hidden; position:absolute;" title="website" href="mywebsite.com">:%lt;/a></div>:
<:div>:<:a style="left:398px; top:502px; background:transparent; display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;"%gt:</a>:%lt:/div>:
</div>:
posted by UMDirector at 2:07 PM on August 18, 2010
<div>:<:a style="left:53px; top:373px; background:transparent; display:block; width:290px; height:0; padding-top:98px; overflow:hidden; position:absolute;" title="website" href="mywebsite.com">:%lt;/a></div>:
<:div>:<:a style="left:398px; top:502px; background:transparent; display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;"%gt:</a>:%lt:/div>:
</div>:
posted by UMDirector at 2:07 PM on August 18, 2010
Response by poster: hrm the > didn't see to work...
posted by UMDirector at 2:08 PM on August 18, 2010
posted by UMDirector at 2:08 PM on August 18, 2010
Look like you used colons instead of semicolons at the end of those...
posted by The Winsome Parker Lewis at 2:22 PM on August 18, 2010
posted by The Winsome Parker Lewis at 2:22 PM on August 18, 2010
Okay, I was able to extract the HTML from what you posted. Maybe a dumb question, but have you loaded the image-maps.com image URL in your browser to verify that it looks correct there, and that the dimensions match those of your original image?
posted by The Winsome Parker Lewis at 2:30 PM on August 18, 2010
posted by The Winsome Parker Lewis at 2:30 PM on August 18, 2010
Response by poster: Does image-maps generate a whole new image I need to download?
Perhaps I am confused about how it works?
posted by UMDirector at 4:49 PM on August 18, 2010
Perhaps I am confused about how it works?
posted by UMDirector at 4:49 PM on August 18, 2010
Response by poster: Royalsong- My website is my website, not image-maps. When offered the options on their page to enter an image URL I entered where it was currently hosted.
posted by UMDirector at 4:51 PM on August 18, 2010
posted by UMDirector at 4:51 PM on August 18, 2010
Is this somewhere on the web you we can look at it?
Facebook *does things* to code inserted into various places. Any way we can see your attempt in action?
posted by artlung at 7:21 PM on August 18, 2010
Facebook *does things* to code inserted into various places. Any way we can see your attempt in action?
posted by artlung at 7:21 PM on August 18, 2010
Response by poster: artlung - I would really rather not share the location for various work related reasons.
What type of *things*?
Also I noticed if I made the entire image a button it doesn't blow it up. It means I can't define an area of the image but that must be important somehow.
posted by UMDirector at 6:35 AM on August 19, 2010
What type of *things*?
Also I noticed if I made the entire image a button it doesn't blow it up. It means I can't define an area of the image but that must be important somehow.
posted by UMDirector at 6:35 AM on August 19, 2010
I understand the sensitivity issue.
Facebook "sanitizes" code inserted into it. Basically it prevents you from overriding their CSS, or using malicious malformed HTML, or using JavaScript to access elements on the page. developers.facebook.com has information about FBML and FBJS. I suspect the issue is about the properties in the html you're putting in getting overridden or deleted somehow. These changes can occur in non-iframe Facebook Apps and on "Pages" (which is where I have experience with them). You can view source on the page when published and compare to see what changes FB is carrying out, and that may give you hints as to what is disallowed.
If you can put the element on a page *all* it's own, you may be able to use an iframe, though under some circumstances those are not legal either.
Sorry for the delays answering. MeMail me and I can try and help more.
posted by artlung at 9:23 AM on August 20, 2010
Facebook "sanitizes" code inserted into it. Basically it prevents you from overriding their CSS, or using malicious malformed HTML, or using JavaScript to access elements on the page. developers.facebook.com has information about FBML and FBJS. I suspect the issue is about the properties in the html you're putting in getting overridden or deleted somehow. These changes can occur in non-iframe Facebook Apps and on "Pages" (which is where I have experience with them). You can view source on the page when published and compare to see what changes FB is carrying out, and that may give you hints as to what is disallowed.
If you can put the element on a page *all* it's own, you may be able to use an iframe, though under some circumstances those are not legal either.
Sorry for the delays answering. MeMail me and I can try and help more.
posted by artlung at 9:23 AM on August 20, 2010
« Older Enterprise Desktop Management Packages? | Where can I find a pickup volleyball game in NYC? Newer »
This thread is closed to new comments.
div style="display:block; width:400px; height:700px; background:url(http://mywebsite.com/image.jpg); position:relative; margin:2px auto 2px auto;">
div a style="left:53px; top:373px; background:transparent; display:block; width:290px; height:0; padding-top:98px; overflow:hidden; position:absolute;" title="Image!" href="http://MyTargetWebsite">/div
div>a style="left:398px; top:502px; background:transparent; display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;">/a /div>
posted by UMDirector at 1:46 PM on August 18, 2010