Image map in header

  • Resolved Berserkir-Wolf

    (@berserkir-wolf)


    10 years ago

    Hi, I’m running the Graphene theme currently and will be shifting to a child theme shortly. What I’d like to do is apply an image map to my header image, to make the two sections of the image clickable links.

    I can create the child theme easily enough.

    What I need to know is where in header.php would I need to put the html for the image map?

    I have generated the following map for the image:
    <map id="imgmap2014112692041" name="imgmap2014112692041"><area shape="rect" alt="BAL homepage" title="BAL home page" coords="0,0,1018,132" href="https://www.bal.co.nz/wordpress" target="" /><area shape="rect" alt="BAL Web store" title="" coords="1,134,1019,185" href="xxxxxxxxxx" target="" /></map>

    Where would I insert this?

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

    (@berserkir-wolf)

    Not being one to sit around waiting I did a bit of digging to try get this going.
    I found this:

    1) Under header.php, if you find “div id=header”, you can edit what links it has in place.

    2) To get the map to play nice, the map id needs removing and the name needs simplifying. I went with “map” (only one we’ll be running).

    So, where initially we had this (followed by the front page identification tags):
    $header_img = '<img src="' . $header_img . '" alt="' . $alt . '" width="' . HEADER_IMAGE_WIDTH . '" height="' . HEADER_IMAGE_HEIGHT . '" class="header-img" />';

    We now have this:
    $header_img = '<img src="' . $header_img . '" alt="' . $alt . '" width="' . HEADER_IMAGE_WIDTH . '" height="' . HEADER_IMAGE_HEIGHT . '" class="header-img" usemap="#Map"/>';

    And below the header img section (after closing that php area), I’ve added this:
    <map name="Map"><area shape="rect" alt="TEXT 1" title="TITLE 1" coords="0,0,1018,132" href="URL 1" target="" /><area shape="rect" alt="TEXT 2" title="TITLE 2" coords="1,134,1019,185" href="URL 2" target="" /></map>

    So what we’ve achieved is an image as the header with a map overlaid on the image. The map then contains fields allowing multiple links overlaid on the header image.
    Problem solved.

    You should make those changes in a child theme, not by editing the original theme files.

    Thread Starter Berserkir-Wolf

    (@berserkir-wolf)

    I have placed the changes inside a child theme so as to preserve the changes through theme updates.
    Thank you for pointing that out – I had neglected to mention that.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image map in header’ is closed to new replies.