Jump to content
Sign in to follow this  
commonpeoples

Placing image map code from dreamweaver into page body

Recommended Posts

commonpeoples
Rob
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] [/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×