Forums

How to Make PART of the Theme Header Clickable? (3 posts)

  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.

About this Topic