Javascript

Announcements	Last Post
	SoC Curricula	09/30/2017 01:08PM
	Demarcation or scoping of examinations and assessment	02/13/2017 07:59AM
	School of Computing Short Learning Programmes	11/24/2014 08:37AM
	Unisa contact information	07/28/2011 01:28PM

Eva-72940263

Re: Javascript
May 01, 2011 07:22PM

Registered: 8 years ago
Posts: 106
Rating: 0

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.

Reply Quote

lindy-72961430

Re: Javascript
May 02, 2011 01:03PM

Registered: 8 years ago
Posts: 121
Rating: 0

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.

Reply Quote

Phoenix

Re: Javascript
May 02, 2011 02:43PM

Registered: 8 years ago
Posts: 113
Rating: 0

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
  </head>
 
    <body>
        <!--      HEADER      -->
        <div id="top">
            <!--- logo -->
            <a href="home.html"><img src="graphics/innercircle.jpg" width="440" height="160" alt="Inner Circle Social Club"/></a>
 
            <!--  links to other pages -->
            <span id="links">
                <table border="0">
                    <tr>
                        <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>
                    </tr>
                    <tr>
                        <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>
                    </tr>
                </table>
            </span>
        </div>

[/code]

Reply Quote

73038881

Re: Javascript
May 02, 2011 03:15PM

Registered: 8 years ago
Posts: 22
Rating: 0

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

Reply Quote

Eva-72940263

Re: Javascript
May 02, 2011 03:40PM

Registered: 8 years ago
Posts: 106
Rating: 0

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.

Reply Quote

Phoenix

Re: Javascript
May 02, 2011 05:52PM

Registered: 8 years ago
Posts: 113
Rating: 0

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

Reply Quote

Eva-72940263

Re: Javascript
May 02, 2011 07:29PM

Registered: 8 years ago
Posts: 106
Rating: 0

@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: HTMLvar 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
}

Reply Quote

Mac

Re: Javascript
May 03, 2011 07:20AM

Admin
Registered: 14 years ago
Posts: 9,922
Rating: 348

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.

Reply Quote

Mac

Re: Javascript
May 03, 2011 07:39AM

Admin
Registered: 14 years ago
Posts: 9,922
Rating: 348

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.

Reply Quote

lindy-72961430

Re: Javascript
May 04, 2011 03:13PM

Registered: 8 years ago
Posts: 121
Rating: 0

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

Reply Quote

lindy-72961430

Re: Javascript
May 04, 2011 03:15PM

Registered: 8 years ago
Posts: 121
Rating: 0

non

Reply Quote

Mac

Re: Javascript
May 04, 2011 03:24PM

Admin
Registered: 14 years ago
Posts: 9,922
Rating: 348

USe the formatted code button to post code PLEASE! Paths require a forward slash images/button.gif

Reply Quote

lindy-72961430

Re: Javascript
May 04, 2011 03:28PM

Registered: 8 years ago
Posts: 121
Rating: 0

Where do I find the formatted code button? And sorry , I have no idea what paths you mean.

Reply Quote

lindy-72961430

Re: Javascript
May 04, 2011 03:53PM

Registered: 8 years ago
Posts: 121
Rating: 0

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.

Reply Quote

Phoenix

Re: Javascript
May 04, 2011 05:34PM

Registered: 8 years ago
Posts: 113
Rating: 0

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.

Reply Quote

Phoenix

Re: Javascript
May 05, 2011 09:35PM

Registered: 8 years ago
Posts: 113
Rating: 0

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.

Reply Quote

Anneke-72964960

Re: Javascript
May 06, 2011 12:08PM

Registered: 8 years ago
Posts: 72
Rating: 0

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.

Reply Quote

lindy-72961430

Re: Javascript
May 06, 2011 03:00PM

Registered: 8 years ago
Posts: 121
Rating: 0

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>

Reply Quote

lindy-72961430

Re: Javascript
May 06, 2011 03:03PM

Registered: 8 years ago
Posts: 121
Rating: 0

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.

Reply Quote

Phoenix

Re: Javascript
May 06, 2011 10:35PM

Registered: 8 years ago
Posts: 113
Rating: 0

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.

Reply Quote

lindy-72961430

Re: Javascript
May 08, 2011 11:07AM

Registered: 8 years ago
Posts: 121
Rating: 0

OK , see that , thanks for all the advice , you`re a star.

Reply Quote

NeilC - 72969415

Re: Javascript
May 08, 2011 02:04PM

Registered: 8 years ago
Posts: 91
Rating: 0

.

Reply Quote

yvonneS-72981393

Re: Javascript
May 10, 2011 11:17PM

Registered: 8 years ago
Posts: 86
Rating: 0

Lindy i feel you... Java is something else. and Rowena thanks for all the help and the rest of you guys.

Reply Quote

lesego-72947047

Re: Javascript
May 12, 2011 03:40PM

Registered: 8 years ago
Posts: 35
Rating: 0

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 time confused smiley

...

Reply Quote