Advice: how best to create an image

T

tosbalok

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>
 
L

Lee

(e-mail address 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.
Click to expand...

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.


--
 
T

Thomas 'PointedEars' Lahn

<html>
<head>

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

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>
Click to expand...

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
 
T

tosbalok

Your generated `img' element also needs an `alt' attribute to be Valid
Click to expand...

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.
 
T

tosbalok

That way, you've still got an image if Javascript is disabled.
Click to expand...

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?
 
T

Thomas 'PointedEars' Lahn

Your generated `img' element also needs an `alt' attribute to be Valid
Click to expand...

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. [...]
Click to expand...

Go away.


PointedEars
 
L

Lee

(e-mail address removed) said:
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?
Click to expand...

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.


--
 
T

tosbalok

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.
Click to expand...

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.
 
D

David Golightly

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.
Click to expand...

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
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image upload not working in browser 4
Image shifts to the right when export the page to pdf 4
Looking For Advice 1
New to coding - image to the time of day based on time 2
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
How to stop an animated image from sticking to top of page? 2
How to position the *tooltip* comment on these buttons? 9
I am trying to detect Which image id="" was clicked ? 22

Members online

Total: 39 (members: 1, guests: 38)
Robots: 524

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top