/    Sign up×
Community /Pin to ProfileBookmark

beginner, using ‘book of javascript.’ broken images.

Copy linkTweet thisAlerts:
Jul 05.2010

I’m just beginning the process of learning JavaScript, using Dave Thau’s BOOK OF JAVASCRIPT. It’s my first programming language.

I’m in Chapter 4: “Working with Rollovers.” The exercises in this chapter involve swapping out the image of a sad face (sad_face.gif) for the image of a happy face (happy_face.gif) at the click of a button, the rollover of a mouse, etc.

My problem is that I cannot get the images which are to be used in these programs to display in my browser (which is the latest version of Firefox). They always show up as broken.

When I run the [URL=”http://www.bookofjavascript.com/Chapter04/Fig04-13.html”]‘Figure 13’ example[/URL] of [URL=”http://www.bookofjavascript.com/Chapter04/”]chapter 4[/URL] directly from Dave Thau’s tutorial website, the smiley face images appear in my browser as promised in the book.

However, when I cut and paste the SAME EXACT CODE — given in the [URL=”http://www.bookofjavascript.com/Chapter04/Fig04-13.txt”]Figure 13 ‘read it’ example[/URL]— into a .html file, and run it in my browser, the images show up, once again, as broken.

What’s up?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Jul 05.2010 — That is out-dated syntax. One version of that which will presumably teach the same lesson is this.<img src="sad_face.gif" [B][COLOR="Red"]id[/COLOR][/B]="my_image">
<br>
<a href="#" onclick="[COLOR="Red"][B]document.getElementById('my_image')[/B][/COLOR].src = 'happy_face.gif';
return false;">
make my day!</a>
Copy linkTweet thisAlerts:
@ranunculusauthorJul 05.2010 — Declan: the updated syntax didn't fix my problem, but thanks. Does this mean I'm using an outdated book? Any suggestions for a better starting-out text?

Padonak: I downloaded the images, yes. Presumably they're on my hard drive. I also tried manipulating alternative images that I had in My Pictures, to achieve the same lesson -- but any reference I made in my program to a picture file on my computer yielded a broken icon when run in my browser. Am I misunderstanding something, here?

I suppose I just want to know how to get an image -- any image -- up in my browser, to play with, at this point. I'm just using Notepad and Firefox.
Copy linkTweet thisAlerts:
@PadonakJul 06.2010 — according to the code the images must be in the same folder to the html file. are they?
Copy linkTweet thisAlerts:
@Declan1991Jul 06.2010 — You have deeper problems then as Padonak says. You can write a path to the image (i.e. have the image and file in different folders), but by far the easiest is to have the image and file in the same folder and use <img src="sad_face.gif">. If you aren't seeing a sad face, this has nothing to do with JavaScript.

Personally, I'd be inclined to use [url=http://www.w3schools.com/]w3schools[/url], and bear in mind that when finished with any tutorial, there is still a lot to learn.
Copy linkTweet thisAlerts:
@ranunculusauthorJul 06.2010 — Thank you, sirs. That was indeed my problem. I also looked up this 'full path' business so I know how to do it in the future.

And Declan: thanks for the suggestion. Seems like an excellent resource. And I am aware that any text is but a starting point -- real learning is playing around with the stuff.

I appreciate your help. ?
×

Success!

Help @ranunculus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...