7 Replies - 2948 Views - Last Post: 24 May 2006 - 07:48 PM

#1 Jakobi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 22-May 06

CSS Image Map

Posted 22 May 2006 - 02:37 PM

Using the snippet from here I have made a image map that will be a rollover nav in my header section. I just have a few questions on a few things:

Here is my index so far:

<body>
<div id="header">
  <div class="header_logo"></div>
  <div class="header_logo_nav"></div>
  <div class="header_logo_right"></div>

</div>
<div id="main">
  <div class="leftcolumn">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
  <div class="centerleftcolumn">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
  <div class="centerrightcolumn">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>
  <div class="rightcolumn">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>
</div>
<div id="footer"></div>
</body>

</html>



The part that is <div class="header_logo_nav"></div> is where my nav jpg is set at.

Here is the CSS section for that:

div.header_logo_nav {
	height: 206px;
	width: 203px;
	background-image: url(/TEST/images/header_logo_nav.jpg);
	background-repeat: no-repeat;
	}


Here is my image map:

<map name="nav_header" id="nav_header">
<area shape="rect" coords="34,25,114,50" title="Home" href="#" alt="Home">
<area shape="rect" coords="34,53,114,78" title="Pics" href="#" alt="Pictures">
<area shape="rect" coords="34,82,114,106" title="Games" href="#" alt="Games">
<area shape="rect" coords="34,111,115,134" title="Flash" href="#" alt="Flash">
<area shape="rect" coords="117,26,225,50" title="Videos" href="#" alt="Videos">
<area shape="rect" coords="117,52,202,78" title="Forums" href="#" alt="Forums">
<area shape="rect" coords="117,82,209,107" title="Links" href="#" alt="Links">
<area shape="rect" coords="118,110,205,134" title="Comics" href="#" alt="Comics">
</map>

<img src="http://www.first-ward.com/TEST/images/header_logo_nav.jpg" width="203" height="206" usemap="#nav_header" border="0">


I am having a problem trying to get this to go in right.

What should go in my index.html?
What should go in my style.css?
Does the structure of my image map look right?

I am rather new to this and trying to get some advice.

Thank you.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Image Map

#2 eLliDKraM  Icon User is offline

  • Pepè Le Pewn
  • member icon

Reputation: 6
  • View blog
  • Posts: 6,565
  • Joined: 13-August 05

Re: CSS Image Map

Posted 22 May 2006 - 02:44 PM

wrong place my nizzle
Was This Post Helpful? 0
  • +
  • -

#3 adamjon858  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 168
  • Joined: 03-January 06

Re: CSS Image Map

Posted 22 May 2006 - 04:03 PM

Ouch...I had problems with this sort of thing I encountered once...I gave up.
Was This Post Helpful? 0
  • +
  • -

#4 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1866
  • View blog
  • Posts: 20,278
  • Joined: 17-March 01

Re: CSS Image Map

Posted 22 May 2006 - 04:45 PM

Can you paste your entire page, or have you not gotten that part?
Was This Post Helpful? 0
  • +
  • -

#5 Jakobi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 22-May 06

Re: CSS Image Map

Posted 22 May 2006 - 05:55 PM

This is my first run at this so far this is what I have.

Heres my test page SEE HERE

Here is my CSS page

body {
 	margin: 0;
 	padding: 0;
	  background: #68696d
			  url("http://first-ward.com/TEST/images/main_bg.jpg")
			  center center repeat-y;
 	color: #fff;
 	font: 10px "Flip the Switch", sans-serif;
  }
  
div#main {
	  margin: 0 auto;
 	width: 800px;
  }
  
div#main div {
 	height: 1232px;
 	float: left;
 	padding-left: 15px;
  }
 
div.leftcolumn {
	  width: 120px;
  }
  
div.centerleftcolumn {
	  width: 310px;
  }
  
div.centerrightcolumn {
	  width: 185px;
  }
  
div.rightcolumn {
	width: 125px;
  }
  
div#header {
	  margin: 0 auto;
 	width: 800px;
  }
  
div#header div {
 	height: 363px;
 	float: left;
  }

div.header_logo {
	height: 206px;
	width: 572px;
	background-image: url(/TEST/images/header_logo.jpg);
	background-repeat: no-repeat;
	}

div.header_logo_nav {
	height: 206px;
	width: 203px;
	background-image: url(/TEST/images/header_logo_nav.jpg);
	background-repeat: no-repeat;
	}

div.header_logo_right {
	height: 206px;
	width: 25px;
	background-image: url(/TEST/images/header_logo_right.jpg);
	background-repeat: no-repeat;
	}

div#footer {
	height: 205px;
	width: 800px;
	margin: auto;
	clear: left;
  }


Thank you for any direction you can throw me.
Was This Post Helpful? 0
  • +
  • -

#6 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1866
  • View blog
  • Posts: 20,278
  • Joined: 17-March 01

Re: CSS Image Map

Posted 22 May 2006 - 06:24 PM

I think you need to replace this:

Quote

<div class="header_logo_nav"></div>


With your image map. Don't believe you can apply an image map to a div. There's nothing wrong with placing an image there and using CSS to position the image (if need be). Don't try to over complicate the problem just because you want to use CSS :)
Was This Post Helpful? 0
  • +
  • -

#7 Jakobi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 22-May 06

Re: CSS Image Map

Posted 22 May 2006 - 09:29 PM

Quote

Don't try to over complicate the problem just because you want to use CSS smile.gif


Yea thanks I guess I was. I just added the map and it works fine and its all set thanks.
Was This Post Helpful? 0
  • +
  • -

#8 Jakobi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 22-May 06

Re: CSS Image Map

Posted 24 May 2006 - 07:48 PM

One last issue with this regarding IE. It looks fine in Firefox but in IE it breaks down to the next line...

Look at this in IE SEE HERE

This is the piece that is that region

<div id="header">
  <div class="header_logo"></div>
	<img src="/TEST/images/header_logo_nav.jpg" width="228" height="206" usemap="#nav_header" border="0" />
	<map name="nav_header" id="nav_header">
	  <area shape="rect" coords="34,25,114,50" title="Home" href="#Home" alt="Home" />
	  <area shape="rect" coords="34,53,114,78" title="Pics" href="#Pictures" alt="Pictures" />
	  <area shape="rect" coords="34,82,114,106" title="Games" href="#Games" alt="Games" />
	  <area shape="rect" coords="34,111,115,134" title="Flash" href="#Flash" alt="Flash" />
	  <area shape="rect" coords="117,26,225,50" title="Videos" href="#Videos" alt="Videos" />
	  <area shape="rect" coords="117,52,202,78" title="Forums" href="#Forums" alt="Forums" />
	  <area shape="rect" coords="117,81,209,106" title="Links" href="#Links" alt="Links" />
	  <area shape="rect" coords="118,110,205,134" title="Comics" href="#Comics" alt="Comics" />
	</map>
</div>


What might I try in order to fix this?

Thanks.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1