Javascript for Final Project

thewebkid · November 22nd, 2007, 01:27 PM

Two of my final project requirements are:

1-Incorporate the use of a rollover image using javascript or flash
2-Incorporate javascript other than a page counter

I am building a youth website for this final project and wondered what could use some javascript?

Does anyone know where I can find tutorials on creating a rollover image with javascript?

alexgeek · November 22nd, 2007, 01:35 PM

Image swapper.
How about some snazzy AJAX or can you not use PHP?

thewebkid · November 22nd, 2007, 01:38 PM

I am sure we can, but I don't know any php. What is AJAX?

alexgeek · November 22nd, 2007, 01:43 PM

It's for interaction between the server and user without reloading the page basically.
I wrote a resource thread, maybe you can find something you like there. It also has some links to AJAX tutorials.
http://www.webforumz.com/javascript-...-resources.htm

Stuart · November 22nd, 2007, 03:35 PM

Try using something from mootools. They've got some pretty amazing stuff that will definitely make your site interactive...

alexgeek · November 22nd, 2007, 03:39 PM

Or do you have to make your own script?

Stuart · November 22nd, 2007, 03:44 PM

If you have to make your own, asking us to help you with it is cheating, in a way...

thewebkid · November 23rd, 2007, 12:40 AM

No we don't. We didn't learn Javascript, just a tiny tutorial that never covered what she's asking of us.

Stuart · November 23rd, 2007, 12:41 AM

In that case, try mootools. There are some pretty awesome things there...

thewebkid · November 23rd, 2007, 12:43 AM

Honestly I have no clue where to get started or what to do. I have visited the site, but I got lost and confused.

thewebkid · November 23rd, 2007, 12:49 AM

This is what my Prof. Wants:

1-Javascript--In this project, we will be adding some interactive elements to your web page. Specifically, you need to incorporate the use of JavaScript or Java Applets into this project. Don't worry. You don't need to know how to program in JavaScript or Java in order to use these in your pages. There are huge libraries of Java and JavaScript code that are available to web designers like yourself. All you have to do is insert the code into your pages and perhaps moidfy it slightly in order to meet your needs.

2-Rollover Images--In this project, we will be adding some rollover images. Specifically, you can use an image editor to create two versions of a button or a navigation bar: one representing the button "at rest" and another version of the button that will be displayed with the mouse is "rolled over" the image. You can do this with JavaScript or with Flash.

Stuart · November 23rd, 2007, 01:07 AM

1. Try the following library: Dynamic Drive
2. Javascript rollover image script

Have fun!

thewebkid · November 23rd, 2007, 05:26 AM

I couldn't get it to work, could anyone tell me what's wrong with this:

Code:

<script language="javascript" type="text/javascript">

normal_image = new Image();
normal_image.src = "Untitled-1.jpg";

mouseover_image = new Image();
mouseover_image.src = "Untitled-2.jpg";


<!-- repeat the 4 lines above for any subsequent images. -->

function swap(){
if (document.images){
for (var x=0;
x<swap.arguments.length;
x+=2) {
document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
}
}
}
</script>
<!-- END JAVASCRIPT -->

<a href="page.html" onMouseOver="swap('Untitled-1.jpg','Untitled-1.jpg')" 
onMouseOut="swap('Untitled-1.jpg','Untitled-2.jpg')">
<img name="Untitled-1" src="Untitled-1.jpg" border="0"></a>

I replaced the names just like they asked.

Stuart · November 23rd, 2007, 09:35 AM

OK. I see what the problem is. Try this for html but keep the javascript the same:

HTML Code:

<a href="page.html" onMouseOver="swap('graphic','mouseover_image')" onMouseOut="swap('graphic','normal_image')">
<img name="graphic" src="path/img.gif" border="0"></a>

The onmouseover and onmouseout values were switched. I named the img "graphic". You can change it, but only in those three places!

karinne · November 23rd, 2007, 09:38 AM

Moving to JS forum!

Stuart · November 23rd, 2007, 09:39 AM

OK, no problem! Seems more appropriate...

thewebkid · November 23rd, 2007, 02:49 PM

I have some questions,( I still can't seem to figure it out)

Does the image have to have a .gif extension?

What must I replace here: (does mouseover image mean the image when i hover?)

Code:

onMouseOver="swap('graphic','mouseover_image')

and here: (does normal image mean the original state?)

Code:

Code:

onMouseOut="swap('graphic','normal_image')

Stuart · November 23rd, 2007, 03:25 PM

Ok, let me explain. normal_image is the original state, and mouseover_image is the rollover state. onmouseover means 'when the mouse is over it' and onmouseout means 'when the mouse leaves it', 'it' being whatever the attributes are being applied to, in this case, an anchor. Now, for the code I posted, you don't have to change anything. The only thing you need to change is the path of the image in the javascript. The image does not need to be a GIF image, it can be JPG, PNG, anything you want.
Here is the entire code again. Copy and paste it into your html document, but don't change anything except the image path.

javascript:

Code:

<script language="javascript" type="text/javascript">

normal_image = new Image();
normal_image.src = "Untitled-1.jpg";

mouseover_image = new Image();
mouseover_image.src = "Untitled-2.jpg";


<!-- repeat the 4 lines above for any subsequent images. -->

function swap(){
if (document.images){
for (var x=0;
x<swap.arguments.length;
x+=2) {
document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
}
}
}
</script>

HTML: (don't forget to change the img src to the normal_image path!)

HTML Code:

<a href="page.html" onMouseOver="swap('graphic','mouseover_image')" onMouseOut="swap('graphic','normal_image')"><img name="graphic" src="path/img.gif" border="0"></a>

That should do it. If you have anymore questions, just ask.

thewebkid · November 23rd, 2007, 03:35 PM

Wow ok thanks a lot. It worked well. I guess I will just have to take more time to understand this.

Stuart · November 23rd, 2007, 03:37 PM

So it's working now, right? Do you have a javascript for the other part of the assignment, or are you still looking?