I am not sure if this is on topic or not but I have to issue a cry for help. There are a series of pages I am working on that have different floor plans that you can click on and you get a different floor plan image ( <http://www.speakupnow.ca/wu/room_208.php>http://www.speakupnow.ca/wu/room_208.php ). The client is telling me that the pages 'flick' when they click on the link for each new floor plan as if it was loading a new page, but sometimes it seems very fluid and doesn't 'flick'. So I guess my question is ( if it's not shot down by a mod) is:
1) is there any better way to get around this problem then I am doing to make it more consistently fluid in it's reloading?
2) how do I tell my client that this is how it is ?
Paul,
Some amount of flicker is probably unavoidable when downloading new images. Once an image has been downloaded to the client it's usually cached and therefore won't flicker a second time.
You can avoid all flicker, if that's really important, by downloading all the images to begin with and then merely toggling between them when the user clicks on a link. This generally requires using client-side scripting such as JavaScript.
It's important to make your page work even when JavaScript isn't supported, so you can keep the page-reload technique your current system and merely add a layer of JavaScript on top that will switch between images when the floorplan thumbnails are clicked.
The way I usually do this is to set the body class equal to the currently-selected item and use CSS to display the current image and suppress the others from display. Because the body class can be set either from a server-side script or a client-side script, the same technique can be used for both. E.g.,
<body class="boardroom">
...
<div id="floorplans">
<img id="theatre" ... />
<img id="boardroom" ... />
<img id="ushaped" ... />
</div>
CSS:
div#floorplans img
{
visibility: hidden;
}
body.theatre div#floorplans img#theatre,
body.boardroom div#floorplans img#boardroom,
body.ushaped div#floorplans img#ushaped
{
visibility: visible;
}Note that an image suppressed with {display: none;} will not pre-load, however images suppressed with {visibility: hidden;} will. The trouble with using visibility: hidden; is that objects maintain their position in the flow, just invisibly, so it's slightly more complicated to get all the images to appear in the same position. One solution is to position the images absoutely within a relatively-positioned div, so in effect all the images exist in the same spot. Then when one image is hidden and another is shown, the second appears to replace the first.
Paul
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
