Picture links

[Isis]

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.

 

[Jonathan N. Little]

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

 

[Adrienne Boswell]

Gazing into my crystal ball I observed Isis

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).

 

[dorayme]

Gazing into my crystal ball I observed Isis

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?

 

[Beauregard T. Shagnasty]

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.

 

[cwdjrxyz]

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 .

 

[Chris F.A. Johnson]

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.

 

[+mrcakey]

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.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed dorayme

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.

 

[richard]

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.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed cwdjrxyz <[email protected]>
writing in

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.

 

[Bergamot]

Gazing into my crystal ball I observed dorayme


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.

 

[dorayme]

Gazing into my crystal ball I observed dorayme

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>