I wanted to make my header image into an image map. I was pretty successful except the image is repeated (and showing as a broken image) in safari. It works great in firefox…. not sure about ie.
Here is the code I put in my header.php - The theme is Adventure Journal
<!-- end header -->
<div id="header"><div id="header2"><div id="header3"><div id="header4">
<?php ctx_aj_site_title() ;?>
<div id="banner"><img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>"/></div>
<div style="text-align:center; width:920px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_6201112130240024" src="http://www.hylinehotel.com/media/wp-content/uploads/2011/12/header5.png" usemap="#Image-Maps_6201112130240024" border="0" width="920" height="306" alt="" />
<map id="_Image-Maps_6201112130240024" name="Image-Maps_6201112130240024">
<area shape="rect" coords="11,234,216,273" href="http://www.hylinehotel.com/?page_id=10" alt="Boarding" title="Boarding" />
<area shape="rect" coords="217,235,315,274" href="http://www.hylinehotel.com/?page_id=44" alt="Grooming" title="Grooming" />
<area shape="rect" coords="312,233,616,272" href="http://www.hylinehotel.com/?page_id=123" alt="Training" title="Training" />
<area shape="rect" coords="10,10,906,286" href="/" alt="Main" title="Main" />
<area shape="rect" coords="616,234,905,273" href="/" alt="Home" title="Home" />
</map>
</div>
</div></div></div></div>
I have the actual header image removed through the theme options menu.
Any help and/or suggestions are greatly appreciated.
Thanks.