Help - Image Maps on Wordpress?

Discussion in 'WordPress' started by MiletNZ, Sep 15, 2010.

  1. #1
    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!
     
    MiletNZ, Sep 15, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    
    <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):
     
    Cash Nebula, Sep 15, 2010 IP
  3. MiletNZ

    MiletNZ Member

    Messages:
    283
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    30
    #3
    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):
     
    MiletNZ, Sep 15, 2010 IP
  4. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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):
     
    Cash Nebula, Sep 15, 2010 IP
  5. MiletNZ

    MiletNZ Member

    Messages:
    283
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    30
    #5
    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!
     
    MiletNZ, Sep 16, 2010 IP
  6. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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):
     
    Cash Nebula, Sep 16, 2010 IP
  7. MiletNZ

    MiletNZ Member

    Messages:
    283
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    30
    #7
    Cheers Mate :)
     
    MiletNZ, Sep 17, 2010 IP