Loading ...
Sorry, an error occurred while loading the content.

Re: [NTO] Re: Slices to web page

Expand Messages
  • Ed Brown
    Thanks John, That gives me a starting place, so I will go experiment some and see what happens. Ed ... From: To:
    Message 1 of 2 , Jan 31, 2003
    • 0 Attachment
      Thanks John,
      That gives me a starting place, so I will go experiment some and see what
      happens.
      Ed
      ----- Original Message -----
      From: <john041650@...>
      To: <ntb-OffTopic@yahoogroups.com>
      Sent: Friday, January 31, 2003 1:21 PM
      Subject: [NTO] Re: Slices to web page


      Ed I know this isn't what you asked, but I'll throw it in for what it's
      worth anyway...

      Recently I created an image to be used as a menu on a web site I'm building
      now, and it works kind of like a slice and diced image menu. But it's not
      sliced and diced, it is one image that I mapped out the coordinates of where
      what link goes to what. After I created the single image using the
      Photoshop, I just clicked on the Photoshop "Info" palette to make that
      active. Then using the mouse pointer I positioned it over my image at the
      upper left and lower right areas of where I wanted each link to be within
      that image, and wrote down the x,y locations shown on the Photoshop's Info
      palette. (In my image map, my links are all rectangular, but they don't
      have to be).. I have seven areas in that image that I use to link to seven
      different web pages, and it took me all of about 1 minute to record all
      seven links map coordinates using the Photoshop.

      Then I opened my web page in NoteTab, and inserted the following code for my
      image map.

      <map name="menu">
      <area shape="rect" coords="6,14,111,41" href="index.html" alt="Click to
      return to the opening page">
      <area shape="rect" coords="6,53,111,80" href="things.html" alt="Calendar of
      Events in Western Iowa">
      <area shape="rect" coords="6,92,111,119" href="places.html" alt="Western
      Iowa Attractions">
      <area shape="rect" coords="6,131,111,158" href="links.html" alt="Web Sites
      of Western Iowa Tourism Members">
      <area shape="rect" coords="6,170,111,197" href="photos.html" alt="Western
      Iowa Photo Gallery">
      <area shape="rect" coords="6,209,111,236" href="membership.html" alt="The
      benefits of belonging to the Western Iowa Tourism Region">
      <area shape="rect" coords="6,248,111,275" href="industry.html"
      alt="Information for WITR Members"></map>

      <img src="graphics/links.gif" width="120" height="400" border="0" alt=""
      usemap="#menu">


      In the first area element where it says coords="6,14,111,41" that represents
      the area of that image which represents the first link. Those numbers are
      the pixel distances from the top left corner of the image. 6,14 represent
      the x,y coordinates of the top left position of the first link, while 111,41
      represent the bottom right locations within the image of the first link.
      The same applies to the other 6 links. It's really pretty easy to do once
      you're onto it.

      John




      --- In ntb-OffTopic@yahoogroups.com, "Ed Brown" <ebrown27@b...> wrote:
      > Scott,
      > Actually I don't know what I was think of when I said ImageReady 3. It
      came
      > with PhotoShop 7.0 and upgraded to 7.01 so it is ImageReady 7.01. Thanks
      > I will see what it says. I have one picture on the screen that shows slice
      > no. 16. But I am not sure what it means by URL. It will go to
      > www.nclexreview.net/cover.html and that is in the URL box but how did it
      > know that? I want to put it in NoteTab and see what it looks like before
      I
      > upload all the image slices and as I understand it I will place the slice
      > HTML into the page at the place where the image would normally go. The
      > Manual leaves much to the imagination or presumes a lot more knowledge
      than
      > I have.
      > Ed





      Your use of Yahoo! Groups is subject to http://docs.yahoo.com/info/terms/
    • Alec Burgess
      John, Ed (thanks to Larry Hamilton on this list about 4 months ago) Meracl Image Map Generator: (src=NTBlist-Larry Hamilton) (mimg.zip) (2211 KB zipped.)
      Message 2 of 2 , Jan 31, 2003
      • 0 Attachment
        John, Ed (thanks to Larry Hamilton on this list about 4 months ago)

        Meracl Image Map Generator: (src=NTBlist-Larry Hamilton) (mimg.zip) (2211 KB
        zipped.) http://www.stockholm.bonet.se/meracl/mimg.htm

        This (free) program does what John is describing but generates the code
        automagically It saves the step of writitng down/copying the coordinates and
        remembering the format required ;-)

        >>Meracl ImageMap Generator lets you define the areas and their respective
        links using rectangles/squares, circles and polygons. Then it creates the
        HTML code for you which you can copy to the clipboard or save to a file.
        <<


        Regards ... Alec
        --

        ---- Original Message ----
        From: <john041650@...>
        To: <ntb-OffTopic@yahoogroups.com>
        Sent: Friday, January 31, 2003 14:21
        Subject: [NTO] Re: Slices to web page

        > Ed I know this isn't what you asked, but I'll throw it in for what
        > it's worth anyway...
        >
        > Recently I created an image to be used as a menu on a web site I'm
        > building now, and it works kind of like a slice and diced image menu.
        > But it's not sliced and diced, it is one image that I mapped out the
        > coordinates of where what link goes to what. After I created the
        > single image using the Photoshop, I just clicked on the Photoshop
        > "Info" palette to make that active. Then using the mouse pointer I
        > positioned it over my image at the upper left and lower right areas
        > of where I wanted each link to be within that image, and wrote down
        > the x,y locations shown on the Photoshop's Info palette. (In my
        > image map, my links are all rectangular, but they don't have to be)..
        > I have seven areas in that image that I use to link to seven
        > different web pages, and it took me all of about 1 minute to record
        > all seven links map coordinates using the Photoshop.
        >
        > Then I opened my web page in NoteTab, and inserted the following code
        > for my image map.
        >
        > <map name="menu">
        > <area shape="rect" coords="6,14,111,41" href="index.html" alt="Click
        > to return to the opening page"> <area shape="rect"
        > coords="6,53,111,80" href="things.html" alt="Calendar of Events in
        > Western Iowa"> <area shape="rect" coords="6,92,111,119"
        > href="places.html" alt="Western Iowa Attractions"> <area shape="rect"
        > coords="6,131,111,158" href="links.html" alt="Web Sites of Western
        > Iowa Tourism Members"> <area shape="rect" coords="6,170,111,197"
        > href="photos.html" alt="Western Iowa Photo Gallery"> <area
        > shape="rect" coords="6,209,111,236" href="membership.html" alt="The
        > benefits of belonging to the Western Iowa Tourism Region"> <area
        > shape="rect" coords="6,248,111,275" href="industry.html"
        > alt="Information for WITR Members"></map>
        >
        > <img src="graphics/links.gif" width="120" height="400" border="0"
        > alt="" usemap="#menu">
        >
        >
        > In the first area element where it says coords="6,14,111,41" that
        > represents the area of that image which represents the first link.
        > Those numbers are the pixel distances from the top left corner of the
        > image. 6,14 represent the x,y coordinates of the top left position of
        > the first link, while 111,41 represent the bottom right locations
        > within the image of the first link. The same applies to the other 6
        > links. It's really pretty easy to do once you're onto it.
        >
        > John
        >
        >
        >
        >
        > --- In ntb-OffTopic@yahoogroups.com, "Ed Brown" <ebrown27@b...> wrote:
        >> Scott,
        >> Actually I don't know what I was think of when I said ImageReady 3.
        >> It came with PhotoShop 7.0 and upgraded to 7.01 so it is ImageReady
        >> 7.01. Thanks I will see what it says. I have one picture on the
        >> screen that shows slice no. 16. But I am not sure what it means by
        >> URL. It will go to www.nclexreview.net/cover.html and that is in the
        >> URL box but how did it know that? I want to put it in NoteTab and
        >> see what it looks like before I upload all the image slices and as I
        >> understand it I will place the slice HTML into the page at the place
        >> where the image would normally go. The Manual leaves much to the
        >> imagination or presumes a lot more knowledge than I have.
        >> Ed
        >
        >
        >
        >
        >
        > Your use of Yahoo! Groups is subject to
        > http://docs.yahoo.com/info/terms/
      Your message has been successfully submitted and would be delivered to recipients shortly.