WordPress.org

1. thewordpresser
   Member
   Posted 2 years ago #

   Okay I need to make only a part of my theme clickable. The part I need to make clickable is in the top right corner... Now I know that I need to make an Image Map, that part is easy (using Image-Maps.com). I made an image map of the the theme header picture...However, after I have made the Image Map I have no clue how to get it to work with my theme! I don't know where to put the CSS code that is given to me by Image-Maps.com! I tried putting it in different areas of the header... in the Style sheet.. in the index...i dont know wtf to do with it! Will someone please help make a small section of my wordpress theme header clickable using an image map?

   Thanks

2. Micah Cooksey
   Moderator
   Posted 2 years ago #

   The HTML they give you goes in your header.php, the CSS goes in your style.css.

3. thewordpresser
   Member
   Posted 2 years ago #

   Where exactly doI put the code? I have another question too.. maybe this will help you help me...

   CSS Code: 
   
   <style type="text/css">
   	dl.image_map {display:block; width:960px; height:278px; background:url(http://www.image-maps.com/uploaded_files/1201003082242487_3_collage.jpg); position:relative; margin:2px auto 2px auto;}
   	a.BLINK {left:958px; top:276px; background:transparent;}
   	a.BLINK {display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;}
   	a.BLINK:hover  {background:black; border:1px dashed white; color:white; font-size:9px;}
   </style>
   
   <dl class="image_map">
   	<dd><a title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_1201003082242487">Mapped @ Image Mapper</a></dd>
   </dl>
   
   HTML Code: 
   
   <div style="text-align:center; width:960px; margin-left:auto; margin-right:auto;">
   <img id="Image-Maps_1201003082242487" src="http://www.image-maps.com/uploaded_files/1201003082242487_3_collage.jpg" usemap="#Image-Maps_1201003082242487" border="0" width="960" height="278" alt="" />
   <map id="_Image-Maps_1201003082242487" name="Image-Maps_1201003082242487">
   <area shape="poly" coords="842,2,799,108,894,145,948,1," href="http://www.image-maps.com/" alt="" title=""   />
   <area shape="rect" coords="958,276,960,278" href="http://www.image-maps.com/index.php?aff=mapped_users_1201003082242487" alt="Image Map" title="Image Map" />
   </map>
   <!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
   <div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:960px;">
   	<a href="http://www.image-maps.com/" title="Untitled">Untitled</a>
    | 	<a href="http://www.image-maps.com/index.php?aff=mapped_users_1201003082242487" title="Image Map">Image Map</a>
   </div>
   <!-- Image map text links - End - -->
   
   </div>

   You can see the pic I am trying to make part of clickable here (link will expire in 24 hours): http://www.image-maps.com/uploaded_files/1201003082242487_3_collage.jpg

   I am trying to make the phone in the top right clickable.. and then make it link to the contact area of my site. I already followed the Image-Maps.com instructions tomake the phone clickable I and got that code.. now I am stuck.

   Please help by telling my where to put or what I do with the code above...

   Thanks So Much

Topic Closed

This topic has been closed to new replies.