Image map on a content canvas?

Hello,
Has anyone had success creating an image map using a Content Canvas Portlet Template?
for some reason, i can only get the image to show, or the outline of the map.
I opened up the template and put all the code in the html area (where you can add html like a text editor(the toggle layout/source view - used the source view)
Help?
Computers are like Old Testament gods; lots of rules and no mercy. ~Joseph Campbell

When i'm not been able to get the right size i will add a pre-form-trigger and resize the object at runtime. It's saves me a lot of time instead of trying to instruct the generator to do so.
I'm always using the pre-form-trigger and not the when-new-form-instance-trigger because Headstart will do the initialization after the pre-form-trigger is fired and so it's taking the changes made in the pre-form-trigger into account.

Similar Messages

Bug Report: DW CS5.5 Crashes Every Time On An Image Map

I am posting this in lieu of contacting Adobe support. I went to my account to send Adobe a bug report and was told I needed to contact support via phone. That's pretty crappy. As a licensed user who's owned it less than three months, there's no direct path to tell you guys that your software is broken?
Here's the deal: I am working on an HTML landing page with one image map attached to one image. Literally, every time I make a modification to the code near the image (tied to the image map) then click into the live preview window, Dreamweaver CS5.5 crashes like a 70-year old on a bar of soap on the floor of the shower. It crashes hard. My only relief is to save the file before clicking into the live preview window. That's my only workaround to the problem.
But I'm left amazed that I can crash it every single time over an image map, flicking from the code to the preview pane. You would think that at version 11.5, a minor thing like that wouldn't hemorrage the supposed creme de la creme of web design software.
Here's the code I'm editing that causes it to crash:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <?php
          require_once("/var/www/html/c/index.php");
          $recip_name = $subscriber['first_name'].' '.$subscriber['last_name'];
          ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/c/print.css" type="text/css" rel="stylesheet" media="print">
<title>Membership Special - No Commitment</title>
</head>
          <?php // Google Link Tracking Code ?>
          <script type='text/javascript' src='/c/google-analytics-code.js'></script>
          <?php // End Google Link Tracking Code ?>
    
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
    <style type="text/css">
                    body {font:normal 14px/1.25em Georgia, "Times New Roman", Times, serif;}
                    h1,h2,h3,h4,h5,h6 {font-weight:bold;color:#333333;}
                    h1 {font:normal 28px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h2 {font:normal 24px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h3 {font:normal 20px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h4 {font:normal 16px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h5 {font:normal 12px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h6 {font:normal 8px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    a, a:link, a:visited, a:active {color:#0055FF;}
                    a:hover {color: #002AFF;}
                    #wrapper {margin:0 auto;width:432px;}
                    #header, #footer {margin:20px auto;text-align:center;position:relative;}
                    #footer {margin:40px auto;}
                    #coupon {position:relative;}
                    #coupon, #coupon img {margin:0 auto;text-align:center;}
                    .personalization {position:absolute;width:100%;text-align:center;text-transform:uppercase;}
                    .printcoupon {text-transform:uppercase;}
          </style>
<body>
<div id="wrapper">
<div id="header">
          <h3 class="printcoupon"><a href="javascript:window.print();">Click here to print your coupon</a></h3>
</div>
<div id="coupon">
          <img src="images/19415coupon-01.jpg" width="432" height="432" />          
<img src="images/19357coupon-02.jpg" width="550" height="602" usemap="#imagemap" class="dontprint"/>
</div>
<div id="footer">
          <h3 class="printcoupon"><a href="javascript:window.print();">Click here to print your coupon</a></h3>
</div>
</div>
<map name="imagemap">
          <area coords="29,69,521,197" shape="rect" href="javascript:window.print();">
          <area coords="29,212,521,339" shape="rect" href="http://www.google.com" target="_blank" onClick="recordOutboundLink(this, 'Landing Page', 'http://www.google.com');return false;">
                    </map>
</body>
</html>

Bug Report and Feature Request https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

Images and image maps do not respond to events on Safari

Hello everyone,
We have been experiencing issues with events not responding to images associated with image maps, on Safari browser. After the DOM is loaded with new image and corresponding image maps, events such as mouseover and click observing this divs do not respond or get triggered. DOM seems to be updated correctly but behaves differently (and it works correctly in all other browsers except Safari).
This behaviour is only noticed in Safari browser running both on Windows and Mac. (Tested on Safari Version 3.1.1 on running on Windows and Mac)
For you all to have a closer look at this issue, I have created a sample that has this problem, similar to one we experienced during one of our recent projects. Please click on the link below to get to the sample (I recommend you to try this either in Firefox or IE before you do on Safari)
http://www.hivegroup.com/safari/test.html
(In the above sample,
- the javascript code initializes the DOM with image and image map
- assigns two event listeners to the div containing this image and image map
- when mouse pointer brought over the image, it shows the area id in the 'mobox' div
- when clicked, DOM is updated with a new image and new corresponding image map, assigns new event listeners and should continue with the same kinda behaviour it did for the first image (but doesn't in Safari browser))
All inputs on this issue are welcome and greatly appreciated.
Thanking you in advance.
Regards,
Shashi.

Let me explain what the pink area is. Like the first image that contains two white boxes, the pink area (as you call it) is a new image (containing four pink areas or boxes having an area id denoted to each) that imgDiv occupies after the 'click' event occurs.
Yep, i gathered that from seeing it work on firefox...
The point that I'm trying to make here is, there shouldn't be any difference in behaviour when imgDiv holds first image (two white boxes) or the second image (four pink boxes) that you get after we click on image or the third image (containing 6 boxes, multiple colors) which you won't be able to reach in safari browser.
well... I can reach them, but only via the blue space.
. We'll notice change in the red box displaying target id only when we mouse over a new area that is not currently being displayed in the red box.
except in webkit for safari 2, where thered bpx content sticks at whatever it was when the first image was clicked, unless mouse is moved to the 'all area', and then it sticks on imgdiv.
I completely understand what you see in safari 2. But are you saying there's some error in my script ? If so could you please point out and justify.
I dunno Shashi, just pointing out the errors that Safari 2 reports when I view your test page, in the hope it might help. I know little of javascript

Adding A HREF or image map to an image puts 3px L/R padding on image

Hi all --
I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.
I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.
I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.
Help! How do I get rid of this white space but still keep the link on the image??
[I've attached a screen shot showing a before/after of the images without/with links]
Thanks in advance!
//kl

First, how are you looking at it?
Internet Exploder frequently adds padding and space -- especially where there is white space in your code (so take that out for a start). Additionally, if you are using Microsoft's non-compliant browsers, you will note that many of them automagically adjust placement of objects and you have to write code specifically to stop that from happening.

For Internet Exploiter 6, you literally may need to rewrite navigation:

Now my menu has a special CSS stylesheet for that idiotic browser here:
ul#content {
background-image: url("../content_images/bg.jpg");
background-repeat: repeat-x;
cursor: default;
height: 30px;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
ul#content ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
ul#content ul li {
background-image: none;
border-bottom: solid 1px black;
float: none;
margin-bottom: -1px;
ul#content li {
background-image: none;
border-bottom: solid 1px black;
float: left;
margin-bottom: -1px;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
ul#content li ul {
display: none;
top: 0;
ul#content li.hover ul {
display: block;
position: absolute;
ul#content li.current ul {
position: absolute;
ul#content li {
background-image: url("../content_images/center.jpg");
background-repeat: repeat-x;
ul#content li span {
background-image: url("../content_images/right.jpg");
background-position: right top;
background-repeat: no-repeat;
display: block;
ul#content li span a {
background-image: url("../content_images/left.jpg");
background-position: left top;
background-repeat: no-repeat;
color: #fff;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
height: 20px;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100px;
ul#content li * a {
height: auto;
width: auto;
ul#content li span * a {
height: auto;
width: auto;
ul#content ul.level-1 {
left: 0px;
top: 100%;
ul#content ul.level-1 li {
background-image: none;
ul#content ul.level-1 li a {
background-color: #DA4D33;
background-image: none;
border-bottom: dotted 1px #E9E5F9;
border-left: solid 1px #E9E5F9;
border-right: solid 1px #656586;
color: #fff;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 100px;
ul#content ul.level-1 li a.active {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-1 li * a {
height: auto;
width: auto;
ul#content ul.level-1 li span * a {
height: auto;
width: auto;
ul#content ul.level-1 li.hover a {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-1 li.current a.current {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-2 {
left: 112px;
ul#content ul.level-2 li {
background-image: none;
ul#content ul.level-1 ul.level-2 li a {
background-color: #DA4D33;
background-image: none;
border-bottom: dotted 1px #E9E5F9;
border-left: solid 1px #E9E5F9;
border-right: solid 1px #656586;
color: #fff;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 100px;
ul#content ul.level-1 ul.level-2 li a.active {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-2 li * a {
height: auto;
width: auto;
ul#content ul.level-2 li span * a {
height: auto;
width: auto;
ul#content ul.level-1 ul.level-2 li.hover a {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-1 ul.level-2 li.current a.current {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;

How to set "Image Map" attribute to "Polygon" via javascript in Illustrator CS5

Ok, so I have this little script I've written that I want to use to go through a bunch of paths in a document and give each path a url for use in an image map. I want each link to be a Polygon because, well, let's face it, "Rectangle" is useless 99% of the time. Obviously, the way you would do this manually would be to open the Attributes panel and set the Image Map attribute to Polygon and type a URL in the URL field. Fine. Easy enough. However, when scripting the process, it seems one can only set the URL (or the uRL [sic] as documented in the javascript reference) of the PathItem. In other words:
pathItem.uRL = "http://someurlfor.me";
Unfortunately, this defaults the "Image Map" attribute to "Rectangle" (which we already know is useless 99% of the time.) SO, anyone out there know how to change that attribute to "Polygon?"
Btw, I'm on Illustrator CS5 and have been using this reference:
http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/pdf/illustrator/scrip ting/illustrator_scripting_reference_javascript_cs5.pdf
Thanks,
-Matt

We found that with the following setting, the problem is almost solved :
theme.setQueryWindowMultiplier(1);
theme.enableAutoWholeImage(true);
We still have a problem : a portion of the base map appears black most of the time, on Blackberry only (Opera Mini) ... like 1/5 of the map ... the right side ... any idea ?
Thanks,
JP

Image Map Linked to Text w/in Same Topic (RoboHelp 10)

I would like to create an image map using certain text that resides in the same topic as the image. I do not want the user to see the text when viewing online; I only want them to see the pop-up when they click on the mapped image. I do, however, want the text to print if the user chooses to do so. I've been playing around with bookmarks and conditional flags but can't seem to get it to function properly. Can what I'm trying to do be done?

I doubt this is achievable, certainly not within the Rh interface. You could link the image to a popup but it would have the content of another topic set up for the purpose. As such it would not be included when you print the topic with the image.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

Image map areas not dynamic

I have created a complexer version of the imageMenu, http://www.phatfusion.net/imagemenu/, which allows the active shapes to be any shape, not only rectangular, see http://jrvproducts.nl/ . This works great in all browser except safari, not in windows, neither on Mac.
The menu works with a single transparent overlay image which has image map areas (see source if you like. The map start at line 37). These areas are updates onDomReady and also when the menu is in motion by calculating the coordinates and setting the 'coords' attribute of every area. Setting this attribute doesn't seem to work in safari. I believe safari 3.0 on windows did do it onDomready, but not after page load. Now, in 3.1, the 'coords' aren't even being set onDomready anymore.
To see the 'coords' updating in action, see http://www.saulmade.nl/forum/slideMenu/ . Here I enabled the 'draw areas' option I've built for testing purposes. (It's actually drawing the shapes on canvas, but used the same coordinates as by which the areas are updated)
This looks to me like a bug, but perhaps anyone has a better explanation?
Can I submit issues to Apple?

darn, no-one seems to know an answer
To get this a bit further, or at least under the attention of the developers, *is there any way I can submit issues to Apple?*

Retaining Image Maps

I am attemting to take a very complex help system and put it
into a web site. However, the images that I used are too large for
a web based system. In order to solve that issue, I have converted
the images from a bmp format to gif.
My goal is to change the images in several pages to link to
the new gif images. These images will be the same dimension and
content as those that are replaced. Only the imahe name will be
changed.
Each of these images also contains a number of image maps.
Unfortunately, when I change the image in the help system, I also
loose the image maps that I use to move from one page to another. I
have several hunderd of these image mappings, so manually replacing
them all would be a very large project. Is there a way of changing
the image without also loosing the image mapping?

Brent,
I would first try a brute force approach:
1. Create a copy of the help system to work with
2. Update all the images from bmp to gif but retain the file
names
3. Open all the files in the system with a text editor and do
a search and replace all for .bmp to .gif
Cheers,
Donal

Ho do you remove Border on Image Map Links in Safari

Hi,
I am having a problem with Safari 5.1 with an image map. I designed an Image Map for my Website in Fireworks with three hotspots.
When you click on the hotspot in Safari to link to the page a border appears around the hotspot. It doesn't happen in any other browser.
Anyone have an idea how to get around this?
Web address is: http://79.170.44.76/agrisearch-site.org/

Well I found out! Here yer go! Paste the code in bold in the same area as the example and any Dreamweaver CS5.5 Hot Spots you create, this will get rid of the Blue Border when the links are clicked on in Safari. You would think either Apple or Adobe would sort this? Make life alot easier?
<html>
<head>
<title>"Trailer Music"</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
          margin-left: 10px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
*:focus
outline: none;
outline-width: 0;
</style>
</style>
</head>
<body bgcolor="#FFFFFF">

<table id="Table_01" width="742" height="578" border="0" cellpadding="0" cellspacing="0">
          <tr>
                    <td>
                              <img src="http://www.donhughes-music.com/mailtrailers/images/index_01.jpg" alt="image1" width="361" height="298" border="0"></td>
                    <td><img src="http://www.donhughes-music.com/mailtrailers/images/index_02.jpg" alt="dhm link" width="381" height="298" border="0" usemap="#click"></td>
          </tr>
          <tr>
                    <td>
                              <img src="http://www.donhughes-music.com/mailtrailers/images/index_03.jpg" alt="" width="361" height="280" border="0" usemap="#Map"></td>
                    <td><a href="http://trailers.donhughes-music.com"><img src="http://www.donhughes-music.com/mailtrailers/images/index_04.jpg" alt="image4" width="381" height="280" border="0"></a></td>
          </tr>
</table>

<map name="click">
<area shape="rect" coords="51,135,260,185" href="http://trailers.donhughes-music.com" target="_blank" usemap="#click" border="0">
</map>
<map name="Map">
<area shape="rect" coords="12,140,276,198" href="http://www.donhughes-music.com" target="_self" alt="DHM Link">
</map>
</body>
</html>

Mistake creating an Image Map

Hello, I have a problem with my Image Map. Here are my steps:
1.Create areas for the Image Map
2.Create the Image Map with areas
3.upload the image
4.create the OTH file
5.Enable rendering information option
6.Create KM navigation iView and its layout set mode as default
All references for directories and for my pic are OK but it doesn´t show any Image Map. I need help please!
Thank you

Hi,
   You can follow this example:
In KM, image maps are used for a graphical depiction of folder contents. These objects are displayed using graphics instead of in their normal text form.
Step 1 Determine the image you want to use for navigating. This can be any JPG or GIF file. In this example I will reference the file world.gif.
Step 2 Configuring an image map. Take your image file world.gif and place it in the system. For our example place the file in the path: ../knowledgemanagement/etc/public/graphics. The subdirectory graphics was created within the public folder.
Step 3 In the documents folder, create the following folders:
World
     Within the World folder, create the subfolders:
     North America
     South America
     Europe
     Asia
Note: you can create as many folders as you like. This structure will serve as the navigation structure for world.gif image map.
Step 4 Determine the navigation coordinates for the image world.gif. Any tool can be used, for this example the tool GeoHTML was used. It is a freeware tool that can be downloaded from http://www.fegi.ru/geohtml.
The following coordinates were determined for the folders:
     North America: 253, 255, 303, 285
     South America: 424, 171, 474,201
     Europe: 368, 43, 418, 73
     Asia: 276, 37, 326, 67
Step 5 Create new link-sensitive Areas for the image map. Menu path: Configuration -> Content Management -> User Interface -> Image Maps -> Areas
Please note, an area would need to be defined for each area on the image map that would be link-sensitive areas.
Step 6 Defining an Image Map. In this step the name of the image map will be defined as well as specifying the path of the image, the tooltip, and lastly assigning the areas.
Step 7 Configure an Object Type Handling (OTH) file for the image map. OTH files are located in the /oth subdirectory within the /etc repository. Copy an existing OTH file in this subdirectory and copy it to world.oth. In This OTH file, define the navigation path, collection renderer, layout controller, action and image map. The OTH file should look as follows:
<?xml version="1.0"?>
<ObjectTypeHandler Name="Image Map world"
Class="com.sapportals.wcm.service.objecttypehandler.GenericObjectTypeHandler">
<SelectionCriteria>
<Paths>
    <Path>/documents/World</Path>
</Paths>
</SelectionCriteria>
<Properties>
<Property Key="rndCollectionRenderer"              Value="ImageMapRenderer"/>
<Property Key="LayoutController"                   Value="DefaultLayoutController"/>
<Property Key="rndShowActions"                      Value="false"/>
<Property Key="rndMap"                      Value="MapOfWorld"/>
</Properties>
<Actions/>
</ObjectTypeHandler>
Step 8 Display the image map. For the navigation iView that is being used, ensure that the iView property Layout Set Mode is set to default.
Step 9 Reload the object type handler in order for the system to read the new oth file world.oth. This can be done by within the Rendering Information link in any navigation iView for a user that is specified in the Debugging Settings (this is done in the user interface configuration).
Another option to reloading the object type handler would be restarting the J2EE engine.
Step 10 In the navigation iView for this mage map, navigate to the image map. In this example, the menu path would be documents/World
Patricio.
ps: If you want I can send you complete example.

Content Canvas - 1 Picture Only?

How can I have more than one image on a content canvas? (Within the Pt:image command)
So far, it kicks out the code.
Ray W

Which pt:image command are you referring to? Can you attach the snippet of code that you are trying to use?
Thanks
jennifer

URGENT: Image map problems

Hi,
I created an image map last night for my online portfolio, and I have a phone interview for an important job I'd love to get tomorrow. The website is www.lukekelly.com.
The problem is that the image map is working in IE and Opera, but not in Firefox or Chrome. I've gone over the code with a fine tooth comb, and can't figure it out. Can you help?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LukeKelly.com - Online Portfolio of Luke Kelly</title>
<link rel="stylesheet" type="text/css" href="structure.css" />
</head>
<body>

<div id="container">
<map id="corkboard">
     <area shape="rect" coords="69,286,334,649" href="http://www.firstpersonpublishing.com" alt="First Person Publishing" title="First Person Publishing" />
    <area shape="rect" coords="469,292,711,623" href="flash/CPA_project.html" alt="Flash website" title="Flash website" />
    <area shape="rect" coords="79,717,321,1092" href="xml/index.htm" alt="XML website" title="XML website" />
    <area shape="rect" coords="468,716,722,1030" href="css/wedding/index.htm" alt="Wedding website" title="Wedding website" />
</map>
<img src="image.jpg" alt="Luke Kelly Online Portfolio" title="Luke Kelly Online Portfolio" usemap="#corkboard" style="border:none" />
</div>

</body>
</html>
Thanks in advance for any help you can provide.

Hi Luke,
Just add name attribute to your map tag as following:
<map id="corkboard" name="corkboard">
and it should work.
Regards,
Vinay

IE 6.0 & Image maps

I have a simple page with only AP elements that works fine
with IE 7.0 and Firefox.
My menu is comprised of AP elements with an image and an
image map on it. Simple Show/Hide Elements and Swap Image
behaviours do the trick.
However, IE 6.0 users report this: They see the visible APs
when the page load but not the image map (their cursor doesn't even
switch to a hand when they hover) so nothing works.
At Browser Compatibility I found the Z-index bug and fixed it
by applying Z-index to all elements. IE 6.0 still ignores the image
maps though.. Why?
Thank you in advance.
M
PS: All I am getting as errors is these two lines in the
default.css "div {unicode-bidi:bidi-override;}
span {unicode-bidi:bidi-override;}" which result in an
Unsupported property: unicode-bibi
Is this related and frankly, what is it?

> What exactly do you mean I am on the wrong foot already?
1. Your home page contains no readable text. This is usually
regarded as
an SEO blunder. Devoting the time and effort to create such a
page is
really a waste, as it presents one more hurdle between your
visitor and the
information they seek - they will bookmark the inner pages,
and never see
this page again. And it's a waste of your most valuable SEO
tool - the home
page. With no readable text, it cannot be adequately spidered
by the SE
bots.
2. You have used the unicode-bidi style in your stylesheet.
Are you sure
you need that? Read this to see what it does -
http://www.blooberry.com/indexdot/css/properties/intl/unibidi.htm
3. Your entry page, being all graphics, doesn't suffer from
text resizing.
This is good an bad. It's good in the sense that since you
have used only
absolute positioning, you will not experience the usual
problem with text
content resizing. It's bad in the sense that I explained
above, and also in
an accessability sense - those who need to resize the text to
read the page
will not be able to do so. In other words, you have lost
accessability on
this page.
In general, using absolute positioning as a primary layout
method is a big
mistake. Read this -
http://apptools.com/examples/pagelayout101.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"miltos75" <[email protected]> wrote in
message
news:[email protected]...
> Thank you for your prompt reply.
>
> No I don't have IE 6.0. IE 7.0 which I have installed
works fine, and so
> does
> Firefox.
>
> The link is this:
http://www.beonline.com.gr
>
> Yes, for the menu buttons I have one visible AP element
which is the
> inactive
> button and another which is hidden and is the active
button if selected.
>
> What exactly do you mean I am on the wrong foot already?
What would you
> suggest? Why is IE such a pain...???
>
> Thanks again,
>
> Miltos
>

Image map links not working in all browsers

Hi, I develop HTML marketing emails once a week and my boss
has recently informed me that some, not all, of the image mapping
links do not work in all browsers or emails i.e. MacMail, Opera,
Safari, etc. He's positive there's something in Dreamweaver that
makes the links universally accommodated no matter what email/web
browser you use, but I haven't been able to find a solution as of
yet.
Any help on this would be appreciated, thanks!
:music;

Let's start with the least critical issue. Your boss and his
boss are
simply wrong. An HTML link is just an HTML link, whether
created in DW or
in Notepad.
Now, on to the meat. When you upload this page to the web, do
the links
work? And when you say that they don't work, what do you
mean? Do you mean
that when you click on them, you are not taken to the linked
page? Which
links are not working?
Finally, why do you have your mapped image also within an
anchor tag?
<a href="
http://www.beyondthewall.com/xcart/giftcert.php"><img
src="Slice.jpg" width="263" height="58" border="0"
usemap="#Map" /></a>
Is that the one where the link doesn't work?
Can you post a link to this page on the web, please?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"blaise napolitan" <[email protected]> wrote
in message
news:[email protected]...
> Thanks for the reply, and that's what I would have
figured but in this
> case the
> entire thing is an image map so there's no absolutely
positioned elements
> that
> would overlay the links. It's just a simple table with
the main picture
> mapped
> out with a few links. I'm assuming it either has to do
a) the image not
> being
> displayed correctly due to a built in email security
feature or b) my boss
> and
> his boss are mistaken (which wouldn't surprise me). I'll
post the code
> just in
> case, thanks for all the help.
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
> <title>Untitled Document</title>
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <table width="767" border="0" align="center"
cellpadding="0"
> cellspacing="0">
> <tr>
> <td><a
> href="
http://www.beyondthewall.com/xcart/beyond_the_wall_posters_prints.html"><i
> mg src="Logo.jpg" width="288" height="58" border="0"
/></a><a
> href="
http://www.beyondthewall.com/xcart/giftcert.php"><img
> src="Slice.jpg"
> width="263" height="58" border="0" usemap="#Map"
/></a><a
> href="
http://www.beyondthewall.com/xcart/beyond_the_wall_posters_prints.html"><i
> mg src="pay.jpg" width="216" height="58" border="0"
/></a></td>
> </tr>
> <tr>
> <td><img src="main.jpg" alt="main" name="main"
width="767"
> height="513"
> border="0" usemap="#mainMap" id="main" /></td>
> </tr>
> <tr>
> <td bgcolor="#FFFFFF"><div
align="center"><a
> href="mailto:[email protected]"
class="style42"
> style="text-decoration:none" border="1">*To
Unsubscribe Click
> Here*</a></div></td>
> </tr>
> <tr>
> <td bgcolor="#7e0997"><div
align="center"><a
> href="
http://www.beyondthewall.com/xcart/beyond_the_wall_posters_prints.html"
> class="style29"
>
style="text-decoration:none">www.beyondthewall.com</a></div></td>
> </tr>
> </table>
>
> <map name="Map" id="Map"><area shape="rect"
coords="78,33,79,34" href="#"
> /></map>
>
> <map name="mainMap" id="mainMap">
> <area shape="poly"
>
coords="10,7,376,16,369,227,211,218,177,92,122,85,12,109,13,118"
> href="
http://www.beyondthewall.com/xcart/posters_prints_novelty_sex.html"
> />
> <area shape="poly"
coords="13,117,121,90,174,99,216,270,9,294"
> href="
http://www.beyondthewall.com/xcart/six-pack-24x36.html"
/>
> <area shape="poly"
coords="219,225,393,251,347,469,174,407"
> href="
http://www.beyondthewall.com/xcart/david-beckham-arm-st4514-24x36.html"
> />
> <area shape="poly"
coords="226,489,14,496,13,303,199,283,168,410"
> href="
http://www.beyondthewall.com/xcart/tension.html"
/>
> <area shape="poly"
coords="394,16,674,16,668,241,387,238"
> href="
http://www.beyondthewall.com/xcart/colin-egglesfield-24x36.html"
/>
> <area shape="poly"
coords="407,251,665,254,661,501,403,492"
> href="
http://www.beyondthewall.com/xcart/daniel-24x36.html"
/>
> <area shape="rect" coords="681,15,761,508"
> href="
http://www.beyondthewall.com/xcart/beyond_the_wall_posters_prints.html"
> />
> </map></body>
> </html>
>
>

Image map in html email- color of text

I'm using some image maps in an html email newsletter and using the alt tag on some of the images to give a brief description as to what the newsletter content covers.
The issue I have is that the alt text is in the color blue. Can I control that and make it black? I've tried a few ideas but the text stubbornly remains blue........grrr!
Thanks
Os

RikRamsay14 wrote:
I think this is going to be one of those cases where I disagree with a large amount of your arguments. I find almost no valid reason for using a "slice and dice" method of email marketing and if the client is going to insist on that (or at least not accept the little extra time/cost in creating a template), it should be made very aware to them that the impact of the email will be severly diminished.
The hardest/most time consuming part of the template building (or HTML email building) is getting your first one that works consistently in all/most email clients. Once you have that one, its very easy and fast to change the layout, edit content etc. Add to that MailChimps resources on pre-designed HTML email templates and your good to go. http://mailchimp.com/resources/html-email-templates/
As for your examples above, they are not all done the same way.
http://www.screwfix.info/nl/jsp/m.jsp?c=4d2f0f00cbac503dfb is a relatively good example as the main focus of the email is in text - the top and the offer. The images are all products.
http://tre.emv3.com/HM?a=ENX7CloMai0H8SA9MOBj7h3nGHxKXLxSfPcStGb5lw8W0 bBhOG5mpqVsje_HheCmyF2x is a bad one as it's images all the way to the disclaimer.
You can see the differences by turning images off in your browser using the web deveoper toolbar.
I agree only IF you have a client that adheres to the template. I don't know many or any clients that adhere to anything personally. Its like when producing a magazine. Good ones adhere to a template design but they are generally produced by large companies with a good budget, a marketing department and a copywriter to make sure the content fit. My client are not in that league, they tend to write the copy themsleves and don't edit anything or give too much care or attention to following any layout. My job is to make what they supply fit. A template in that senario is going to be completley useless.
The first example above is probably 95% images....and you think that's a realatively good html email example?

Image map on a content canvas?

Similar Messages

Maybe you are looking for