Insert a link in a graphic image (8 posts)

  1. TritonCollect
    Posted 4 years ago #

    On the cabinet page of my site I have an image of a collector's cabinet with labels on each drawer. I would like to be able to click on a label and jump to the page that displays the contents of that drawer. Is this possible?

    My site is http://www.centennialmedalstemp.com/wordpress/

    Thank you very much.


  2. Yes it's possible.


    You have to map the image, basically.

  3. TritonCollect
    Posted 4 years ago #

    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,

  4. luciaannn
    Posted 4 years ago #

    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

  5. TritonCollect
    Posted 4 years ago #

    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.


  6. TritonCollect
    Posted 4 years ago #

    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.


  7. luciaannn
    Posted 4 years ago #

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

  8. TritonCollect
    Posted 4 years ago #


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


Topic Closed

This topic has been closed to new replies.

About this Topic