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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Location
    Birmingham, AL
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Create multiple links in an image in Photoshop *NOT* for Dreamweaver

    Hi, I'm building a website with AptanaStudio 3 (I've seen several on how to do it for Dreamweaver, but I can't afford that). I have an image I created in Photoshop CS4; I've attached it below. I'd like to make the facebook and twitter icons clickable buttons. How can I do this?
    Attached Thumbnails Attached Thumbnails Create multiple links in an image in Photoshop *NOT* for Dreamweaver-slider_img_3.png  

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    850
    Thanks
    11
    Thanked 79 Times in 77 Posts
    ☠ ☠RON☠ ☠

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    If you're dead set on using a single image for the two buttons, then image mapping is the way to go. The thing is, though, that it's a bit outdated. Is there a particular reason why you want to use one image for two buttons? It seems to me that creating each image as an individual button gives a lot more flexibility in design (not to mention faster loading times).

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    850
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Image mapping is not out dated. Allows one image to be loaded and cached yet provides hotspots to be used for links. Example. Yahoo uses CSS to position many of their one image buttons or to position other images which are part of one image. Although not an image map, IMs have lots of uses. Example 1. Example 2.
    Last edited by Major Payne; 08-10-2012 at 02:19 PM.
    ☠ ☠RON☠ ☠

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    It's very easy to just write your own image maps. The numbers in the array just define the lines that contain the active areas of the map. It's usual to allow some space between the active areas. I seem to recall that you can use maps with transparent images, even stretched ones.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by Major Payne View Post
    Image mapping is not out dated. Allows one image to be loaded and cached yet provides hotspots to be used for links. Example. Yahoo uses CSS to position many of their one image buttons or to position other images which are part of one image. Although not an image map, IMs have lots of uses. Example 1. Example 2.
    I know this is late and that you made this comment a couple of weeks ago. I just came back across it, though, and I had to chime in.

    I'd like to respectuflly disagree with Major Payne. While they do have some purposes, I'd challenge you to find a major website that consistenly uses image mapping as a design solution. I don't think you'll be able to find a well-designed, well-traveled website that does so.

    While image mapping is a tool that can be used to solve a few problems, it should not be used to solve a lot of the design problems people are often tempted to use it for (such as website navigation).

    An image map will take longer to download than slicing the image into smaller components and linking each individually. They're not good for SEO. Accessability and working with multiple screen resolutions can make them problematic. There's also the issue that image maps went out of style somewhere around the same time that the iPod still had a black and white screen. Sure, it still has some useful functionality, but just because velour bell bottom pants cover your legs just as well as jeans doesn't mean you want to be seen out in public wearing them.

    Here's a link to an article that talks about a lot of the same issues I just mentioned (and gave me a lot of the back-up information referenced above): http://webdesign.about.com/od/imagem..._maps_negs.htm.
    Last edited by superwookie; 08-28-2012 at 08:40 PM. Reason: Added link


  •  

    Tags for this Thread

    Posting Permissions

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