Jump to content


Photo

Adding Image Maps To Rapid Weaver Theme


  • This topic is locked This topic is locked
4 replies to this topic

#1 mitch

mitch

    RAGE Newbie

  • RAGE Members
  • Pip
  • 4 posts

Posted 05 August 2008 - 04:26 PM

Hello, just bought Map Design and have read the manual and watched the video for adding image maps to RapidWeaver. I want to add image maps to this website (logos at the foot of the page).

The page header was created using ImageReady. HTML code for this was added to the HTML panel also.

I added the html code to the HTML panel and the image in the assets panel. However, the footer now appears under the header like this:
Posted Image
Here's the HTML code for the header and footer:
<!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>
<title>header_home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF">
<!-- ImageReady Slices (header_home.psd) -->
<img id="header_home" src="assets/header_home.gif" width="822" height="160" border="0" alt="" usemap="#header_home_Map" />
<map name="header_home_Map" id="header_home_Map">
<area shape="poly" alt="" coords="711,32, 787,38, 781,124, 705,117" href="/others/titans/join/join.html" target="_blank" />
</map>

<body>
<map name="rage_image_map">
	<area shape="rect" href="http://www.bmxtalk.com/" coords="21,73,84,110" alt="BMX Talk">
	<area shape="rect" href="http://www.radbmx.co.uk" coords="95,74,188,109" alt="Rad BMX">
	<area shape="rect" href="http://www.grooveracingshop.co.uk/shop/" coords="200,72,312,112" alt="Groove Racing">
	<area shape="rect" href="http://www.bsdforever.com/" coords="319,72,398,107" alt="BSD Forever">
	<area shape="rect" href="http://www.dialledbikes.com/" coords="406,73,545,106" alt="Dialled Bikes">
	<area shape="rect" href="http://www.kuwaharabmx.com" coords="552,71,606,110" alt="Kuwahara">
	<area shape="rect" href="http://www.sebikes.com" coords="615,71,664,107" alt="SE Bikes">
	<area shape="rect" href="http://www.redlinebicycles.com/" coords="677,75,740,110" alt="Redline">
	<area shape="rect" href="http://buy.at/titansbmx" coords="751,75,802,110" alt="Buy at Titans">
</map>
<img src="assets/rage_css_imagemap.png" alt="" usemap="#rage_image_map" width="822" height="132">
</body>
</html

I also used CSS code to turn off the theme's footer (similar to code for page header):
#footer {display:none;}
#rage_css_imagemap {
margin: 0px Auto;
position: relative;
display:block;
}
While the theme's footer disappears the Map Design footer still appears under the header.

Here's the footer on it own:
Map Design footer

I have also posted this on the RW forum, but have no so far had no success in solving this problem.

Thanking you in anticipation.

#2 RageSW

RageSW

    Administrator

  • RAGE Admin
  • PipPipPipPipPip
  • 2,082 posts

Posted 05 August 2008 - 07:56 PM

Is that the HTML code for entire page that is having problems?

#3 mitch

mitch

    RAGE Newbie

  • RAGE Members
  • Pip
  • 4 posts

Posted 06 August 2008 - 01:59 AM

Is that the HTML code for entire page that is having problems?

No, just the code for the HTML panel. Here's the code for the entire page. Thanks
<!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 name="verify-v1" content="/CJBPaMpOFfG0cOjOgOWHO/uXtp7CZztKINGNbdJPPQ=" />
		<meta name="keywords" content="titans bmx club, onslow road, clydebank, glasgow, g81 2pl, united kingdom, bmx racing, childrens, adults, old school, mongoose, skyway, kuwahara, gt, haro, scotia, bmx bikes, kenny hunter" />
		<meta name="description" content="titans bmx club clydebank glasgow" />
		<meta name="copyright" content="copyright 2008 titans bmx" />
		<meta name="robots" content="all" />
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		
		<title>Titans BMX Club | Onslow Road, Clydebank, Glasgow G81 2PL United Kingdom | Tel 01786 832752</title>
		<link rel="stylesheet" type="text/css" media="screen" href="styles.css"  />
		<link rel="stylesheet" type="text/css" media="print" href="print.css"  />
		<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css"  />
		<link rel="stylesheet" type="text/css" media="screen" href="css/sidebar/sidebar_left.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/header/buildings_none.css" />
		
		<style type="text/css" media="all">#pageHeader {display:none;}
