File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Intro to JavaScript is a nightmare Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Intro to JavaScript is a nightmare" Watch "Intro to JavaScript is a nightmare" New topic

Intro to JavaScript is a nightmare

Alyssa Doberstein

Joined: Oct 17, 2012
Posts: 3

This is the html, I am only permitted to change the javascript and there are a few things I need to do that I cannot figure out how to do.

-Corresponding full size images for the thumbnails must be preloaded when the application starts

-When a thumbnail is clicked, the corresponding full size image will be shown in the fullsize-image img element with an appropriate alt attribute value (same as the file name e.g. fullsize1)

-The comment control button should read Show Comments
When the full size image is hovered over with the mouse the corresponding description for the image should be displayed in the description div

-The descriptions are provided in an array in the assign1.js file and correspond in order
E.g. descriptions[0] -> thumb1.jpg

-The description div should disappear when the mouse is not hovering on the full size image

-Clicking the Show Comments button should display comments made on the image (if any have been posted) and the value of the button should change to Leave a Comment

-Bonus [2 marks]: Display in the comment area a message if there are no messages for the current image
Clicking the Leave a Comment button should bring up the comment form

-Bonus [3 marks]: prevent the image from changing when the form is displayed

-Comments should be added as li elements within the existing comments ul element

-Comments may only be posted with a valid by (required) name and comment (required) content

-Provide form validation feedback (error messages) so mistakes can be corrected

-Ensure that the error messages are placed in the designated div and that the message colour is red (use the style property for this task)

-The format for displaying posted comments is as follows:
Jon Doe on Oct 3, 2012 said: I love this picture sooooo much!
Be sure the that current date is displayed

-If a comment is successfully submitted it should immediately appear in the comments area

-If the cancel button is clicked, reset and hide the form

-Comments must persist when they are posted

-Comments that have been left must be visible when for any image on consecutive views
William P O'Sullivan
Ranch Hand

Joined: Mar 28, 2012
Posts: 859

Welcome Alyssa, Those are a lot of questions.

Post your possible solutions and we will try to help.

Alyssa Doberstein

Joined: Oct 17, 2012
Posts: 3
The bit of javascript on there is all my code, but it doesn't seem to be doing anything. I don't think it will until the alt values are in place. I have asked other classmates and googled this but the only thing I can find is how to create this sort of img gallery using other programs. :S
Alyssa Doberstein

Joined: Oct 17, 2012
Posts: 3
function preloadImages() {

// Create an Image object to preload images with
imageObj = null;

// Create an array of images to be preloaded
images = new Array();

images[0] = "images/fullsize1.jpg";
images[1] = "images/fullsize2.jpg";
images[2] = "images/fullsize3.jpg";
images[3] = "images/fullsize4.jpg";

// Preload each image in the array by creating a new image and
// setting the src property
for (var i = -1) {
imageObj = new Image();
imageObj.src = images[++i];

this is the closest I've gotten and it still isn't working at all...
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63858

How about tackling one thing at a time and worry about getting the rest working, one at a time, afterwards. Not only is it the best way to tackle the problem, it will likely get you more help.

So pick one item, and try to get that working.

[Asking smart questions] [About Bear] [Books by Bear]
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
well I would start by looking at your for loop.
I agree. Here's the link:
subject: Intro to JavaScript is a nightmare
jQuery in Action, 3rd edition