Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: image map

  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy image map

    I would like to create an image map in a certain frame "a" with 3 buttons, Presents, Contact, Checkout...
    by selecting these button a frame "b" contents would change
    I don't know how to create an image map without having the image, should I create the image with paint brush of something and than make the image map..
    Help please!!!!

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Okay well before you can have an image map, you will need the image to make a map of.

    However it's faily simple to create an image map. It normally follows the following:

    Code:
    <img src="someimage.gif" width="259" height="32" border="0" usemap="#Map">
    <map name="Map">
      <area shape="rect" coords="21,7,61,24" href="#">
      <area shape="circle" coords="105,14,10" href="#">
      <area shape="poly" coords="155,9,170,22,187,14,180,4,212,15,166,6,199,21" href="#">
    </map>
    If you use shape="rect" you have to define the coordinates of the top-left and bottom-right corners of the area.
    If you use shape="circle" you have to define the coordinates of the origin and the radius (i believe) of the circle.
    If you use shape="poly" you have to define the coordinates of all the points that make up your polygon.

    Once you've done that you can add the links, and if you add 'target="b"' to the href tag it should open the link in the b frame.
    This is an extension to the above, with the target code too

    Code:
    <img src="someimage.gif" width="259" height="32" border="0" usemap="#Map">
    <map name="Map">
      <area shape="rect" coords="21,7,61,24" href="#" target="b">
      <area shape="circle" coords="105,14,10" href="#" target="b">
      <area shape="poly" coords="155,9,170,22,187,14,180,4,212,15,166,6,199,21" href="#" target="b">
    </map>
    BTW: This should really be in the HTML/CSS forum as it's not a javascript problem

    Hope this helps
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #3
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You know, as I've been discovering here recently, you may not even need to use an image map... but you may find it useful to have access to something just a little more sophisticated than MS Paint to manipulate your graphics!

    Are you picking up someone else's design here?

    If you can slice your image into three bits (using whatever graphical software you can get hold of - chances are you'll need to make three copies of the image and just crop them each down, but make sure you get the pixel count right) then you can use CSS, or even a table, to place them on the page all next to each other. They'll appear like a single image if you get it right, but then you can click and rollover the individual images to get the functionality you need.

    As Badman suggested, if you PM one of the JS moderators they'll be able to move this thread to HTML/CSS for you, should be able to sort it out there.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •