Specify loading order of JPGs?

Discussion in 'Javascript' started by Chris Tomlinson, Jul 6, 2006.

  1. Hi, is there any way to specify the sequence in which images load on a web
    page?

    More specifically, here is what we need to achieve:

    Image1 starts loading first and the browser does not continue through the
    HTML until Image1 has loaded COMPLETELY. When Image1 is done, Image2 BEGINS
    loading. When Image2 is 100% done, only then does Image 3 begin... and so
    on...

    Anyone able to offer a way to do this? Some sort of browser "Pause" command
    is the ideal solution, which would pause the loading of HTML until the
    current command has completed, and THEN move on to the next 'chunk' of HTML.
    --
    Thanks,
    Me

    Try Google Quik-e-search™ at www.Superhighstreet.com/home
    ....Finds anything or they buy it for you!
    Chris Tomlinson, Jul 6, 2006
    #1
    1. Advertising

  2. There is no way to do this by setting some default browser behavour.

    Every image tag has an onload handler. You can use this to start loading
    the next image. For example:

    <img id="img1" src="firstImage.jpg" onload="loaded(this.id);">
    <img id="img2" src="empty.gif" onload="loaded(this);">
    <img id="img3" src="empty.gif" onload="loaded(this);">

    elsewhere:

    <script type="text/javascript">

    var srcs = {
    img1 : 'one.jpg',
    img2 : 'two.jpg',
    img3 : 'three.jpg'
    }

    function loaded(img) {
    if (img.src.indexOf('empty.gif') {
    return; // ignore empty
    }
    nextImgId = ímg' + (parseInt(img.id) + 1);
    nextImg = document.getElementById(nextImgId);
    nextImg.src = srcs[nextImgId];
    }

    </script>

    Somthing like that

    Vincent

    Chris Tomlinson wrote:
    > Hi, is there any way to specify the sequence in which images load on a web
    > page?
    >
    > More specifically, here is what we need to achieve:
    >
    > Image1 starts loading first and the browser does not continue through the
    > HTML until Image1 has loaded COMPLETELY. When Image1 is done, Image2 BEGINS
    > loading. When Image2 is 100% done, only then does Image 3 begin... and so
    > on...
    >
    > Anyone able to offer a way to do this? Some sort of browser "Pause" command
    > is the ideal solution, which would pause the loading of HTML until the
    > current command has completed, and THEN move on to the next 'chunk' of HTML.
    Vincent van Beveren, Jul 6, 2006
    #2
    1. Advertising

  3. Chris Tomlinson

    Brian Cryer Guest

    "Chris Tomlinson" <> wrote in message
    news:G44rg.97072$...
    > Hi, is there any way to specify the sequence in which images load on a web
    > page?
    >
    > More specifically, here is what we need to achieve:
    >
    > Image1 starts loading first and the browser does not continue through the
    > HTML until Image1 has loaded COMPLETELY. When Image1 is done, Image2
    > BEGINS loading. When Image2 is 100% done, only then does Image 3 begin...
    > and so on...
    >
    > Anyone able to offer a way to do this? Some sort of browser "Pause"
    > command is the ideal solution, which would pause the loading of HTML until
    > the current command has completed, and THEN move on to the next 'chunk' of
    > HTML.


    I experimented with this a while back, take a look at
    http://www.cryer.co.uk/resources/javascript/script3.htm.

    The bottom line is that you can do it, but you have to use JavaScript. My
    advice would be not to go that route unless you have a very good reason for
    it.
    --
    Brian Cryer
    www.cryer.co.uk/brian
    Brian Cryer, Jul 6, 2006
    #3
  4. Thanks Vincent, we will look into this.

    "Vincent van Beveren" <> wrote in message
    news:44acd48a$0$13213$...
    > There is no way to do this by setting some default browser behavour.
    >
    > Every image tag has an onload handler. You can use this to start loading
    > the next image. For example:
    >
    > <img id="img1" src="firstImage.jpg" onload="loaded(this.id);">
    > <img id="img2" src="empty.gif" onload="loaded(this);">
    > <img id="img3" src="empty.gif" onload="loaded(this);">
    >
    > elsewhere:
    >
    > <script type="text/javascript">
    >
    > var srcs = {
    > img1 : 'one.jpg',
    > img2 : 'two.jpg',
    > img3 : 'three.jpg'
    > }
    >
    > function loaded(img) {
    > if (img.src.indexOf('empty.gif') {
    > return; // ignore empty
    > } nextImgId = ímg' + (parseInt(img.id) + 1);
    > nextImg = document.getElementById(nextImgId);
    > nextImg.src = srcs[nextImgId];
    > }
    >
    > </script>
    >
    > Somthing like that
    >
    > Vincent
    >
    > Chris Tomlinson wrote:
    >> Hi, is there any way to specify the sequence in which images load on a
    >> web page?
    >>
    >> More specifically, here is what we need to achieve:
    >>
    >> Image1 starts loading first and the browser does not continue through the
    >> HTML until Image1 has loaded COMPLETELY. When Image1 is done, Image2
    >> BEGINS loading. When Image2 is 100% done, only then does Image 3
    >> begin... and so on...
    >>
    >> Anyone able to offer a way to do this? Some sort of browser "Pause"
    >> command is the ideal solution, which would pause the loading of HTML
    >> until the current command has completed, and THEN move on to the next
    >> 'chunk' of HTML.
    Chris Tomlinson, Jul 6, 2006
    #4
  5. "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
    news:eek:...
    > "Chris Tomlinson" <> wrote in message
    > news:G44rg.97072$...
    >> Hi, is there any way to specify the sequence in which images load on a
    >> web page?

    >
    > I experimented with this a while back, take a look at
    > http://www.cryer.co.uk/resources/javascript/script3.htm.
    >
    > The bottom line is that you can do it, but you have to use JavaScript. My
    > advice would be not to go that route unless you have a very good reason
    > for it.


    Thanks Brian, that looks interesting. Do you think it would work when the
    sliced images are contained within horizontal divs? You can see how we are
    using this at:
    http://www.superhighstreet.com/George-Street-Richmond/
    --
    Thanks,
    Me

    Try Google Quik-e-search™ at www.Superhighstreet.com/home
    ....Finds anything or they buy it for you!
    Chris Tomlinson, Jul 6, 2006
    #5
  6. Chris Tomlinson

    Brian Cryer Guest

    "Chris Tomlinson" <> wrote in message
    news:Or9rg.97232$...
    > "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
    > news:eek:...
    >> "Chris Tomlinson" <> wrote in message
    >> news:G44rg.97072$...
    >>> Hi, is there any way to specify the sequence in which images load on a
    >>> web page?

    >>
    >> I experimented with this a while back, take a look at
    >> http://www.cryer.co.uk/resources/javascript/script3.htm.
    >>
    >> The bottom line is that you can do it, but you have to use JavaScript. My
    >> advice would be not to go that route unless you have a very good reason
    >> for it.

    >
    > Thanks Brian, that looks interesting. Do you think it would work when the
    > sliced images are contained within horizontal divs? You can see how we
    > are using this at:
    > http://www.superhighstreet.com/George-Street-Richmond/


    I looked at your page, but I'm still not quite sure I understand what you
    mean by "horizontal divs". Wait a minute, do you mean that were you to take
    your "highstreet view" and chop it up into a number of individual images and
    then load each of those individually? If so, I don't see any reason why it
    wouldn't work.

    Be aware that to use JavaScript to control the load order of images means
    that your visitors who don't have JavaScript enabled probably won't see
    anything.

    It might be worth reconsidering what you are trying to do. Currently your
    "highstreet image" is 368KB, that's big, so I can understand your wanting to
    do something about it. Even if you ignore the length of time it takes to
    download the image, having the horizontal scroll bar is undesirable. Would
    thumbnail views be better? Click the thumbnail to view the shop entrance or
    enter? You could also try changing the jpg to use progressive encoding (in
    my experience this can make a big difference with gif files although IE
    still seems to wait until it has finished loading the jpg before displaying
    it regardless of whether its progressive or not).

    I know its not what you asked, but your page took a long time to load. It
    might help reduce the load time if you move away from using a table to
    structure the whole page (I'm not saying don't use tables for structure at
    all [although there are plenty who would disagree], but try to avoid having
    a table that contains everything on the form). It would be worth your while
    also working through the page validation errors (http://validator.w3.org/).
    (Sorry, I realise its work in progress and you would probably get to these
    points once you've sorted out what to do with the big highstreet image.)
    --
    Brian Cryer
    www.cryer.co.uk/brian
    Brian Cryer, Jul 6, 2006
    #6
  7. "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
    news:...

    >> Thanks Brian, that looks interesting. Do you think it would work when
    >> the sliced images are contained within horizontal divs? You can see how
    >> we are using this at:
    >> http://www.superhighstreet.com/George-Street-Richmond/

    >
    > I looked at your page, but I'm still not quite sure I understand what you
    > mean by "horizontal divs". Wait a minute, do you mean that were you to
    > take your "highstreet view" and chop it up into a number of individual
    > images and then load each of those individually? If so, I don't see any
    > reason why it wouldn't work.


    Hi Brian, yes that's right -- in fact that *is* what you were looking at,
    but we did it so cunningly you couldn't tell. ;) The issue is getting the
    divs to load in the right order.

    > Be aware that to use JavaScript to control the load order of images means
    > that your visitors who don't have JavaScript enabled probably won't see
    > anything.


    We are already relying on that as it's less than 1% of people now.

    > It might be worth reconsidering what you are trying to do. Currently your
    > "highstreet image" is 368KB, that's big, so I can understand your wanting
    > to do something about it. Even if you ignore the length of time it takes
    > to download the image, having the horizontal scroll bar is undesirable.
    > Would thumbnail views be better? Click the thumbnail to view the shop
    > entrance or


    We appreciate your feedback, but don't you feel static thumbnails would
    completely lose the virtual 'scroll' along the street that the user can do?

    Broadband is only getting more common.

    > enter? You could also try changing the jpg to use progressive encoding (in
    > my experience this can make a big difference with gif files although IE
    > still seems to wait until it has finished loading the jpg before
    > displaying it regardless of whether its progressive or not).


    They already use progressive which looks very good in Firefox, but we agree
    IE doesn't take advantage :(

    > I know its not what you asked, but your page took a long time to load. It


    Can we ask your connection speed? How long did it take to load roughly?

    > might help reduce the load time if you move away from using a table to
    > structure the whole page (I'm not saying don't use tables for structure at
    > all [although there are plenty who would disagree], but try to avoid
    > having a table that contains everything on the form). It would be worth
    > your while also working through the page validation errors
    > (http://validator.w3.org/). (Sorry, I realise its work in progress and you
    > would probably get to these points once you've sorted out what to do with
    > the big highstreet image.)


    Yep, still in beta but all good points.

    What would you suggest instead of the 3 tables on the page? Do these really
    add a lot to the load time do you think?
    --
    Thanks,
    Me
    Chris Tomlinson, Jul 6, 2006
    #7
  8. PS: Oh dear, we just realised that if we put the images into JS as per your
    demo page, they probably won't appear in WYSIWYG view in web page editors,
    correct? Unfortunately these are essential tools due to the imagemaps we
    need to draw around all the doors and shop signs, so the JPGs must be
    visible in programs such as FrontPage, Dreamweaver, etc. Do you have any
    other ideas to control the loading of slices?
    Chris Tomlinson, Jul 6, 2006
    #8
  9. You could maybe use the NOSCRIPT tag for that?

    <NOSCRIPT>
    .. plain and simple HTML with maps ...
    </NOSCRIPT>
    <SCRIPT>
    .. dynamic loading of images ...
    </SCRIPT>

    Most WYSIWYG editors read the NOSCRIPT and skip the SCRIPT tags. Most
    browsers skip the NOSCRIPT and execute the SCRIPT in the script tags.


    Chris Tomlinson wrote:
    > PS: Oh dear, we just realised that if we put the images into JS as per your
    > demo page, they probably won't appear in WYSIWYG view in web page editors,
    > correct? Unfortunately these are essential tools due to the imagemaps we
    > need to draw around all the doors and shop signs, so the JPGs must be
    > visible in programs such as FrontPage, Dreamweaver, etc. Do you have any
    > other ideas to control the loading of slices?
    >
    >
    Vincent van Beveren, Jul 7, 2006
    #9
  10. Chris Tomlinson

    Brian Cryer Guest

    "Chris Tomlinson" <> wrote in message
    news:Q%brg.97357$...
    > "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
    > news:...

    <snip>
    >> I looked at your page, but I'm still not quite sure I understand what you
    >> mean by "horizontal divs". Wait a minute, do you mean that were you to
    >> take your "highstreet view" and chop it up into a number of individual
    >> images and then load each of those individually? If so, I don't see any
    >> reason why it wouldn't work.

    >
    > Hi Brian, yes that's right -- in fact that *is* what you were looking at,
    > but we did it so cunningly you couldn't tell. ;) The issue is getting
    > the divs to load in the right order.


    Are you sure? because I downloaded the "highstreet" as a single image.

    >> Be aware that to use JavaScript to control the load order of images means
    >> that your visitors who don't have JavaScript enabled probably won't see
    >> anything.

    >
    > We are already relying on that as it's less than 1% of people now.
    >
    >> It might be worth reconsidering what you are trying to do. Currently your
    >> "highstreet image" is 368KB, that's big, so I can understand your wanting
    >> to do something about it. Even if you ignore the length of time it takes
    >> to download the image, having the horizontal scroll bar is undesirable.
    >> Would thumbnail views be better? Click the thumbnail to view the shop
    >> entrance or

    >
    > We appreciate your feedback, but don't you feel static thumbnails would
    > completely lose the virtual 'scroll' along the street that the user can
    > do?


    Agreed. Personally I don't like scrolling - but that's just my preference.
    If you want to keep the scroll then consider modifying the site so it isn't
    a fixed width. The monitor I'm using at the moment runs at 1600 pixels wide,
    so whilst I would still need to scroll, it would help if I didn't have a
    white border down the left and right hand sides. No, don't design for a
    larger width, just allow your page to adjust to the browser width. (By the
    way, I don't normally run my browser window full screen, and at my preferred
    size I have a horizontal scroll bar just to see the rest of your page.)

    Something else that might help (with loading times at least) would be to
    reduce the size (height and width) of the image.

    > Broadband is only getting more common.
    >
    >> enter? You could also try changing the jpg to use progressive encoding
    >> (in my experience this can make a big difference with gif files although
    >> IE still seems to wait until it has finished loading the jpg before
    >> displaying it regardless of whether its progressive or not).

    >
    > They already use progressive which looks very good in Firefox, but we
    > agree IE doesn't take advantage :(
    >
    >> I know its not what you asked, but your page took a long time to load. It

    >
    > Can we ask your connection speed? How long did it take to load roughly?


    Connection speed here is 512kbps, which is shared amongst the office (12 of
    us). Clearing my browser cache and reloading, I think it was about 12seconds
    to load everything, although the outline of the site came up much sooner
    than that.

    > What would you suggest instead of the 3 tables on the page? Do these
    > really add a lot to the load time do you think?


    The disadvantage of a table (in IE at least) is that IE won't display
    anything (of the table) until it has finished reading/downloading all the
    html for the table. This means that if the entire page were contained within
    a table then IE won't render anything until it has read to the end of the
    file. (This doesn't mean it needs to have downloaded the images, just the
    HTML.) I take my original comment back, because I see now that you do indeed
    have three separate tables and I had originally thought you had just one.
    Leave it for now, and ignore my comment.
    --
    Brian Cryer
    www.cryer.co.uk/brian
    Brian Cryer, Jul 7, 2006
    #10
  11. Chris Tomlinson

    Brian Cryer Guest

    "Chris Tomlinson" <> wrote in message
    news:Xqgrg.97635$...
    > PS: Oh dear, we just realised that if we put the images into JS as per
    > your demo page, they probably won't appear in WYSIWYG view in web page
    > editors, correct? Unfortunately these are essential tools due to the
    > imagemaps we need to draw around all the doors and shop signs, so the JPGs
    > must be visible in programs such as FrontPage, Dreamweaver, etc. Do you
    > have any other ideas to control the loading of slices?


    Two ideas:

    1. go with Vincent's suggestion.

    2. keep the images in (so you see them in your editor) but have some
    javascript which runs on page start up which resets each of the images to
    blank before explicitly loading each one. Sounds daft I know, but it means
    that the visitor won't have to wait for all the images to load and you can
    then control the load order AND it means that a visitor without JavaScript
    enabled will still see the images. (Is that clear?) You may have to play
    with it to see how practical this is.
    --
    Brian Cryer
    www.cryer.co.uk/brian
    Brian Cryer, Jul 7, 2006
    #11
  12. <joboils@spam_less_hotmail.com> wrote in message
    news:...

    > The more experienced may well "have at" the following, but -
    > if you are downloading the entire image in a one-er, and if people are
    > going to have to scroll *anyway*, why not put the downloaded image in
    > a <table width="10000" (or whatever size)> ?
    >
    > (BTW, I didn't like the thick, kiddie-appearance of the borders.)


    Thanks for the feedback but we don't quite understand. Currently the image
    is sliced into 3 sections, and placed in 3 horizontally aligned divs. It
    gives the impression of being one long image, but really they load
    independently.

    How would putting that into a table benefit?
    --
    Thanks,
    Me
    Chris Tomlinson, Jul 7, 2006
    #12
  13. "Vincent van Beveren" <> wrote in message
    news:44ae0da8$0$29589$...
    > You could maybe use the NOSCRIPT tag for that?
    >
    > <NOSCRIPT>
    > .. plain and simple HTML with maps ...
    > </NOSCRIPT>
    > <SCRIPT>
    > .. dynamic loading of images ...
    > </SCRIPT>
    >
    > Most WYSIWYG editors read the NOSCRIPT and skip the SCRIPT tags. Most
    > browsers skip the NOSCRIPT and execute the SCRIPT in the script tags.


    Good idea, thanks Vincent :)

    Would the <script> sections read the imagemaps in the <noscript> sections,
    or would we need to create 2 sets of imagemaps, and put one of them in the
    dynamic loading part?
    --
    Thanks,
    Me
    Chris Tomlinson, Jul 7, 2006
    #13
  14. "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
    news:...

    > Two ideas:
    >
    > 1. go with Vincent's suggestion.
    >
    > 2. keep the images in (so you see them in your editor) but have some
    > javascript which runs on page start up which resets each of the images to
    > blank before explicitly loading each one. Sounds daft I know, but it means
    > that the visitor won't have to wait for all the images to load and you can
    > then control the load order AND it means that a visitor without JavaScript
    > enabled will still see the images. (Is that clear?) You may have to play
    > with it to see how practical this is.


    This idea is exciting to us. Can you suggest what sort of JS code might
    achieve this?
    --
    Thanks,
    Me
    Chris Tomlinson, Jul 7, 2006
    #14
  15. "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
    news:...

    >> Hi Brian, yes that's right -- in fact that *is* what you were looking at,
    >> but we did it so cunningly you couldn't tell. ;) The issue is getting
    >> the divs to load in the right order.

    >
    > Are you sure? because I downloaded the "highstreet" as a single image.


    That would be very odd if so. Take a look in your cache and for the
    Richmond page you will find 6 sliced JPGs. Unless your browser has
    Photoshop built in ;)

    > Agreed. Personally I don't like scrolling - but that's just my preference.
    > If you want to keep the scroll then consider modifying the site so it
    > isn't a fixed width. The monitor I'm using at the moment runs at 1600
    > pixels wide, so whilst I would still need to scroll, it would help if I
    > didn't have a white border down the left and right hand sides. No, don't
    > design for a


    It's a good idea which we are already planning.

    > larger width, just allow your page to adjust to the browser width. (By the
    > way, I don't normally run my browser window full screen, and at my
    > preferred size I have a horizontal scroll bar just to see the rest of your
    > page.)


    The site will work without a scrollbar at 1024 upwards, so your preferred
    width must fall just a bit short of that. Oops, sorry.

    > Something else that might help (with loading times at least) would be to
    > reduce the size (height and width) of the image.


    We have struggled with this, but it is the optimum height from testing where
    users felt they were getting a realistic experience. It also is the
    absolute minimum where the smallest ePosters (120x60) actually fit in the
    shops' windows. There are many other factors too. And just reducing them
    what looks like a lot only resulted in a small reduction in file size. We
    are also compressing them to 40%.

    >> Can we ask your connection speed? How long did it take to load roughly?

    >
    > Connection speed here is 512kbps, which is shared amongst the office (12
    > of us). Clearing my browser cache and reloading, I think it was about
    > 12seconds to load everything, although the outline of the site came up
    > much sooner than that.


    That is consistent with our market research. Also the general consensus is
    anything under 15 seconds is acceptable to the user, anything more is a
    worry. So, whilst we are glad you are within our target range on a shared
    slow broadband :) we still want to make the page 'usable' if not fully
    loaded, sooner.

    The idea there is to present the first JPG slice ASAP, and the rest can
    follow as the user doesn't need them until they scroll or cross the road.

    >> What would you suggest instead of the 3 tables on the page? Do these
    >> really add a lot to the load time do you think?

    >
    > The disadvantage of a table (in IE at least) is that IE won't display
    > anything (of the table) until it has finished reading/downloading all the
    > html for the table. This means that if the entire page were contained
    > within a table then IE won't render anything until it has read to the end
    > of the file. (This doesn't mean it needs to have downloaded the images,
    > just the HTML.) I take my original comment back, because I see now that
    > you do indeed have three separate tables and I had originally thought you
    > had just one. Leave it for now, and ignore my comment.


    Thanks, but for the future, what method do other designers use for
    presenting such info as our instructions table etc.? There are a lot of
    sites which load pretty graphic 'tables' around the page, but they are
    usually divs. Is there a program they use to automatically create these
    graphical elements and align them in WYSIWYG? E.g. our partners at
    www.GreasyPalm.co.uk

    > --
    > Brian Cryer
    > www.cryer.co.uk/brian


    Appreciate your support Brian, many many thanks.
    --
    Thanks,
    Me
    Chris Tomlinson, Jul 7, 2006
    #15
  16. Chris Tomlinson

    Brian Cryer Guest

    "Chris Tomlinson" <> wrote in message
    news:aYqrg.97797$...
    > "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
    > news:...
    >
    >> Two ideas:
    >>
    >> 1. go with Vincent's suggestion.
    >>
    >> 2. keep the images in (so you see them in your editor) but have some
    >> javascript which runs on page start up which resets each of the images to
    >> blank before explicitly loading each one. Sounds daft I know, but it
    >> means that the visitor won't have to wait for all the images to load and
    >> you can then control the load order AND it means that a visitor without
    >> JavaScript enabled will still see the images. (Is that clear?) You may
    >> have to play with it to see how practical this is.

    >
    > This idea is exciting to us. Can you suggest what sort of JS code might
    > achieve this?


    If you look at my original example
    (http://www.cryer.co.uk/resources/javascript/script3.htm), something along
    the lines of the code used behind the "reset" button - although resetting to
    a blank 1 pixel by 1 pixel white image is probably better than what I've don
    on that page. Call that before starting the load.
    --
    Brian Cryer
    www.cryer.co.uk/brian
    Brian Cryer, Jul 7, 2006
    #16
  17. Chris Tomlinson

    Brian Cryer Guest

    "Chris Tomlinson" <> wrote in message
    news:22rrg.97806$...
    > "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
    > news:...
    >
    >>> Hi Brian, yes that's right -- in fact that *is* what you were looking
    >>> at, but we did it so cunningly you couldn't tell. ;) The issue is
    >>> getting the divs to load in the right order.

    >>
    >> Are you sure? because I downloaded the "highstreet" as a single image.

    >
    > That would be very odd if so. Take a look in your cache and for the
    > Richmond page you will find 6 sliced JPGs. Unless your browser has
    > Photoshop built in ;)


    I stand corrected. The image I grabbed was 6907x290 pixels (416KB). I had
    assumed it was the full "street", but visually comparing it it looks like
    about the first third.

    <snip>

    > The site will work without a scrollbar at 1024 upwards, so your preferred
    > width must fall just a bit short of that. Oops, sorry.


    Yes, not sure exactly what my browser is normally set to, but its less than
    1024. I suppose it must be nearer 800, since I can fit two side by side on
    my monitor. I accept I'm unusual wanting to see multiple browser windows at
    the same time, 1024 seems to be the norm although some sites I've worked on
    have targetted 800 (if anything).

    <snip>

    > Thanks, but for the future, what method do other designers use for
    > presenting such info as our instructions table etc.? There are a lot of
    > sites which load pretty graphic 'tables' around the page, but they are
    > usually divs. Is there a program they use to automatically create these
    > graphical elements and align them in WYSIWYG? E.g. our partners at
    > www.GreasyPalm.co.uk


    Personally, I think your instructions look fine as they are.

    Which software are you using to create the site? (i.e. which wysiwyg?) For
    my hobby site I use FrontPage 2000 (my commercial stuff is almost
    exclusively .NET and thus Visual Studio). I don't know about FrontPage 2003,
    but FrontPage 2000 doesn't handle div's very well if you use them for
    layout. I've been playing with Microsoft Expression Web Designer (the beta
    is a free download) and it seems to handle these very well.
    --
    Brian Cryer
    www.cryer.co.uk/brian
    Brian Cryer, Jul 7, 2006
    #17
  18. You'd create the images map just in the NOSCRIPT and write a SCRIPT to
    copy the content (atleast the images, including image map references) of
    the NOSCRIPT. So you just need one set. The advantage of this method is
    also that users without JavaScript see the images. You might also
    consider using the lowsrc attribute for images
    (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/lowsrc.asp),
    though I have the idea FF doesn't listen to it.

    Vincent

    Chris Tomlinson wrote:
    > "Vincent van Beveren" <> wrote in message
    > news:44ae0da8$0$29589$...
    >> You could maybe use the NOSCRIPT tag for that?
    >>
    >> <NOSCRIPT>
    >> .. plain and simple HTML with maps ...
    >> </NOSCRIPT>
    >> <SCRIPT>
    >> .. dynamic loading of images ...
    >> </SCRIPT>
    >>
    >> Most WYSIWYG editors read the NOSCRIPT and skip the SCRIPT tags. Most
    >> browsers skip the NOSCRIPT and execute the SCRIPT in the script tags.

    >
    > Good idea, thanks Vincent :)
    >
    > Would the <script> sections read the imagemaps in the <noscript> sections,
    > or would we need to create 2 sets of imagemaps, and put one of them in the
    > dynamic loading part?
    Vincent van Beveren, Jul 7, 2006
    #18
  19. Thanks Vincent, we're going to look into this method. Really appreciate
    your support and ideas.
    --
    Thanks,
    Me

    "Vincent van Beveren" <> wrote in message
    news:44ae4950$0$32735$...
    > You'd create the images map just in the NOSCRIPT and write a SCRIPT to
    > copy the content (atleast the images, including image map references) of
    > the NOSCRIPT. So you just need one set. The advantage of this method is
    > also that users without JavaScript see the images. You might also consider
    > using the lowsrc attribute for images
    > (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/lowsrc.asp),
    > though I have the idea FF doesn't listen to it.
    >
    > Vincent
    >
    > Chris Tomlinson wrote:
    >> "Vincent van Beveren" <> wrote in message
    >> news:44ae0da8$0$29589$...
    >>> You could maybe use the NOSCRIPT tag for that?
    >>>
    >>> <NOSCRIPT>
    >>> .. plain and simple HTML with maps ...
    >>> </NOSCRIPT>
    >>> <SCRIPT>
    >>> .. dynamic loading of images ...
    >>> </SCRIPT>
    >>>
    >>> Most WYSIWYG editors read the NOSCRIPT and skip the SCRIPT tags. Most
    >>> browsers skip the NOSCRIPT and execute the SCRIPT in the script tags.

    >>
    >> Good idea, thanks Vincent :)
    >>
    >> Would the <script> sections read the imagemaps in the <noscript>
    >> sections, or would we need to create 2 sets of imagemaps, and put one of
    >> them in the dynamic loading part?
    Chris Tomlinson, Jul 7, 2006
    #19
  20. "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
    news:p...

    > Personally, I think your instructions look fine as they are.
    >
    > Which software are you using to create the site? (i.e. which wysiwyg?) For
    > my hobby site I use FrontPage 2000 (my commercial stuff is almost
    > exclusively .NET and thus Visual Studio). I don't know about FrontPage
    > 2003, but FrontPage 2000 doesn't handle div's very well if you use them
    > for layout. I've been playing with Microsoft Expression Web Designer (the
    > beta is a free download) and it seems to handle these very well.


    Thanks for the heads-up on that one. We do use FP2003, but Expression looks
    far better and seems to be based on FrontPage, and an upgrade of it.

    What we hope you can tell us is if Expression will easily allow us to
    'convert' our site to CSS retaining its look and feel. Is there some magic
    button that will take our <font> attributes for example, and move them into
    a CSS format?

    Same question but for converting tables into CSS and divs?

    Thanks Brian.
    Chris Tomlinson, Jul 7, 2006
    #20
    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. dorayme

    progressive jpgs

    dorayme, Jun 8, 2005, in forum: HTML
    Replies:
    5
    Views:
    454
    Travis Newbury
    Jun 8, 2005
  2. Kai Berger

    Read out pixels from .jpgs

    Kai Berger, Jul 1, 2004, in forum: C++
    Replies:
    2
    Views:
    385
    John Carson
    Jul 1, 2004
  3. Replies:
    2
    Views:
    288
    red floyd
    Dec 20, 2004
  4. Chris Tomlinson

    Specify loading order of JPGs?

    Chris Tomlinson, Jul 6, 2006, in forum: HTML
    Replies:
    95
    Views:
    1,799
    Jim Higson
    Aug 5, 2006
  5. jojo
    Replies:
    5
    Views:
    323
Loading...

Share This Page