Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Advice: how best to create an image

Reply
Thread Tools

Advice: how best to create an image

 
 
tosbalok@gmail.com
Guest
Posts: n/a
 
      08-31-2007
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>

 
Reply With Quote
 
 
 
 
Lee
Guest
Posts: n/a
 
      08-31-2007
http://www.velocityreviews.com/forums/(E-Mail Removed) 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.


--

 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      08-31-2007
(E-Mail Removed) 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
 
Reply With Quote
 
tosbalok@gmail.com
Guest
Posts: n/a
 
      08-31-2007
On Aug 31, 5:57 pm, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
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.

 
Reply With Quote
 
tosbalok@gmail.com
Guest
Posts: n/a
 
      08-31-2007
On Aug 31, 11:44 am, Lee <(E-Mail Removed)> 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?

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      08-31-2007
(E-Mail Removed) wrote:
> On Aug 31, 5:57 pm, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
> 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
 
Reply With Quote
 
Lee
Guest
Posts: n/a
 
      09-01-2007
(E-Mail Removed) said:
>
>On Aug 31, 11:44 am, Lee <(E-Mail Removed)> 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.


--

 
Reply With Quote
 
tosbalok@gmail.com
Guest
Posts: n/a
 
      09-01-2007
On Aug 31, 9:51 pm, Lee <(E-Mail Removed)> 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.

 
Reply With Quote
 
David Golightly
Guest
Posts: n/a
 
      09-01-2007
On Sep 1, 5:08 am, "(E-Mail Removed)" <(E-Mail Removed)> wrote:
> On Aug 31, 9:51 pm, Lee <(E-Mail Removed)> 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

 
Reply With Quote
 
tosbalok@gmail.com
Guest
Posts: n/a
 
      09-01-2007
On Sep 1, 11:17 am, David Golightly <(E-Mail Removed)> wrote:
>
> onclick="toggleGroup(1);return false;"
>


I used removeAttribute('href') but returning false seems like a good
idea.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Re: Best freeware to create a DVD image on disk directly from JPG, AVI, & MP3 files M.L. Digital Photography 0 02-16-2010 12:45 PM
best way to store binary image data in a variable using image magick Jack Perl Misc 2 01-25-2008 10:59 AM
wx.Image: Couldn't add an image to the image list. Laszlo Zsolt Nagy Python 1 01-26-2005 09:55 PM
Best Image -- Image Size vs Compression john chapman Digital Photography 5 08-09-2004 01:21 PM



Advertisments