#header_home {
margin: 0px Auto;
position: relative;
display:block;
}
</style>
		<script type="text/javascript" src="javascript.js"></script>
		
		
		<!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>
<title>header_home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF">
<!-- ImageReady Slices (header_home.psd) -->
<img id="header_home" src="assets/header_home.gif" width="822" height="160" border="0" alt="" usemap="#header_home_Map" />
<map name="header_home_Map" id="header_home_Map">
<area shape="poly" alt="" coords="711,32, 787,38, 781,124, 705,117" href="/others/titans/join/join.html" target="_blank" />
</map>

<body>
<map name="rage_image_map">
	<area shape="rect" href="http://www.bmxtalk.com/" coords="21,73,84,110" alt="BMX Talk">
	<area shape="rect" href="http://www.radbmx.co.uk" coords="95,74,188,109" alt="Rad BMX">
	<area shape="rect" href="http://www.grooveracingshop.co.uk/shop/" coords="200,72,312,112" alt="Groove Racing">
	<area shape="rect" href="http://www.bsdforever.com/" coords="319,72,398,107" alt="BSD Forever">
	<area shape="rect" href="http://www.dialledbikes.com/" coords="406,73,545,106" alt="Dialled Bikes">
	<area shape="rect" href="http://www.kuwaharabmx.com" coords="552,71,606,110" alt="Kuwahara">
	<area shape="rect" href="http://www.sebikes.com" coords="615,71,664,107" alt="SE Bikes">
	<area shape="rect" href="http://www.redlinebicycles.com/" coords="677,75,740,110" alt="Redline">
	<area shape="rect" href="http://buy.at/titansbmx" coords="751,75,802,110" alt="Buy at Titans">
</map>
<img src="assets/rage_css_imagemap.png" alt="" usemap="#rage_image_map" width="822" height="132">
</body>
</html
	</head>
