Image + Text swap question

Discussion in 'Javascript' started by Randell D., Oct 6, 2003.

  1. Randell D.

    Randell D. Guest

    I'm still learning javascript - I've invested in a couple of books and
    reading online as much as possible. I'm pretty sure what I am suggesting is
    possible though I'm trying to weigh up the faults that might go with the
    suggestion... all opinions welcome.

    My question: I have a list of links that go to pages that have a similar
    layout. Could I have a text swap, similar to what I've seen with image swaps
    (or an image switch) whereby instead of loading a seperate page, text and
    image is just replaced?

    Other than not being accessable by non-javascript supported browsers, and
    unlikely to be indexed by search engines, would I face any other
    difficulties? For example, does an image/text swap have any browser
    dependancy issues? If I know that all my clients will have javascript
    switched on, I'm trying to figure out how much of my audience am I limiting
    by having this 'feature' (my oldest clients that visit are IE5.5 and
    Netscape 4 but these make up less than 2% of my entire visitors during the
    past ten months).

    Randell D., Oct 6, 2003
    1. Advertisements

  2. Yes. I am not sure it is the best solution, but it is definitly technically

    You have to decide on some design issues first, though.

    Should all the text be loaded with the original page, or should the
    new text be loaded on-demand when you click on a link? For images, it is
    simple, they are always loaded when you need them, but text is not so
    easily changed.

    If you put the text in an iframe, you can change it by setting the src
    property. It has all the problems of frames, though, and I wouldn't
    recommend it for what you want.

    If you fetch text on-demand, you need a way to fetch data from the
    server without loading the page. Some browsers can do that with
    special features like XML-Http-Request of IE and Mozilla
    (<URL:>), but other browsers
    need more work to fetch simple text.

    If you load all the text with the original page, then switching the text
    is only a matter of changing which text block is visible. Or, you can put
    the text in Javascript and change the document content dynamically.
    That depends on how you do it, and which browsers you target.

    You should really decide the target browsers, and how the page should
    degrade for other browsers, before anything else. It will limit what
    approaches you can use.

    Netscape 4 couldn't change the document structure dynmanically, but it
    allowed you to change the contents of layers independently of the main
    document. Other browsers that don't allow changes to the document structure
    includes Opera 6, where your only choice is to load all the text at once
    (or use iframes).

    Text-swapping can be performed different ways:
    - IE's innerHTML/innerText properties. While innerHTML is quite widely
    implemented, it is non standard.
    - W3C's DOM. Only supported in modern browsers, not Netscape 4 or IE 4.
    How do you know?
    Some statistics claim as many as 10% of people browsing without
    As always, Netscape 4 is the worst offender. Not that you can blame it,
    it was designed before the W3C DOM. You can blame people who still use
    it and expect pages to work :).
    My favorite is:
    "Usenet isn't Jeopardy. The question before the answer, please."

    Lasse Reichstein Nielsen, Oct 6, 2003
    1. Advertisements

  3. Randell D.

    Randell D. Guest

    I'm curious - I knew someone with a similar name from Denmark - did you ever
    work for HP?

    Thanks for the prompt and detailed reply - I know my viewers have javascript
    switched on because of a small clear.gif image that is downloaded
    automatically, using javascript as a test. I can compare this with my
    webalizer log files and things are almost the same (give or take under 2%) -
    Fine for my purposes...

    I do plan on offering a static 'non-javascript' version of my pages though
    to cover my options....

    The javascript portion includes "blurbs" - it relates to products and I
    wasn't thinking of having the full text displayed - I was thinking of arrays
    or objects (the latter I'm just begining to learn at the moment) to contain
    the product name, the manufacturer and the first ten words (max 100chars)...
    Each page refresh would change the order of the listing to give a rough
    equality "top listing" thus not showing any single preference to one
    manufacturer or product... I could have had it randomized via PHP but I
    prefer a client-side engine...

    And your Jeopardy signature - I like it and will remember it - someday it
    will prove useful to me.... my girlfriend loves that show, regretably
    because hearing the answer first really annoys me...

    thanks for the help anyway...
    Randell D., Oct 7, 2003
  4. Nope, sorry (I wish!). According to, there are 60 people in
    Denmark called "Reichstein", and one other called "Lasse Reichstein",
    but he lives in Copenhagen, while I'm from Ã…rhus :)
    That is probably a fairly accurate measure. If it is only on the front
    page, it won't measure people going directly to sub pages. Still, 2%
    is a fairly high number of people to annoy ...
    .... so this is a good idea.
    Random shuffling of an array is fairly easy to do.
    I don't see why you prefer clientside computation to serverside PHP.
    All other things being equal, computing on the server is safer. Nobody
    has PHP turned off :)

    The description doesn't tell me whether you only load the first 100 chars
    of the description, or load it all and only display the 100 char blurp.

    If you only have the blurp loaded, you need to fetch the rest of the text
    after the page has loaded. So, this gives you two options:
    iframes (and an ilayer for NS4)
    XMLHTTPRequest for IE and Mozilla (with some other option for other
    modern browsers, and probably still an ilayer for NS4).

    The most widely usable solution is iframes. It can even work without
    Javascript in non-NS4 browsers.

    <a href="productX.html" target="description" onclick="return switchTo('X')">
    Product X is a fine thingie which is just what you want ...
    <img id="imageToChange" src="prod1.png">
    <iframe name="description" src="product1.html">
    <ilayer name="NSdescription" src="product1.html">

    For NS4, you will then change "document.layers.NSdescription.src"
    It really isn't mine. I picked it up from somebody in a Danish
    newsgroup. :)
    It's definitly just a gimmick. I can't remember the last time I saw
    somebody forget to give the answer as a question.

    Lasse Reichstein Nielsen, Oct 7, 2003
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.