Welcome! Log In Create A New Profile

Advanced

Javascript

Posted by lindy-72961430 
Announcements Last Post
Announcement SoC Curricula 09/30/2017 01:08PM
Announcement Demarcation or scoping of examinations and assessment 02/13/2017 07:59AM
Announcement School of Computing Short Learning Programmes 11/24/2014 08:37AM
Announcement Unisa contact information 07/28/2011 01:28PM
Re: Javascript
May 01, 2011 07:22PM
Ok, I found my problem... instead of naming my images in the array as 1,2,3 and then the default as 0, as per the book...I had to name the images 0,1,2 and then the default as 3 and change the onMouseover and onMouseout event handlers in the links to reflect the correct image number from the array and it works.

Lindy, let me know how many images you have and how you have named them and the default image as well and I'll try help you out with the coding.
Re: Javascript
May 02, 2011 01:03PM
Eva , thanks for the motivation but at this stage I realise that I definitely will never be able to do Javascript out of my head , which is fine. I`ve been through tasks 4b numerous times , I even joined Lynda.com and have sat for hours watching the tutorials but the javascript ones just confuse me more. I just hope that there is software out there that does all these little tricks. I have used the formulas above to rollover images and it works , now to validate the email address and then I can surely say that I am well done.
Re: Javascript
May 02, 2011 02:43PM
I am having trouble getting my buttons to work, can anybody assist? They link to the correct pages, but they do not change images as required. I have loaded the images into the an array and I am trying to get them to change. I think the problem might be with the two javascript functions deactivebutton and activebutton, but I am not sure.

Language: Javascript
<SCRIPT language="JavaScript"> <!-- var imagearray = new Array(14)   imagearray[0].src = "graphics/home1.gif" imagearray[1].src = "graphics/home2.gif" imagearray[2].src = "graphics/mailinglist1.gif" imagearray[3].src = "graphics/mailinglist2.gif" imagearray[4].src = "graphics/calendar1.gif" imagearray[5].src = "graphics/calendar2.gif" imagearray[6].src = "graphics/howwework1.gif" imagearray[7].src = "graphics/howwework2.gif" imagearray[8].src = "graphics/createevent1.gif" imagearray[9].src = "graphics/createevent2.gif" imagearray[10].src = "graphics/faq1.gif" imagearray[11].src = "graphics/faq2.gif" imagearray[12].src = "graphics/contactus1.gif" imagearray[13].src = "graphics/contactus2.gif"   function activebutton (num) { document.images[num].src=imagearray[num].src }   function deactivebutton (num) { document.images[num].src=imagearray[num].src } --> </SCRIPT>
Language: HTML
  1. </head>
  2.  
  3. <body>
  4. <!-- HEADER -->
  5. <div id="top">
  6. <!--- logo -->
  7. <a href="home.html"><img src="graphics/innercircle.jpg" width="440" height="160" alt="Inner Circle Social Club"/></a>
  8.  
  9. <!-- links to other pages -->
  10. <span id="links">
  11. <table border="0">
  12. <tr>
  13. <td><a href="home.html" title="Home" onmouseover="activebutton(1)" onmouseout="deactivebutton(0)"><img src="graphics/home1.gif" width="86" height="41"></a><a href="mailinglist.html" title="Mailing List" onmouseover="activebutton(1)" onmouseout="deactivebutton(0)"><img src="graphics/mailinglist1.gif" width="86" height="41"></a><a href="calendar.html" title="Event Calendar" onmouseover="activebutton(1)" onmouseout="deactivebutton(0)"><img src="graphics/calendar1.gif" width="86" height="41"></a><a href="howitworks.html" title="How It Works" onmouseover="activebutton(1)" onmouseout="deactivebutton(0)"><img src="graphics/howwework1.gif" width="86" height="41"></a></td>
  14. </tr>
  15. <tr>
  16. <td><a href="createevent.html" title="Create Event" onmouseover="activebutton(1)" onmouseout="deactivebutton(0)"><img src="graphics/createevent1.gif" width="86" height="41"></a><a href="faq.html" title="Frequently Asked Questions" onmouseover="activebutton(1)" onmouseout="deactivebutton(0)"><img src="graphics/faq1.gif" width="86" height="41"></a><a href="contactus.html" title="Contact Us" onmouseover="activebutton(1)" onmouseout="deactivebutton(0)"><img src="graphics/contactus1.gif" width="86" height="41"></a></td>
  17. </tr>
  18. </table>
  19. </span>
  20. </div>

[/code]
Re: Javascript
May 02, 2011 03:15PM
Mac, I would like to findout about the kind of information that we need to put on the website when creating fully fuctioning site, are we expected to put real information? like personal details?smile
Re: Javascript
May 02, 2011 03:40PM
Phoenix, as far as I can tell the biggest error is not adding the onMouseover and onMouseout event handlers to your a tags in the body (you may want to refer to page 55 of JavaScript).
I am not 100% sure whether this would cause any errors but in your script where you have used "imagearray" that should be "rollimgs" (again you may want to refer to page 52 of JavaScript).

As far as activebutton & deactivebutton, I have no idea how this works so perhaps someone else could shed some light.
Re: Javascript
May 02, 2011 05:52PM
Oh, I didn't realise that not all the code was displaying when I posted the message.

I have added the beginning of line 13 of the body section where the button is displayed. hopefully that will give a better indication of where the onmouseover and onmouseout's are being used.

a href="home.html" title="Home" onmouseover="activebutton(1)" onmouseout="deactivebutton(0)"><img src="graphics/home1.gif" width="86" height="41"></a
Re: Javascript
May 02, 2011 07:29PM
@Phoenix
So as long as you have the onMouseover and onMouseout event handlers on all your links, the problem is elsewhere.

Perhaps you can try changing the "imagearray" to "rollimgs" and see whether that helps. The way I understand it, the "rollimgs" is telling the script what it needs to do with the images and by calling it "imagearray" it cannot do that. Not actually sure how to explain this but have a look at my script:

(If that isn't the problem then perhaps you were correct in saying it may have something to do with the buttons.

Good luck!)

Language: HTML
var rollimgs=new Array(4) for(j = 0; j < 4; j++) { rollimgs[j]=new Image() } rollimgs[3].src = "images/cupcakeone.jpg" rollimgs[0].src = "images/cupcaketwo.jpg" rollimgs[1].src = "images/cupcakethree.jpg" rollimgs[2].src = "images/cupcakefour.jpg"   function activeLink(imgnum) { document.images[imgnum].src = rollimgs[imgnum].src }   function inactiveLink(imgnum) { document.images[imgnum].src = rollimgs[3].src }
avatar
Mac
Re: Javascript
May 03, 2011 07:20AM
73038881 Wrote:
-------------------------------------------------------
> Mac, I would like to findout about the kind of
> information that we need to put on the website
> when creating fully fuctioning site, are we
> expected to put real information? like personal
> details?smile

No. You can add whatever you want.
avatar
Mac
Re: Javascript
May 03, 2011 07:39AM
The imagearray function is just a "placeholder" for your images where you define where
image 0 (imagearray[0].src=....)
image 1 (imagearray[1].src=....)
image 2 (imagearray[2].src=...)
etc can be found.

The other two functions refer to this "placeholder" by way of this code . .......src=imagearray[num].src

When you call for a function with the event handler e.g.
activebutton(1)
you are passing the value 1 to the activebutton function, which then replaces the [num] part with 1, as in
document.images[num].src=imagearray[num].src
becomes
document.images[1].src=imagearray[1].src

It fetches image 1 as you defined it in the imagearray.
Re: Javascript
May 04, 2011 03:13PM
I am substituting one image for another , so image 4 will be replaced by image 0 and so on. This is my code which is not working.

var rollimgs = new Array(9)for

(j = 0; j < 9; j++)
{
rollimgs[j] = new Image()
}

rollimgs[0].src = "images\golf1.jpg"
rollimgs[1].src = "images\whale.jpeg"
rollimgs[2].src = "images\vineyard.jpg"
rollimgs[3].src = "images\biker.jpg"

rollimgs[4].src = "images\buttonGolf2.png"
rollimgs[5].src = "images\buttonWhale2.png"
rollimgs[6].src = "images\buttonWine2.png"
rollimgs[7].src = "images\buttonMtb2.png"

function activeLink(imgnum)
{
document.images[imgnum].src = rollimgs[imgnum].src
}
function inactiveLink(imgnum)
{
document.images[imgnum].src = rollimgs[imgnum].src
}


tr><td> a href = "thingsToDo.html" onmouseover="activeLink(0)" onmouseout="inactiveLink(4)">
img src="images\buttonGolf2.png" width="100" height="100" name="golf" alt="Club Me!" border="0" </a></td>

Above is the code for the first rollover. Why is it not working? First of all I am confused by the (j=0...etc in brackets , do I need that there. Secondly I am not sure what to put after "a href" . I have put the webpage that it is on. And obviously thirdly why on earth is this not working????
Re: Javascript
May 04, 2011 03:15PM
non
avatar
Mac
Re: Javascript
May 04, 2011 03:24PM
USe the formatted code button to post code PLEASE! Paths require a forward slash images/button.gif
Re: Javascript
May 04, 2011 03:28PM
Where do I find the formatted code button? And sorry , I have no idea what paths you mean.
Re: Javascript
May 04, 2011 03:53PM
I am substituting one image for another , so image 4 will be replaced by image 0 and so on. This is my code which is not working.

Language: Javascript
var rollimgs = new Array(9)for(j = 0; j < 9; j++) {rollimgs[j] = new Image()} rollimgs[0].src = "images/golf1.jpg" rollimgs[1].src = "images/whale.jpeg" rollimgs[2].src = "images/vineyard.jpg" rollimgs[3].src = "images/biker.jpg" rollimgs[4].src = "images/buttonGolf2.png" rollimgs[5].src = "images/buttonWhale2.png" rollimgs[6].src = "images/buttonWine2.png" rollimgs[7].src = "images/buttonMtb2.png" function activeLink(imgnum) {document.images[imgnum].src = rollimgs[imgnum].src} function inactiveLink(imgnum) {document.images[imgnum].src = rollimgs[imgnum].src}   <a href = "thingsToDo.html" onmouseover="activeLink(0)" onmouseout="inactiveLink(4)"> <img src="images/buttonGolf2.png" width="100" height="100" name="golf" alt="Club Me!" border="0"></a>

Above is the code for the first rollover. Why is it not working? First of all I am confused by the (j=0...etc in brackets , do I need that there. Secondly I am not sure what to put after "a href" . I have put the webpage that it is on.
Re: Javascript
May 04, 2011 05:34PM
I don't know if anybody else has noticed, but the formatted code button removes the onmouseover and onmouseout from your code.

My code is similar, except that I don't create the image array from a for loop. Mine is also not working, so I have moved the code into the body section, as per Eva's recommendation.
Re: Javascript
May 05, 2011 09:35PM
Hi Lindy

I have finally gotten my code to work. I am attaching it in the formatted code type and normal, so you should be able to see everything from there, I will also try to explain my reasoning behind what I did.
Javascript
Language: Javascript
// Instantiating Array objects to hold Image objects var imagearray = new Array(14)   // Instantiating Image objects into arrays for precaching images for(j = 0; j < 14; j++) { imagearray[j] = new Image() }   // Precaching images for rollover swaps imagearray[0].src = "graphics/home1.gif" imagearray[1].src = "graphics/home2.gif" imagearray[2].src = "graphics/mailinglist1.gif" imagearray[3].src = "graphics/mailinglist2.gif" imagearray[4].src = "graphics/calendar1.gif" imagearray[5].src = "graphics/calendar2.gif" imagearray[6].src = "graphics/howwework1.gif" imagearray[7].src = "graphics/howwework2.gif" imagearray[8].src = "graphics/createevent1.gif" imagearray[9].src = "graphics/createevent2.gif" imagearray[10].src = "graphics/faq1.gif" imagearray[11].src = "graphics/faq2.gif" imagearray[12].src = "graphics/contactus1.gif" imagearray[13].src = "graphics/contactus2.gif"   // Function to swap image into rollover image placeholders function changebutton (buttonnum, imgnum) { document.images[buttonnum].src = imagearray[imgnum].src } //-->

HTML
Language: HTML
<a href="home.html" title="Home" onmouseover="changebutton(1,1)" onmouseout="changebutton(1,0)"><img src="graphics/home1.gif" width="86" height="41"></a> <a href="mailinglist.html" title="Mailing List" onmouseover="changebutton(2,3)" onmouseout="changebutton(2,2)"><img src="graphics/mailinglist1.gif" width="86" height="41"></a> <a href="calendar.html" title="Event Calendar" onmouseover="changebutton(3,5)" onmouseout="changebutton(3,4)"><img src="graphics/calendar1.gif" width="86" height="41"></a> <a href="howitworks.html" title="How It Works" onmouseover="changebutton(4,7)" onmouseout="changebutton(4,6)"><img src="graphics/howwework1.gif" width="86" height="41"></a></td> </td> </tr> <tr> <td><a href="createevent.html" title="Create Event" onmouseover="changebutton(5,9)" onmouseout="changebutton(5,8)"><img src="graphics/createevent1.gif" width="86" height="41"></a> <a href="faq.html" title="Frequently Asked Questions" onmouseover="changebutton(6,11)" onmouseout="changebutton(6,10)"><img src="graphics/faq1.gif" width="86" height="41"></a> <a href="contactus.html" title="Contact Us" onmouseover="changebutton(7,13)" onmouseout="changebutton(7,12)"><img src="graphics/contactus1.gif" width="86" height="41"></a>

The forum has removed my onmouse tags, so I will list them here, for the first four buttons:

a href="home.html" title="Home" onmouseover="changebutton(1,1)" onmouseout="changebutton(1,0)"><img src="graphics/home1.gif" width="86" height="41"></a>
a href="mailinglist.html" title="Mailing List" onmouseover="changebutton(2,3)" onmouseout="changebutton(2,2)"><img src="graphics/mailinglist1.gif" width="86" height="41"></a>
a href="calendar.html" title="Event Calendar" onmouseover="changebutton(3,5)" onmouseout="changebutton(3,4)"><img src="graphics/calendar1.gif" width="86" height="41"></a>
a href="howitworks.html" title="How It Works" onmouseover="changebutton(4,7)" onmouseout="changebutton(4,6)"><img src="graphics/howwework1.gif" width="86" height="41"></a>


A quick explanation of the code:
In the Java code, the first for loop "for(j = 0; j < 14; j++)" is used to create the array in the memory where the images will be stored. It is standard code as I understand it for the number of images you will be working with.
In the following section, you will see I have loaded two pictures for each button into the array (imagearray), ex. home1 and home2 etc...

The function "function changebutton (buttonnum, imgnum) " is used to change the picture of a button, based on it position and the image number I want to change it to. (The position of the button is how I keep track of which button I am working with)

Language: Javascript
function changebutton (buttonnum, imgnum) { document.images[buttonnum].src = imagearray[imgnum].src }

I send two values to the function, the first indicates what button I will be working with (these are arbitrary numbers to help me keep track of which button it is) and the second is the image I will be changing to.
so with the first line of code, a href="home.html" title="Home" onmouseover="changebutton(1,1)" onmouseout="changebutton(1,0)"><img src="graphics/home1.gif" width="86" height="41"></a
img src="graphics/mailinglist1.gif" width="86" height="41"

I tell the browser that i want to change button nr 1 to the picture in the array at position '1' which will be home2.gif and I do exactly the same on the mouseout event by changing button 1 to the picture at position 0, home1.gif.


I hope this helps, not sure if I am conveying the idea correctly.


If you need more explanation just ask and I will try and exolain what I did from a different angle.
Re: Javascript
May 06, 2011 12:08PM
Thanx

I am experiencing the same problems with the wrong images being substituted. I will definitely try your suggestion Phoenix. This Javascript is really getting to me.
Re: Javascript
May 06, 2011 03:00PM
Phoenix , you BEAUTY , Thanx a mill for this info. I have just used your method and it works. thumbs up smiley I couldn`t get it to work or rather did not understand the book so found this on the net and it also worked but obviously we maybe need to have javascript tags. I hope the forum doesn`t remove my tags.

Language: Javascript
<td><a href = "thingsToDo.html" onmouseover="document.whale.src=';images/whale.jpeg';" onmouseout="document.whale.src=';images/buttonWhale2.png';"> <img src="images/buttonWhale2.png" width="100" height="100" alt="Watch Me!" name="whale" border="0"></a></td>
Re: Javascript
May 06, 2011 03:03PM
thought so ,

a href = "thingsToDo.html" onmouseover="document.whale.src='images/whale.jpeg'" onmouseout="document.whale.src='images/buttonWhale2.png'"
img src="images/buttonWhale2.png" width="100" height="100" alt="Watch Me!" name="whale" border="0"</a

I didn`t have any java tags in the head section , just the above code and it also worked. I have changed now to your code , I can`t say if it makes a difference or not.
Re: Javascript
May 06, 2011 10:35PM
Lindy, The only difference between doing it in the body section as per your code or doing it in the head section is; if you have a slow internet connection, you will notice the difference. Your code has to load the images every time you move the mouse over a button, so there is a delayed response, while if you put the code in the head section it loads all the images immediately, speeding up your site when you use it.
Re: Javascript
May 08, 2011 11:07AM
OK , see that , thanks for all the advice , you`re a star.
Re: Javascript
May 08, 2011 02:04PM
Re: Javascript
May 10, 2011 11:17PM
Lindy i feel you... Java is something else. and Rowena thanks for all the help and the rest of you guys.
Re: Javascript
May 12, 2011 03:40PM
rollover images are really giving me a hard time, i spend the whole week trying to get it right, but all my trys have failed, however i haven't given up even though i have ran out of timeconfused smiley ...
Sorry, only registered users may post in this forum.

Click here to login