<body>
<div id="container"><!-- Start container -->
	<div id="pageHeader"><!-- Start page header -->
		<div id="buildings"></div>
		
		<h1></h1>
		<h2></h2>
	</div><!-- End page header -->

	<div id="contentContainer"><!-- Start main content wrapper -->
		<div id="content"><!-- Start content -->
			<h3>Welcome to Western Titans BMX Racing Club, Scotland's only operating club.</h3> <h4>Here you can find out everything you need to know about us, and how you can get involved. Whether you are aged 4 or 40 BMX racing has a category for you!</h4><img class="imageStyle" alt="home_minis" src="files/page0_1.png" width="550" height="277"/><br /><p>On the 20 August 2008 BMX will feature in the <a href="http://www.olympics.org.uk/beijing2008/sportabout.aspx?gt=S&sp=CB" rel="external">Olympics</a> for the first time. The sport as not witnessed as much growth and interest since the eighties.<p>At Titans we aim to get kids, youths and adults back on their BMX bikes and race at our twice-monthly meetings throughout the year. View <a href="osracing/osracing.html" rel="external" title="Calendar">Titan's race calendar here</a>.<p>If you are new to BMX, and need help to get started <a href="join/join.html" rel="external" title="How to Join">click here</a>. If you need a new bike Titans have a range of great bikes for purchase at <a href="shop/shop.html" rel="external" title="Club shop">Titan's club shop</a>.<p>Titans BMX Club also take part in races around the UK. This year the club has been to Preston, Hartlepool and Milton Keynes. View reports and pics on under 16 racing <a href="under16/under16.html" rel="external" title="Under 16 racing">here</a> and old school racing <a href="osracing/osracing.html" rel="external" title="Old school racing">here</a>.<p>If you have any questions regarding Titans BMX Club please <a href="contact/contact.php" rel="self" title="Contact">contact us</a>. <a href="location/location.html" rel="external" title="Location">Click here</a> for the club&rsquo;s location and directions.<p></p>
		</div><!-- End content -->
		<div class="clearer"></div>
		<div id="breadcrumbcontainer"><!-- Start the breadcrumb wrapper -->
			
		</div><!-- End breadcrumb -->
	</div><!-- End main content wrapper -->
	
	<div id="sidebarContainer"><!-- Start Sidebar wrapper -->
		<div id="navcontainer"><!-- Start Navigation -->
			<ul><li><a href="index.html" rel="self" id="current">About Titans</a></li><li><a href="join/join.html" rel="self">How to join</a></li><li><a href="leaders/leaders.html" rel="self">Club leaders</a></li><li><a href="calendar/calendar.html" rel="self">Calendar</a></li><li><a href="under16/under16.html" rel="self">Under 16 racing</a></li><li><a href="osracing/osracing.html" rel="self">Old school & 17+</a></li><li><a href="gallery/gallery.html" rel="self">Gallery</a></li><li><a href="shop/shop.html" rel="self">Club shop</a></li><li><a href="location/location.html" rel="self">Location</a></li><li><a href="contact/contact.php" rel="self">Contact</a></li></ul>
			<br style="clear: left;" />
		</div><!-- End navigation --> 
		<div id="sidebar"><!-- Start sidebar content -->
			<h1 class="sideHeader">News and weather</h1><!-- Sidebar header -->
			<span style="font:12px 'Lucida Grande', LucidaGrande, Verdana, sans-serif; color:#333333; "><a href="http://weather.yahoo.com/forecast/UKXX0035.html" rel="external">Click here</a></span><span style="font:12px 'Lucida Grande', LucidaGrande, Verdana, sans-serif; color:#333333; "> for 5 day weather forecast<br /><br />Rider of the month<br /></span><span style="font:13px 'Lucida Grande', LucidaGrande, Verdana, sans-serif; font-weight:bold; color:#333333; font-weight:bold; ">Kade Hunter</span><span style="font:12px 'Lucida Grande', LucidaGrande, Verdana, sans-serif; font-weight:bold; "><br /></span><strong><img class="imageStyle" alt="kade_sml" src="files/page0_sidebar_1.jpg" width="152" height="227"/></strong><!-- sidebar content you enter in the page inspector -->
			 <!-- sidebar content such as the blog archive links -->
		</div><!-- End sidebar content -->
	</div><!-- End sidebar wrapper -->
	
	<div class="clearer"></div>
	
	<div id="footer"><!-- Start Footer -->
		<p>Titan&rsquo;s partners | <a href="http://www.britishcycling.org.uk" title="Click to visit site">British Cycling</a> | <a href="http://www.thepulsewd.com" title="Click to visit site">The Pulse</a> | <a href="http://www.environmenttrust.org.uk" title=" Click to visit site">Environment Trust</a> | <a href="/contact/contact.php" title="Contact Titans">Contact Titans</a> | &copy;2008 Titans BMX Club</p>
	</div><!-- End Footer -->
	
	<div id="sideOverlay"></div>
</div><!-- End container -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>


#4 RageSW

RageSW

    Administrator

  • RAGE Admin
  • PipPipPipPipPip
  • 2,082 posts

Posted 06 August 2008 - 08:58 AM

I didn't think so. You can't have mutliple body, html and head tags in your code. As well, you have an invalid tag as you forgot the ending > in </html.

</html> has to be the last tag on your page.

You can not just copy and past entire webpage code into an existing page. Only copy what is between the <body> and </body> tags while adding any CSS code that is within the <head> and </head>tag of your external page to the existing <head> tag in the original page.

#5 mitch

mitch

    RAGE Newbie

  • RAGE Members
  • Pip
  • 4 posts

Posted 06 August 2008 - 03:47 PM

Thanks for that. I have uploaded a page explaining the problem more clearly. I have made sure the HTML for the image maps is clean.

You can view the page here




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users