The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Putting hotspots on background header image in default kubrick mode (10 posts)

  1. kpetunia
    Posted 9 years ago #

    I have been making this blog:

    and wanted to know where to put the code for hotspots that will lay on top of each navigation tab image in the word press files. in the css?

    i usually just make the hotspots in Dreamweaver like this:

    but i don't know how to translate the header mapping html into something that will work in WordPress. Any suggestions? Thanks so much!

  2. Nicki Faulk
    Posted 9 years ago #

    It sounds like you need a map for that image. That's an HTML issue, not necessarily WordPress.

  3. kpetunia
    Posted 9 years ago #

    Yes. I have created a map for the image, but my question is where do I put the map - in which wordpress file? in the css somewhere? in one of the php files? thanks!

  4. icd10
    Posted 9 years ago #

    You have to put it in a html-file, not in the stylesheets.

    Depending on your theme you will find a file called footer.php or something like that. I contains the end of the html-file.

    Insert the map before the </body>

  5. kpetunia
    Posted 9 years ago #

    my blog uses the kubrick default template. so even though i am putting hotspots on the header of the image i should put the map html into the footer.php file? or should it go into the header.php file? thanks so much

  6. icd10
    Posted 9 years ago #

    footer.php between

    <?php wp_footer(); ?>

  7. kpetunia
    Posted 9 years ago #

    I dropped in the map code where you suggested, in footer.php file but am still stumped where and in which Word Press file to drop in the corresponding usemap="#m_kubrickheader" ref.

    I can see that the header image is referred to in:

    and the id that the header image is referred to by (headerimg) is referred to in:

    I have checked the code surrounding all of the locations that the header image is in or referred to but still have not had success making the header image clickable.

    thanks so much for your suggestions and help.

  8. kpetunia
    Posted 9 years ago #

    oh yes - you can see the blog here:

  9. WPChina
    Posted 9 years ago #

    From what I understand, and I may be wrong, the Kubrick theme uses background image.

    Because it's a background image, you can't use image maps... you need to either change your theme or alter the Kubrick code so that the image is not in the background of the table...

  10. scraplesspress
    Posted 8 years ago #

    Thanks for the tips! I got it to work.

    Check out Scrapless Press

    Using the kubrick theme as a base, I ditched the reference to the header image in style.css, put my image map in footer.php as instructed above, and in header.php made the following mod:

    <div id="page">
    <div id="header">
    	<img src="http://scraplesspress.com/assets/header1027.gif" alt="Scrapless Press Photo Cards" width="792" height="148" border="0" usemap="#Map" />
    	<!--	<div id="headerimg">
    		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    		<div class="description"><?php bloginfo('description'); ?></div>
    	</div> -->
    <hr />

Topic Closed

This topic has been closed to new replies.

About this Topic