Picture links

Discussion in 'HTML' started by Isis, Feb 17, 2009.

  1. Isis

    Isis Guest

    I have an HTML page on which I display a large picture in it's native
    proportions and underneath that I have 5 other images forced into 100 x 100
    bordered (1px) boxes. I have arranged things so that if I click on the
    smaller image, the image is called up from the site I store it on (but this
    changes the window I was on), but I would instead prefer to replace the
    large image above with the image that I clicked on in the smaller image
    selections. I hope that makes sense.

    So, like on eBay, you have a selection of small images and clicking on them
    enlarges them on the same page you are viewing them on in the same place
    each time.

    I am imagining this may have to be done wih some javascript which I have
    not used - I am happy to have a go if someone could point me in the right
    direction.

    Thanks for any help.
    Isis, Feb 17, 2009
    #1
    1. Advertising

  2. Isis wrote:
    > I have an HTML page on which I display a large picture in it's native
    > proportions and underneath that I have 5 other images forced into 100 x 100
    > bordered (1px) boxes.



    That is not a good idea, because constraining and image with HTML WIDTH
    & HEIGHT attributes does *nothing* to save bandwidth. The whole
    enchilada must be download even though the image appears small and
    browsers are not as good as image editor at rescaling images and
    optimizing the clarity of the image. Use two set of images, thumbnails
    resampled to 100x100 pixels and the others at full size.

    > I have arranged things so that if I click on the
    > smaller image, the image is called up from the site I store it on (but this
    > changes the window I was on), but I would instead prefer to replace the
    > large image above with the image that I clicked on in the smaller image
    > selections. I hope that makes sense.
    >
    > So, like on eBay, you have a selection of small images and clicking on them
    > enlarges them on the same page you are viewing them on in the same place
    > each time.
    >
    > I am imagining this may have to be done wih some javascript which I have
    > not used - I am happy to have a go if someone could point me in the right
    > direction.


    Yes you need to use JavaScript to do this with a click. (or Flash)


    http://www.google.com/search?hl=en&q=javascript thumbnail view script&btnG=Google Search
    javascript thumbnail view script - Google Search

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 17, 2009
    #2
    1. Advertising

  3. Gazing into my crystal ball I observed Isis
    <> writing in
    news:Xns9BB59A86E34F9Isissoft@193.202.122.130:

    > I have an HTML page on which I display a large picture in it's native
    > proportions and underneath that I have 5 other images forced into 100
    > x 100 bordered (1px) boxes. I have arranged things so that if I
    > click on the smaller image, the image is called up from the site I
    > store it on (but this changes the window I was on), but I would
    > instead prefer to replace the large image above with the image that I
    > clicked on in the smaller image selections. I hope that makes sense.
    >
    > So, like on eBay, you have a selection of small images and clicking on
    > them enlarges them on the same page you are viewing them on in the
    > same place each time.
    >
    > I am imagining this may have to be done wih some javascript which I
    > have not used - I am happy to have a go if someone could point me in
    > the right direction.
    >
    > Thanks for any help.


    You can do it client side with javascript, or you can do it server side
    with PHP or ASP, or other server side language.

    One of the good things about doing it server side is that you don't have
    to worry about visitors without javascript. Have a look at
    http://trishhouse.com/bedroom.php?pic=59 . This is all done server
    side, where the image names are in a database (the images themselves are
    on the server - not in the database).

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Feb 17, 2009
    #3
  4. Isis

    dorayme Guest

    In article <Xns9BB55F2DF61BEarbpenyahoocom@207.115.17.102>,
    Adrienne Boswell <> wrote:

    > Gazing into my crystal ball I observed Isis


    >

    ....
    > > So, like on eBay, you have a selection of small images and clicking on
    > > them enlarges them on the same page you are viewing them on in the
    > > same place each time.
    > >
    > > I am imagining this may have to be done wih some javascript which I
    > > have not used - I am happy to have a go if someone could point me in
    > > the right direction.


    > You can do it client side with javascript, or you can do it server side
    > with PHP or ASP, or other server side language.
    >
    > One of the good things about doing it server side is that you don't have
    > to worry about visitors without javascript. Have a look at
    > http://trishhouse.com/bedroom.php?pic=59 . This is all done server
    > side, where the image names are in a database (the images themselves are
    > on the server - not in the database).


    Do you know that that the horiz menus are badly broken in Safari, all
    overlapping and disappearing and stuff?

    --
    dorayme
    dorayme, Feb 17, 2009
    #4
  5. dorayme wrote:

    > Adrienne Boswell <> wrote:
    >> .. Have a look at http://trishhouse.com/bedroom.php?pic=59 .

    >
    > Do you know that that the horiz menus are badly broken in Safari, all
    > overlapping and disappearing and stuff?


    Not just Safari, I am sorry to say. Firefox and Opera are the same.

    --
    -bts
    -Friends don't let friends drive Windows
    Beauregard T. Shagnasty, Feb 17, 2009
    #5
  6. Isis

    cwdjrxyz Guest

    On Feb 17, 2:50 pm, dorayme <> wrote:
    > In article <Xns9BB55F2DF61BEarbpenyahoo...@207.115.17.102>,
    >  Adrienne Boswell <> wrote:
    >
    >
    >
    >
    >
    > > Gazing into my crystal ball I observed Isis

    >
    > ...
    > > > So, like on eBay, you have a selection of small images and clicking on
    > > > them enlarges them on the same page you are viewing them on in the
    > > > same place each time.

    >
    > > > I am imagining this may have to be done wih some javascript which I
    > > > have not used - I am happy to have a go if someone could point me in
    > > > the right direction.

    > > You can do it client side with javascript, or you can do it server side
    > > with PHP or ASP, or other server side language.

    >
    > > One of the good things about doing it server side is that you don't have
    > > to worry about visitors without javascript.  Have a look at
    > >http://trishhouse.com/bedroom.php?pic=59.  This is all done server
    > > side, where the image names are in a database (the images themselves are
    > > on the server - not in the database).

    >
    > Do you know that that the horiz menus are badly broken in Safari, all
    > overlapping and disappearing and stuff?


    If I view the 3rd to 4th row of buttons that give selections of rooms,
    they do overlap in the horizontal direction on Safari for Windows,
    IE7, Firefox, Seamonkey, Opera, Google Chrome, and flock. However the
    buttons do work. I changed default size on IE7 to both largest and
    smallest text size, but this did not clear up the problem, although it
    made the buttons smaller or larger. Since the code is on server side
    script, I have no idea what is going on. Anyway, something needs to be
    done to add more space between lines 2 to 4. The correction likely
    will be something rather simple.

    When I viewed the page on K-Melon, I got quite a shock. Instead of the
    page, I was given an xml error message, indicating that the page was
    being parsed as application/xhtml+xml, as indeed the properties of the
    page indicated. Checking all other browsers mentioned with the
    exception of IE7, I also found the page was being served as
    application/xhtml+xml. Apparently the parser for K-Meleon is more
    critical of an xml error than the other browsers. Validation at W3C
    did find one error, but I am not certain if that is what threw the
    validation error in K-Meleon or not. This behavior is a first for me
    to see. Going to IE7, and checking the source code by right clicking,
    the page was served as html 4.01 strict. This means that server side
    script is being used to detect that IE7 can not use application/xhtml
    +xml and providing an html 4.01 strict page for it. There are various
    methods used to do this.

    So I have found another "nut" besides me who sometimes uses true xhtml
    served properly :).
    cwdjrxyz, Feb 17, 2009
    #6
  7. On 2009-02-17, Beauregard T. Shagnasty wrote:
    > dorayme wrote:
    >
    >> Adrienne Boswell <> wrote:
    >>> .. Have a look at http://trishhouse.com/bedroom.php?pic=59 .

    >>
    >> Do you know that that the horiz menus are badly broken in Safari, all
    >> overlapping and disappearing and stuff?

    >
    > Not just Safari, I am sorry to say. Firefox and Opera are the same.


    Same here. The line-height needs to be increased to accommodate
    padding and/or margin.


    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Feb 18, 2009
    #7
  8. Isis

    +mrcakey Guest

    "Isis" <> wrote in message
    news:Xns9BB59A86E34F9Isissoft@193.202.122.130...
    >I have an HTML page on which I display a large picture in it's native
    > proportions and underneath that I have 5 other images forced into 100 x
    > 100
    > bordered (1px) boxes. I have arranged things so that if I click on the
    > smaller image, the image is called up from the site I store it on (but
    > this
    > changes the window I was on), but I would instead prefer to replace the
    > large image above with the image that I clicked on in the smaller image
    > selections. I hope that makes sense.
    >
    > So, like on eBay, you have a selection of small images and clicking on
    > them
    > enlarges them on the same page you are viewing them on in the same place
    > each time.
    >
    > I am imagining this may have to be done wih some javascript which I have
    > not used - I am happy to have a go if someone could point me in the right
    > direction.
    >


    There are quite a few off the shelf versions of this sort of thing that you
    can download/play with. Try "javascript picture album" or something like
    that.

    --
    +mrcakey
    http://www.everythingthatswrongwiththeworld.com
    +mrcakey, Feb 18, 2009
    #8
  9. Gazing into my crystal ball I observed dorayme
    <> writing in
    news::

    > In article <Xns9BB55F2DF61BEarbpenyahoocom@207.115.17.102>,
    > Adrienne Boswell <> wrote:
    >
    >> Gazing into my crystal ball I observed Isis

    >
    >>

    > ...
    >> > So, like on eBay, you have a selection of small images and clicking
    >> > on them enlarges them on the same page you are viewing them on in
    >> > the same place each time.
    >> >
    >> > I am imagining this may have to be done wih some javascript which I
    >> > have not used - I am happy to have a go if someone could point me
    >> > in the right direction.

    >
    >> You can do it client side with javascript, or you can do it server
    >> side with PHP or ASP, or other server side language.
    >>
    >> One of the good things about doing it server side is that you don't
    >> have to worry about visitors without javascript. Have a look at
    >> http://trishhouse.com/bedroom.php?pic=59 . This is all done server
    >> side, where the image names are in a database (the images themselves
    >> are on the server - not in the database).

    >
    > Do you know that that the horiz menus are badly broken in Safari, all
    > overlapping and disappearing and stuff?
    >


    Yes, it's on purpose. They are supposed to overlap.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Feb 18, 2009
    #9
  10. Isis

    richard Guest

    On 17 Feb 2009 15:11:27 GMT, Isis <>
    wrote:

    >I have an HTML page on which I display a large picture in it's native
    >proportions and underneath that I have 5 other images forced into 100 x 100
    >bordered (1px) boxes. I have arranged things so that if I click on the
    >smaller image, the image is called up from the site I store it on (but this
    >changes the window I was on), but I would instead prefer to replace the
    >large image above with the image that I clicked on in the smaller image
    >selections. I hope that makes sense.
    >
    >So, like on eBay, you have a selection of small images and clicking on them
    >enlarges them on the same page you are viewing them on in the same place
    >each time.
    >
    >I am imagining this may have to be done wih some javascript which I have
    >not used - I am happy to have a go if someone could point me in the right
    >direction.
    >
    >Thanks for any help.


    Without the use of scripting you could possibly use iframes.
    The thumbnails would be linked to the proper full size image and the
    larger image appears as selected.
    Another way might be to use zindex. Of course, this method means all
    of the large images must be loaded before the page is fully loaded to
    function.
    richard, Feb 18, 2009
    #10
  11. Gazing into my crystal ball I observed cwdjrxyz <>
    writing in
    news::

    > On Feb 17, 2:50 pm, dorayme <> wrote:
    >> In article <Xns9BB55F2DF61BEarbpenyahoo...@207.115.17.102>,
    >>  Adrienne Boswell <> wrote:
    >>
    >>
    >>
    >>
    >>
    >> > Gazing into my crystal ball I observed Isis

    >>
    >> ...
    >> > > So, like on eBay, you have a selection of small images and
    >> > > clicking o

    > n
    >> > > them enlarges them on the same page you are viewing them on in
    >> > > the same place each time.

    >>
    >> > > I am imagining this may have to be done wih some javascript which
    >> > > I have not used - I am happy to have a go if someone could point
    >> > > me in the right direction.
    >> > You can do it client side with javascript, or you can do it server
    >> > side with PHP or ASP, or other server side language.

    >>
    >> > One of the good things about doing it server side is that you don't
    >> > hav

    > e
    >> > to worry about visitors without javascript.  Have a look at
    >> >http://trishhouse.com/bedroom.php?pic=59.  This is all done server
    >> > side, where the image names are in a database (the images
    >> > themselves ar

    > e
    >> > on the server - not in the database).

    >>
    >> Do you know that that the horiz menus are badly broken in Safari, all
    >> overlapping and disappearing and stuff?

    >
    > If I view the 3rd to 4th row of buttons that give selections of rooms,
    > they do overlap in the horizontal direction on Safari for Windows,
    > IE7, Firefox, Seamonkey, Opera, Google Chrome, and flock. However the
    > buttons do work. I changed default size on IE7 to both largest and
    > smallest text size, but this did not clear up the problem, although it
    > made the buttons smaller or larger. Since the code is on server side
    > script, I have no idea what is going on. Anyway, something needs to be
    > done to add more space between lines 2 to 4. The correction likely
    > will be something rather simple.


    It's supposed to be like that. Originially, when I was going to fix it,
    the client happened to come by, saw the overlapping, and liked it. So,
    it stayed.

    >
    > When I viewed the page on K-Melon, I got quite a shock. Instead of the
    > page, I was given an xml error message, indicating that the page was
    > being parsed as application/xhtml+xml, as indeed the properties of the
    > page indicated. Checking all other browsers mentioned with the
    > exception of IE7, I also found the page was being served as
    > application/xhtml+xml. Apparently the parser for K-Meleon is more
    > critical of an xml error than the other browsers. Validation at W3C
    > did find one error, but I am not certain if that is what threw the
    > validation error in K-Meleon or not.


    I just downloaded K-Meleon. Usually, Opera is very good at catching
    things like this. It didn't this time. BAD Opera! BAD Opera! It was
    the missing alt attribute on the main picture.

    This behavior is a first for me
    > to see. Going to IE7, and checking the source code by right clicking,
    > the page was served as html 4.01 strict. This means that server side
    > script is being used to detect that IE7 can not use application/xhtml
    > +xml and providing an html 4.01 strict page for it. There are various
    > methods used to do this.


    It's specifically detecting that the browser accepts
    application/xhtml+xml. IE accepts *.* - which is a LIE.

    >
    > So I have found another "nut" besides me who sometimes uses true xhtml
    > served properly :).
    >


    Yup, and happy to be in good company.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Feb 18, 2009
    #11
  12. Isis

    Bergamot Guest

    Adrienne Boswell wrote:
    > Gazing into my crystal ball I observed dorayme
    > <> writing in
    > news::
    >
    >> In article <Xns9BB55F2DF61BEarbpenyahoocom@207.115.17.102>,
    >> Adrienne Boswell <> wrote:
    >>>
    >>> http://trishhouse.com/bedroom.php?pic=59 .
    >>>

    >> Do you know that that the horiz menus are badly broken in Safari, all
    >> overlapping and disappearing and stuff?

    >
    > Yes, it's on purpose. They are supposed to overlap.


    Problem is, the overlap is too much and impairs readability, especially
    on that second set of links.

    --
    Berg
    Bergamot, Feb 18, 2009
    #12
  13. Isis

    dorayme Guest

    In article <Xns9BB648C13D372arbpenyahoocom@207.115.33.102>,
    Adrienne Boswell <> wrote:

    > Gazing into my crystal ball I observed dorayme


    > >> http://trishhouse.com/bedroom.php?pic=59 . This is all done server
    > >> side, where the image names are in a database (the images themselves
    > >> are on the server - not in the database).

    > >
    > > Do you know that that the horiz menus are badly broken in Safari, all
    > > overlapping and disappearing and stuff?
    > >

    >
    > Yes, it's on purpose. They are supposed to overlap.


    I see it in a new light now! You have added a bit of spice to it this
    way, it is not that old boring easy to read menu that you and I usually
    make for folks. You have added user interactivity! They have to sit up
    and pay attention and do a bit of guessing or open up their browsers or
    increase their font sizes if they have any difficulty first thing thing
    the morning before their brains are fully engaged. An early morning pre
    tea teaser. I love it and will be implementing it on some of my own
    sites. <g>

    --
    dorayme
    dorayme, Feb 18, 2009
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Alvin Bruney
    Replies:
    2
    Views:
    419
    Neil Kimber
    Jul 21, 2003
  2. eddie wang
    Replies:
    1
    Views:
    400
    Peter O'Reilly
    Jul 23, 2003
  3. www.westerncartooncards.ca

    Exchange Links < Western Cartoon Cards > Exchange Links

    www.westerncartooncards.ca, Jul 12, 2004, in forum: HTML
    Replies:
    2
    Views:
    1,217
    Toby Inkster
    Jul 12, 2004
  4. Replies:
    8
    Views:
    1,221
    Mick White
    Apr 19, 2005
  5. Garrett Smith
    Replies:
    14
    Views:
    295
    David Mark
    May 26, 2009
Loading...

Share This Page