Please help with header!

I created an image map for my header and put the code in the tpl_header.php. However, in my browser, the header image is not showing. Instead there is just a box with a fine border. The links inside work...just no image. Also, it is pushing all my content further down on the page then it was before. Any help would be greatly appreciated! TIA!

Oh, here's my site https://www.noahsarcade.com/store

-ally

http://www.zen-cart.com/forum/showthread.php?t=89697&highlight=image%2Bmap
Thread above should help

Thank you for your response, but unfortunately it did not help my problem. Here is my code that I placed in the tpl_header.php. Am I doing something wrong?

<div align="center"> <img name= naimg src= "file://url..images/NA_menubar.png" width="806" height="184" border="0" alt="" usemap="#account" /> <map name="account" id="account"> <area shape="rect" coords="293,124,350,152" href="http://noahsarcade.com/store/" target="_self" alt="home" /> <area shape="rect" coords="374,122,453,156" href="http://noahsarcade.com/store/index.php?main_page=login" target="_self" alt="Log In" /> <area shape="rect" coords="476,119,612,152" href="http://noahsarcade.com/store/index.php?main_page=shopping_cart" target="_self" alt="Shopping Cart" /> <area shape="rect" coords="634,123,777,150" href="http://noahsarcade.com/store/index.php?main_page=login" target="_self" alt="Create Account" /> </map>

Should be along lines of code below.
ALTER sizes,co-ordinates, template name and image name to suit your
requirements

<div id="headerWrapper">
<!--bof-branding display-->
    <div align="center"><img src="includes/templates/nameofyourtemplate/yourimage.jpg" width="760" height="324" border="0" usemap="#Map">
   <map name="Map">
     <area shape="rect" coords="9,6,239,72" href="index.php" target="_self" alt="index">
     <area shape="rect" coords="331,25,389,59" href="account.php" target="_self" alt="Login In">
     <area shape="rect" coords="395,26,484,62" href="cart.php" target="_self" alt="Shopping Cart">
     <area shape="rect" coords="491,27,558,62" href="checkout.php" target="_self" alt="Checkout">
     <area shape="rect" coords="565,27,623,63" href="contact.php" target="_self" alt="Contact">
     <area shape="rect" coords="629,28,686,63" href="logout.php" target="_self" alt="Logout">
     <area shape="rect" coords="689,30,733,62" href="index.php" target="_self" alt="Home">
     <area shape="rect" coords="17,82,125,113" href="privacy.php" target="_self" alt="Privacy">
     <area shape="rect" coords="148,83,242,113" href="faq.php" target="_self" alt="FAQ">
     <area shape="rect" coords="272,84,380,115" href="contact.php" target="_self" alt="Contact">
     <area shape="rect" coords="413,85,577,114" href="products.php" target="_self" alt="All Products">
     <area shape="rect" coords="599,82,746,114" href="downloads.php" target="_self" alt="Downloads">
   </map>
 </div>

Brilliant! Thank you Misty...I don't know what I was doing wrong but this code worked...yay!

noahsarcade:

Brilliant! Thank you Misty...I don't know what I was doing wrong but this code worked...yay!
No problem...your site looking good.. well done!!
:clap:

Thanks. =) I've actually never built a website in my life, so I am pretty happy with it. It's been fun learning. Thanks again, I couldn't have done any of it without this forum.=)

I've tried the information in this post as well as a couple other posting but I can't get the mapping to work. This is the information I'm inserting, and I tried to mirror what I saw in this post (the formatting doesn't show correctly below, but it is formatted as shown above - I tried this in both the header.php and the tpl_header.php):

<!--bof-branding display--> <div id="logoWrapper"> <div align="center"><img src="header.png" width="900" height="360" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="36,86,160,121" href="http://vintageparisprincess.com" target="Vintage Paris Princess Designs" alt="Vintage Paris Princess Designs" /> <area shape="rect" coords="14,141,136,180" href="http://vintageparisprincess.blogspot.com" target="Vintage Paris Princess Designs Blog" alt="Vintage Paris Princess Designs Blog" /> <area shape="rect" coords="40,195,164,230" href="http://vintageparisprincess.com/gallery/main.php" target="Vintage Paris Princess Designs Gallery" alt="Vintage Paris Princess Designs Gallery" /> <area shape="rect" coords="40,251,171,283" href="http://www.vintageparisprincess.com/forums/" target="Vintage Paris Princess Designs Forum" alt="Vintage Paris Princess Designs Forum" /> <area shape="rect" coords="510,286,606,316" href="http://vintageparisprincess.com/boutique/index.php?main_page=logoff" target="Log Off of your Vintage Paris Princess Designs Account" alt="Log Off of your Vintage Paris Princess Designs Account" /> <area shape="rect" coords="393,290,493,318" href="http://vintageparisprincess.com/boutique/index.php?main_page=login" target="Log in to your Vintage Paris Princess Designs Account" alt="Log in to your Vintage Paris Princess Designs Account" /> <area shape="rect" coords="625,283,724,314" href="http://vintageparisprincess.com/boutique/index.php?main_page=account" target="View your Account at Vintage Paris Princess Designs" alt="View your Account at Vintage Paris Princess Designs" /> </map> </div> </body> </html>

and there is more text before and after what's above.

my website is http://vintagparisprincess.com/boutique

I also can't figure out how to change the color of the Product Image text as seen here: http://vintageparisprincess.com/boutique/index.php?main_page=index&cPath=8

That text is yellow and I would like it to be f4f6f7 like everything else. I found a post about changing the productListing to white but that didn't work.

And does anyone know how to center the header? I've tried the few things I've found in previous postings (from years ago) but nothing works.

Thanks in advance for the help! My Zen Cart is 1.3.8a.

I'm having the same problem too - I work with ImageReady in the end .. and I too have much more code than what it shown above

I got this to work on my site. My problem is that the image is to long. Is there a way to have the css control the width of the image? I need it to do this, because I have my site adjust the page width. The min. width is 1000px and the max is 1300px.
http://www.jhelectronics.com

You can't make images stretch with CSS, and as far as I know, image maps are not stretchable by any means.

What you need to do is separate your header into two or more pieces and attach them as background images to different elements in the header, like #logoWrapper and #logo, one anchored to one side and the other anchored to the other side. Then when the page stretches, one part will slide under the other at the seam. Google "sliding door method" for the standard tutorial.

This requires designing your header to allow the sliding without covering/cutting important parts.

gjh42:

You can't make images stretch with CSS, and as far as I know, image maps are not stretchable by any means.

I wasn't trying to stretch the image. The image was already at the max width. I was just trying to see if there was a way that it would cut it off on the right side to fit.

Thank you for the response. I'll "google sliding door method" and try it out.

The way to have the image cut off if the window is narrower is to use it as a background image.

Thank you. That worked great.:clap:

dont mind me, just making note for later usage :D

thank you this thread really helped me!

A need help!
Put on a site Image Mapping all works but border appeared round a logotype! how it to remove?

[IMG]http://s47.radikal.ru/i115/1004/ab/4bcae0c1027ft.jpg[/IMG]

Kroki:

A need help!
Put on a site Image Mapping all works but border appeared round a logotype! how it to remove?

[IMG]http://s47.radikal.ru/i115/1004/ab/4bcae0c1027ft.jpg[/IMG]

What does your code look like. Do you have this in your code (border="0")?

Do you have a live site?