Advice: how best to create an image

Discussion in 'Javascript' started by tosbalok@gmail.com, Aug 31, 2007.

  1. Guest

    I have a variable (really a constant) defined in a .js file. The
    contents of the variable is the source location for an image (there
    are actually several. The idea is, you click an image and the
    javascript will swap the image source out - an on image, an off image,
    you get the idea).

    Now here's the problem: I also have to a copy of the button that is
    visible when the page loads. That's easy enough to do *if* I simple
    type out the src= attribute of the image. I don't want to do that. I
    have this constant defined in the .js file. I want to make use of it.

    <html>
    <head>

    <script language="javascript">
    // this constant is defined in a .js file
    ImgSrc = "/webpresence/resources/common/icon/twistie/plus/
    icn_twistyall_closed.gif";

    </script>
    </head>

    <body>

    <!-- I need to create an image that uses the src defined above. Old
    way is: -->
    <img src="/webpresence/resources/common/icon/twistie/plus/
    icn_twistyall_closed.gif"/>

    <!-- I'm looking for a better option than hardcoding the src. -->
    <!-- I want to make use of the variable, ImgSrc. Here's the only idea
    I came up with -->
    <script language="javascript">document.write("<img src='" + ImgSrc +
    "' />");</script>

    </body>
    </html>
     
    , Aug 31, 2007
    #1
    1. Advertising

  2. Lee Guest

    said:

    >Now here's the problem: I also have to a copy of the button that is
    >visible when the page loads. That's easy enough to do *if* I simple
    >type out the src= attribute of the image. I don't want to do that. I
    >have this constant defined in the .js file. I want to make use of it.


    Your best bet is to bite the bullet and hard-code the src attribute,
    but then replace it with the value from your .js file in an onLoad
    handler (or inline Javascript, if you prefer).
    That way, you've still got an image if Javascript is disabled.


    --
     
    Lee, Aug 31, 2007
    #2
    1. Advertising

  3. wrote:
    > <html>
    > <head>
    >
    > <script language="javascript">
    > // this constant is defined in a .js file
    > ImgSrc = "/webpresence/resources/common/icon/twistie/plus/
    > icn_twistyall_closed.gif";


    Hopefully it is defined with

    var imgSrc = ...

    or

    const imgSrc = ...

    as variables should be and constants have to be declared.

    > </script>
    > </head>
    >
    > <body>
    >
    > <!-- I need to create an image that uses the src defined above. Old
    > way is: -->
    > <img src="/webpresence/resources/common/icon/twistie/plus/
    > icn_twistyall_closed.gif"/>
    >
    > <!-- I'm looking for a better option than hardcoding the src. -->
    > <!-- I want to make use of the variable, ImgSrc. Here's the only idea
    > I came up with -->
    > <script language="javascript">document.write("<img src='" + ImgSrc +
    > "' />");</script>


    http://validator.w3.org/

    Your generated `img' element also needs an `alt' attribute to be Valid, and
    you should not use XML syntax when you do not declare XHTML (you should
    declare HTML 4.01). Aside from that, this is the way to go, leaving only
    one not unimportant question:

    What about users where client-side script support is disabled or not present?


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Aug 31, 2007
    #3
  4. Guest

    On Aug 31, 5:57 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > Your generated `img' element also needs an `alt' attribute to be Valid


    Obviously, when one asks a question, one posts the absolute minimum
    code required to make the example run. That's me being polite.
    That's me saying, "here, I'm not going to make you wade through extra
    stuff that doesn't have anything to do with the problem I'm having."
    I'm asking for your help, so I make it as easy as possible for you.

    If you aren't able to help, I'd really rather you just didn't post.
    It's 2007 you know. Everybody knows how to write valid HTML. Nobody
    here thinks you're clever for posting a link to the w3c. You're just
    spamming, or trolling. Your post is OT. Maybe if this was an HTML
    group, or maybe even a CSS group you'd have a point. But in a
    javascript group, you just look like someone who is unnecessarily
    proud of himself for knowing what a validator is. Congratulations.
    I'm sure your mother is proud.

    I'm not going to add the extra three lines to make it valid HTML
    because that has no relevance to my question, and in fact reduces the
    chance that someone will offer me advice, because it makes my example
    appear longer and more complex than it actually is.
     
    , Sep 1, 2007
    #4
  5. Guest

    On Aug 31, 11:44 am, Lee <> wrote:
    > That way, you've still got an image if Javascript is disabled.


    Well, the button that this image will be is a convenience thing *for*
    people with javascript. It's an expand/collapse twistie. People with
    javascript turned off will see the list expanded. I would prefer that
    people with javascript turned off didn't see the twisty button, since
    it doesn't do anything for them. So that's another good reason to
    write it out with javascript.

    What I'm getting at here is something that I can package up for
    developers in my organization. I can tell them, "ok, if you want to
    do this cool expand/collapse thing, you include this .js file and then
    you put onclick events on your li's" And I'll also have to tell them
    to manually add the twistie icon. But I'd really rather not do that.

    So, I guess nobody has any ideas huh?
     
    , Sep 1, 2007
    #5
  6. wrote:
    > On Aug 31, 5:57 pm, Thomas 'PointedEars' Lahn <>
    > wrote:
    >> Your generated `img' element also needs an `alt' attribute to be Valid

    >
    > Obviously, when one asks a question, one posts the absolute minimum
    > code required to make the example run. That's me being polite.
    > That's me saying, "here, I'm not going to make you wade through extra
    > stuff that doesn't have anything to do with the problem I'm having."
    > I'm asking for your help, so I make it as easy as possible for you.
    >
    > If you aren't able to help, I'd really rather you just didn't post.
    > It's 2007 you know. Everybody knows how to write valid HTML. Nobody
    > here thinks you're clever for posting a link to the w3c. [...]


    Go away.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Sep 1, 2007
    #6
  7. Lee Guest

    said:
    >
    >On Aug 31, 11:44 am, Lee <> wrote:
    >> That way, you've still got an image if Javascript is disabled.

    >
    >Well, the button that this image will be is a convenience thing *for*
    >people with javascript. It's an expand/collapse twistie. People with
    >javascript turned off will see the list expanded. I would prefer that
    >people with javascript turned off didn't see the twisty button, since
    >it doesn't do anything for them. So that's another good reason to
    >write it out with javascript.
    >
    >What I'm getting at here is something that I can package up for
    >developers in my organization. I can tell them, "ok, if you want to
    >do this cool expand/collapse thing, you include this .js file and then
    >you put onclick events on your li's" And I'll also have to tell them
    >to manually add the twistie icon. But I'd really rather not do that.
    >
    >So, I guess nobody has any ideas huh?


    It's not a lack of ideas. It's knowing that the methods I
    suggested (onLoad or inline code) are the choices you've got.


    --
     
    Lee, Sep 1, 2007
    #7
  8. Guest

    On Aug 31, 9:51 pm, Lee <> wrote:
    >
    > It's not a lack of ideas. It's knowing that the methods I
    > suggested (onLoad or inline code) are the choices you've got.
    >


    Don't get me wrong. I appreciate the help. Actually, I woke up this
    morning with an epiphany: I don't actually need an img! I can use a
    css class to put an image in the background and still toggle it with
    javascript! So now the HTML part looks very clean:

    <a>(more)</a>
    <p>the text I'm displaying/hiding</p>

    That doesn't include styles and onclick events and such.

    Now if I could get one last little piece to work, then it would work
    even for people with javascript turned off. I need the "more" button
    to have an href so that for people without javascript the page
    reloads, and I can display the <p> text. But for people with
    javascript, I want to use the onclick event.

    <a href="thispage.php?showgroup=1" onclick="toggleGroup(1)">(more)</a>

    But what happens when I click this is that the javascript runs, and
    then the page reloads anyway.
     
    , Sep 1, 2007
    #8
  9. On Sep 1, 5:08 am, "" <> wrote:
    > On Aug 31, 9:51 pm, Lee <> wrote:
    >
    >
    >
    > > It's not a lack of ideas. It's knowing that the methods I
    > > suggested (onLoad or inline code) are the choices you've got.

    >
    > Don't get me wrong. I appreciate the help. Actually, I woke up this
    > morning with an epiphany: I don't actually need an img! I can use a
    > css class to put an image in the background and still toggle it with
    > javascript! So now the HTML part looks very clean:
    >
    > <a>(more)</a>
    > <p>the text I'm displaying/hiding</p>
    >
    > That doesn't include styles and onclick events and such.
    >
    > Now if I could get one last little piece to work, then it would work
    > even for people with javascript turned off. I need the "more" button
    > to have an href so that for people without javascript the page
    > reloads, and I can display the <p> text. But for people with
    > javascript, I want to use the onclick event.
    >
    > <a href="thispage.php?showgroup=1" onclick="toggleGroup(1)">(more)</a>
    >
    > But what happens when I click this is that the javascript runs, and
    > then the page reloads anyway.


    That's because you need to add the statement "return false" to your
    "onclick" attribute like so:

    onclick="toggleGroup(1);return false;"

    which will prevent the link from doing its default action (navigate to
    the URL in the "href" attribute).

    See: http://www.jibbering.com/faq/#FAQ4_24

    -David
     
    David Golightly, Sep 1, 2007
    #9
  10. Guest

    On Sep 1, 11:17 am, David Golightly <> wrote:
    >
    > onclick="toggleGroup(1);return false;"
    >


    I used removeAttribute('href') but returning false seems like a good
    idea.
     
    , Sep 1, 2007
    #10
    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. Denise Smith
    Replies:
    2
    Views:
    664
    Denise Smith
    Nov 22, 2003
  2. Asun Friere
    Replies:
    1
    Views:
    520
    Paul Boddie
    Aug 27, 2003
  3. Peter Hansen
    Replies:
    23
    Views:
    902
    Anton Vredegoor
    Sep 5, 2003
  4. Gerrit Holl
    Replies:
    16
    Views:
    637
    Tom Plunket
    Aug 29, 2003
  5. Asun Friere
    Replies:
    0
    Views:
    489
    Asun Friere
    Aug 28, 2003
Loading...

Share This Page