WordPress.com

1. blondecroatian
   Member
   Dec 16, 2012, 7:41 PM

   On my site under my navigation menu, I have an image with several pictures. I decided to change out some pictures and make them clickable using a tool online.

   I now have the code, but I'm having problems with getting it to work. I am using the Delicacy theme, and the code for the image I currently have is usually under #intro { }, so that's where I've been placing the new code for my new, clickable image (I've placed the new code below that I received from the website that made my image clickable).

   What do I need to do to the code below to make it work?

   <style type="text/css">
   dl.image_map {display:block; width:1080px; height:91px; background:url(http://tacklingmommyhood.files.wordpress.com/2012/12/header-under-nav-with-chalkboard-1080-width.png); position:relative; margin:2px auto 2px auto;}
   a.LINK0 {left:124px; top:6px; background:transparent;}
   a.LINK0 {display:block; width:115px; height:0; padding-top:82px; overflow:hidden; position:absolute;}
   a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
   a.LINK1 {left:842px; top:3px; background:transparent;}
   a.LINK1 {display:block; width:115px; height:0; padding-top:82px; overflow:hidden; position:absolute;}
   a.LINK1:hover {background:transparent; border:1px dashed black; color:black;}
   </style>

   <dl class="image_map">
   <dd></dd>
   <dd></dd>
   </dl>

   The blog I need help with is tacklingmommyhood.com.

2. castelinokelvin
   Member
   Dec 17, 2012, 8:28 AM

   A little confused with you query,
   You want to add that code into your site, or you have already added and its not working?
   Else you are looking for a solution so that parts of your image become clickable, how is it?

3. blondecroatian
   Member
   Dec 17, 2012, 10:51 AM

   Hi castelinokelvin! Sorry, I did not explain myself well at all.

   If you go to my blog's page, under the navigation menu you will see a banner-like image. That is one image, and I want to make some parts clickable.

   I used the tool on a website called Image Mapping, and I know how the html code and css code to make it possible.

   The problem is that I don't know how to insert it into my stylesheet to make it work.

   The image that you currently see on my website is coded under a section called #intro

   I tried to input html code into that section with brackets and it made my image show up but nothing was clickable. I tried to input the css code that I received, and again, nothing was clickable.

   When I put the html code into a text widget, it works. However, this doesn't help me since the widget is on the side and only shows part of my "banner" image, not the whole thing. I read somewhere that there's a way to move a text widget to a different location, but I don't know how to do that.

   Does this make more sense? Do you think you can help me?

4. blondecroatian
   Member
   Dec 17, 2012, 10:52 AM

   By the way, here is the HTML code for the clickable banner image I want to input under the navigation menu:

   <div style="text-align:center; width:1080px; margin-left:auto; margin-right:auto;">
   <img id="Image-Maps_1201212161206235" src="http://tacklingmommyhood.files.wordpress.com/2012/12/header-under-nav-with-chalkboard-1080-width.png" usemap="#Image-Maps_1201212161206235" border="0" width="1080" height="91" alt="" />
   <map id="_Image-Maps_1201212161206235" name="Image-Maps_1201212161206235">
   <area shape="rect" coords="129,4,234,86" href="http://tacklingmommyhood.com/category/free-stuff/" alt="Click here to enter the current giveaway!" title="Click here to enter the current giveaway!" />
   <area shape="rect" coords="845,4,950,86" href=": http://tacklingmommyhood.com/tackling-mommyhood-info" alt="If it's your first time here, click here!" title="If it's your first time here, click here!" />
   </map>
   </div>

   The CSS code is listed in my first post on this thread.

5. designsimply
   Staff
   Dec 31, 2012, 10:09 PM

   I tested the image map in the HTML you sent, and it worked when I put it into a plain HTML file. To make it work in your blog, you should add the HTML somewhere on a post or a page or a text widget, and then use CSS to move the image to just below the header. The first part will be adding the HTML. Since you probably want it on all pages, think about adding it to a text widget. To give you an idea for how it would work, here is an example of some CSS you would have to write to move the HTML. This example takes the top right image currently in the sidebar and moves it, so just preview what this does without saving the custom CSS:

   #sidebar {
   	position: relative;
   }
   #sidebar .text-5 {
   	position: absolute;
   	top: -135px;
   	left: -771px;
   }

   The CSS you posted earlier, doesn't match at all with your HTML example. That example will only work if your HTML matches the structure in the example:

   <dl class="image_map">
   <dd></dd>
   <dd></dd>
   </dl>

   Your HTML doesn't use "dl" or "dd" tags at all.

   You could actually go either way: update your HTML to match the structure in the example you got from whatever tool you used or write new CSS to move the image map HTML you created into place after you add it to a text widget. I would personally go with the 2nd option since you've already done some work with it.

Topic Closed

This topic has been closed to new replies.