Support » Themes and Templates » Insert a link in a graphic image

Viewing 7 replies - 1 through 7 (of 7 total)
  • Yes it’s possible.

    You have to map the image, basically.

    I think I’ve mapped the image and coded the hot spots. (This question will give away what a newbie I am.) Where do I insert the code and how do I save it?

    Thank you,

    create a div with the full image background. set this div position to relative. then make an anchor for every cabinet, and set each anchor’s position to absolute, and mention the x,y position, and width and height for each of them. here is an example:

    <div id=”fullImage”>
    <*a class=”targetCabinet” id=”cabinetA”> </*a>
    <*a class=”targetCabinet” id=”cabinetB”> </*a>
    <*a class=”targetCabinet” id=”cabinetC”> </*a>
    <*a class=”targetCabinet” id=”cabinetD”> </*a>

    remove the “*” symbol. i used it just to be displayed as plain text

    in your css file you should have something like this:
    #fullImage{position:relative; background:url(‘your_image_source’) no-repeat top left; }
    .targetCabinet{position:absolute; width:150px ; height:20px; }
    #cabinetA{top:10px; left:20px; }
    #cabinetB{top:300px; height:100px; }

    2nd method is to use floats. create 1 div with with full cabinet image, then add 2 div’s with spans. float each spans and use margins to position them.

    hope it will help you

    Thank you very much. I won’t be able to try this until Wednesday, so I’ll update you on my progress then.

    I appreciate your help.


    I’m lost! I’ve mapped the hot spots on the image of the cabinet. I’ve written a div that makes sense (at least to me). I’ve figured out how to FTP into my site where I can view my directories and files. I cannot find anything that looks like the code I see when I view source from my web pages, nor anything that looks like the code you say I should see in my “css file.”

    It’s apparent to me that I need training on what I’m seeing in my directories, what does what, and how do I use it. I’d appreciate any suggestions of where I might start.

    Thank you.


    Use the codex from WordPress to make an image about how pages are structured. It’s 100% helping


    Do you have a URL? I’ve searched the Codex for structured pages and images with no luck.


Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Insert a link in a graphic image’ is closed to new replies.