I want to add an image map to a picture in my banner how do i do it? <div class="right"><img src="<?php echo get_option('home'); ?>MY PICTURE HERE" alt="" width="405px" height="134px" /> <div id="tagline"><?php bloginfo('description'); ?></div> </div> Code (markup): Thats the code for the pic in my banner. I want to make two different areas, one to click to my twitter and one to facebook, help!
<div class="right"> <img src="<?php echo get_option('home'); ?>MY PICTURE HERE" alt="" width="405px" height="134px" usemap="#bannermap" /> <map name="bannermap"> <area shape="rect" coords="0,0,202,134" href="TWITTER LINK" alt="Twitter" /> <area shape="rect" coords="203,0,405,134" href="FACEBOOK LINK" alt="Facebook" /> </map> <div id="tagline"><?php bloginfo('description'); ?></div> </div> Code (markup):
Thanks so much! Tweaked the coordinates a bit. Is there a way I can get rid of the blue square from around the picture? Here it is here: http://everythingspearfishing.com/ Code (markup):
Yes, set border to 0: <img src="<?php echo get_option('home'); ?>MY PICTURE HERE" alt="" width="405px" height="134px" usemap="#bannermap" border="0" /> Code (markup): But really, that should be done in the stylesheet, either with a CSS Reset or the star selector: /* HTML Elements */ * { border:0; margin:0; padding:0; } Code (markup):
Thank you so much you are a legend! Sorry but one more question, if I want the Links to open in a new tab/window, how do I do this? Thanks again!
Cheers mate Add target="_blank" to the links: <div class="right"> <img src="<?php echo get_option('home'); ?>MY PICTURE HERE" alt="" width="405px" height="134px" usemap="#bannermap" /> <map name="bannermap"> <area shape="rect" coords="0,0,202,134" href="TWITTER LINK" alt="Twitter" target="_blank" /> <area shape="rect" coords="203,0,405,134" href="FACEBOOK LINK" alt="Facebook" target="_blank" /> </map> <div id="tagline"><?php bloginfo('description'); ?></div> </div> Code (markup):