How to use image map as header image

  • I have seen similar questions, but they are either not answered or the user is getting more involved with their goal than I am.

    I am building the site https://www.sc4mike.com.
    I am using wordpress 2.3 and the Bernie theme.

    The header of this site is a .jpg image titled top.jpg.
    It is referenced in the CSS Style sheet here:

    #top{color:#333333; margin: auto; width:820px; height:250px; background: url(img/top.jpg) no-repeat;}

    And in the Header.php file here:

    <div id=”top”>

    As you can tell by looking at the site, parts of the image should be clickable to send people to the appropriate page.

    I have written the html code necessary to acomplish this. You can see the results here:
    https://www.sc4mike.com/wp-content/themes/bernie-v10/img/top.html

    Is it possible to use my mapped image as the header? If so, how do I change the CSS or Header.php page to make it so? Can I not use the image map in html and have to do it using CSS or PHP?

    Thanks in advance for any help…I know this borders on not being a wordpress question, but rather a php and or css question. If I’m out of line, could you at least point me to a good forum for whichever of those my problem could be answered in?
    Cheers,
    Christian

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter cphine

    (@cphine)

    bump?

    Did you ever figure out how to use an image map in the header of a wordpress blog?

    Please let me know,
    Rick

    https://drkblog.com

    Here’s the URL for the BLOG: https://brainerdadagency.com

    All I’m trying to do is have the main header area link to the home page of the blog and have an area around the Contact Us (upper right) link to another website’s contact page. The home image map works, but the Contact Us region does not. Any help would be much appreciated, I’m sure it’s something minor.

    Here’s the CSS I’ve tried to use (showing only the targeted code):
    #header {
    background: #dedede url(images/header.gif) no-repeat;
    width: 870px;
    height: 154px;
    margin: 0px auto 0px;
    padding: 0px
    }

    <map id=”headeradblog” name=”headeradblog”>
    <area name=”Contact Us” shape=”rect” coords=”698,1,869,60″

    href=”https://redhousemedia.com/#mi=1&pt=0&pi=8&p=-1&a=0&at=0&#8243; alt=”Contact Us”

    OnMouseOver=”window.status=’Contact Us’; return true” OnMouseOut=”window.status=”;

    return true” target=”_blank”>
    <area name=”Home” shape=”rect” coords=”1,1,697,149″

    href=”https://brainerdadagency.com&#8221; alt=”Home” OnMouseOver=”window.status=’Home’;

    return true” OnMouseOut=”window.status=”; return true”>
    <area shape=”default” href=”https://brainerdadagency.com&#8221; target=”_self”>
    </map>
    <img src=”headerAdBlog.JPG” USEMAP=”#headeradblog” BORDER=0>

    #contactus {
    float: left;
    width : 171px;
    height: 60px;
    margin-left: 698px;
    margin-top: 1px;
    }

    #home {
    float: left;
    width : 697px;
    height: 150px;
    margin-left: 1px;
    margin-top: 1px;
    }

    ************************************************
    Here is the header.php code: Again only affected code:
    </head>

    <body>

    <div id=”header”>
    <a id=”contactus” href=”https://redhousemedia.com/#mi=1&pt=0&pi=8&p=-1&a=0&at=0&#8243;

    alt=”Contact Us” OnMouseOver=”window.status=’Contact Us’; return true”

    OnMouseOut=”window.status=”; return true” target=”_blank”>

    <a id=”home” href=”https://brainerdadagency.com&#8221; alt=”Home”

    OnMouseOver=”window.status=’Home’; return true” OnMouseOut=”window.status=”; return

    true”>
    </div>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to use image map as header image’ is closed to new replies.