add image map to header
-
I would like to add an image map that I have created in Dreamweaver instead of a static header image in WP 2010 or 2011 theme. Actually, I would probably like to remove the horizontal nav bar as well and just use the header image map for the navigation as well. Is this possible in WordPress.com? Thanks in advance!
The blog I need help with is: (visible only to logged in users)
-
While you can use image maps on posts and pages with wp.com, they do not work as header images.
-
Hmmm that is too bad, even crappy Blogger offers that, lol! So there’s no way to paste HTML into a text widget and have that replace the header? And I assume that also means I can’t use an image map in place of the nav bar? Thanks for the response btw!
-
I must confess to not being an “upgrade CSS customization expert.” You have posted in the CSS forum: have you purchased the upgrade? If so, then another volunteer may be able to help you.
Without the paid CSS upgrade, in some themes, it is possible to use “position absolute” html inline styling to add clickable links to a header via a text widget. But in any case, your image map won’t work.
Blogger may well be your best platform…
-
You can do an image map in a text widget and move it up over or into the header area, but on most themes it will shift up or down depending on whether one is logged in or not (presence of admin bar). That shifting issue can be remedied, but that requires the Custom Design Upgrade so that modifications can be made to the CSS.
Also, there are a few themes here that because of the way the CSS/XHTML is structured simply don’t work cleanly and the image will always shift up or down.
The site linked to your username is using twenty ten, and it can be done with that theme.
-
Thanks tsp.
I did not think that an image map would work as a header—I’d tried and failed a couple of times. From what you say, it must have been on themes I’ve used where adding an absolute position code doesn’t work well: Digg3 and Unsleepable?
And many apologies to senordeer!
-
You are welcome.
It should work as a text widget-based header in any theme really. The only question is how cleanly it will work. To do it right, you really need to tweak the CSS.
The OP appears to have the custom design upgrade, so it is something that I can help them with if they decide to give it a try.
-
Hello! I do have the CSS upgrade, and am pretty good with CSS. I also am not married to 2010 or 2011, if there is another theme that would respond better to this I am fine with that. I hid the header and nav bar in the CSS, and I pasted the image map into a text widget on the sidebar, so I guess what I need to do now is figure how to position that text widget in place of the header…? Thanks guys no rush I know it is a holiday! :)
-
Twenty Ten will work well for this.
The first thing you will want to do is to add
position:relative;" to #wrapper. This will mean that when you do position:absolute;` on the text widget that it will position in relationship to #wrapper instead of the body (browser window).#wrapper { position: relative; } #main { padding-top: 260px; } #text-3 { position: absolute; top: 0; left: 0; } #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper { width: 960px; }The last bit was to match the wrapper width to your header image. The padding top in #main was to move the content down below the image. You can adjust this to your liking.
-
-
That worked absolutely perfectly! I will play around with it just a bit, but no mod necessary so far, this gives me a lot more design flexibility, many, many thanks!
-
- The topic ‘add image map to header’ is closed to new replies.
WordPress.com Forums 