Placing image map code from dreamweaver into page body

[commonpeoples 0]

• Point A

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

• Point B

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

• Point C

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

[Rob 547]

First, you're trying to embed an entire webpage into a content area. That won't work with any theme, framework or template. Let's break it up, and try to do this right. I have my doubts, as you will see. [code][/code] This is the javascript and would be placed in Dashboard > PlatformPro > Custom Code in the Header section. Just paste it there and save. That ensures it loads each time your site is viewed. The next bit is the CSS and should also go in the Custom Code in CSS Rules area: [code].map {margin:0;padding:0;width:450px;height:250px;background:url(tj.jpg) top left no-repeat #fff;font-family:arial, helvetica, sans-serif;font-size:8pt;} #map li {margin:0;padding:0;list-style:none;} /*THIS IS A PROBLEM as the background should not be set in this manner. It is the entire site background so this is really bad coding.*/ body {background-image: url(map.jpg);} #map li a {position:absolute;display:block; /*Specifying a background image (a 1px by 1px transparent gif) fixes a bug in older versions of IE that causes the block to not render at its full dimensions.*/ background:url(blank.gif);} #map li a:hover span {position:relative;display:block;width:250px; left:20px;top:20px;padding:5px;border:1px solid #000;background:#fff;text-decoration:none;color:#000;filter:alpha(opacity=80);opacity:0.8;} #map a.pointA {top:82px;left:132px;width:40px;height:40px;} #map a.pointB {top:1px;left:275px;width:50px;height:50px;} #map a.snail {top:135px;left:30px;width:50px;height:50px;} #map a.pointB {top:192px;left:174px;width:40px;height:40px;} #map a.pointC {top:71px; left:297px; width:40px; height:40px;} #map li a span { display:none; }[/code] Your CSS has many seriously bad issues. First, the images it includes are not properly set. They're looking to a local machine, rather than to a URL and as a result wouldn't show. Next, as I noted in the CSS, it's setting a body background which is going to be applied site-wide and is improperly done. PlatformPro allows a background image, but I suspect you only need the background in a content area, thus the body tag is inappropriate. This code (below)is also not too good as it's setting a div for the body, ignoring the fact that it's not just a page, but a site. The body tag will cause site-wide issues. The code goes into a page, which MUST be in HTML View. It has redundant code and Dreamweaver is apparently not using CSS3 or HTML5. I've no assurance any of this will work. Save your page and see. [code]

• Point A
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
• Point B
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
• Point C
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

[/code]