School Map:  Home / Enroll $ Student Records; Class  
$ News @ LIVE Tech Radio * Support/FAQ | Store | FORUMS

Class / Forums / javascript101 Refresh the current page Post your Week #1 ADVANCED To-Do Assignment Here
 

 (#22 2002-12-16 05:35:42) Post Reply

TDavid
php mySQL Perl C/C++
Principal


Enrolled: Mar 2000
Posts: 193
AP: 1

 Your Week #1 ADVANCED TO-DO assignment should be posted here in this thread only. If you have specific questions about the week 1 course text then please also post them in this thread so that other students can learn from the information.

You can earn *up to 25* Script School activity points for turning in your ADVANCED to-do assignment. It will be graded on such things as completeness, attention to detail, creativity, ingenuity and effort.

Here is the details on what you need to do for this assignment:

The advanced to-do assignment is to create an image rollover link with a customized status bar message on mouse over. Hint: see Event Handler syntax for HTML tags. The link is in the week 1 course text
 

 (#30 2003-01-03 16:45:07) Post Reply

twiceshy
Need To Set


Enrolled: Nov 2002
Posts: 3
AP: 1

 http://www.thekinkdirectory.com/scriptwk1.htm

thats both wk 1's assignments sorry i been crazy here so i am way behind hopeing to catch up after Vegas
 

 (#34 2003-01-06 23:20:02) Post Reply

logspirit
Need To Set


Enrolled: Oct 2001
Posts: 63
AP: 1

 twiceshy --
I took a look at Your Week #1 url submission.
I see that You have a working 'write-to-status-bar' link. very good.

I also noticed that You attempted to run a script that would scroll messages in the status bar. If the scrolling script had worked, it would have conflicted with your link status bar message, and would have thrown an error if someone moused over the link. At any rate, the reason that the scrolling script did not work is that it would have to be placed between the <head> tags... not within the <body> tags... for it to be called from an onLoad Event Handler...

Very Good Effort!!! Keep up the good work!!!

I propose that You get 15 activity points, TD has to approve them...

logspirit
 

 (#35 2003-01-09 07:50:39) Post Reply

wal
Need To Set


Enrolled: Jan 2003
Posts: 10
AP: 1

 Here is my submision for assignment 1. Sorry it's late.

I've looked at the results in Opera 6, Netscape 4.76, and IE 5.5.
I found out they all treat window.status differently.
Opera doesn't display status on mouseover but will on mousedown and only once on mouseup.
IE will show status on mouseover and mouseup but not mousedown.
NN will show status on mouseover and mousedown but then gets stuck (hourglass).
I used an animation for the mouseover image and found that on mouseup, only Opera resumes the animation.

http://www.wal1.com/jschool/rollover.htm
 

 (#36 2003-01-09 17:15:58) Post Reply

logspirit
Need To Set


Enrolled: Oct 2001
Posts: 63
AP: 1

 Wal,

There are problems using onMouseDown and onMouseUp - they are NOT necessarily supported in all browsers! They were introduced in a proprietary way by Microsoft and are not part of the universal standard. This is why they were not mentioned in this course. To write universal code, use onClick or write code for each browser and use the 'navigator' object - to be discussed in week #5 - to 'sniff out' the browser and then redirect the user automatically to the appropriate script.

Also...
Some browsers are case sensitive as far as the Event Handlers are concerned... The safe bet is to use 'camel back' casing - onClick onMouseOver etc... [js]<script language="JavaScript" type="text/JavaScript"></script>[/js]

When You - [js]this.blur()[/js] - the focus, You are removing the focus from the link, this can interfere with the actions in some browsers.

Although it won't matter in most situations, replacing a .jpeg with a .gif and vice versa, can put a strain on the mime interpreter, and freeze or slow down Your scripts on some machines.

Hope that helps... I will ask TD to review this, add any comments he may have, and assign You Your Activity Points...

Good Work! Glad to see You participating!!!

logspirit
 

 (#37 2003-01-09 17:47:22) Post Reply

logspirit
Need To Set


Enrolled: Oct 2001
Posts: 63
AP: 1

 Please allow me to correct myself - slightly, OnMouseDown and onMouseUp WERE included in the table on Event Handlers in Week #1, but not used in any examples... As I said in the post above they were introduced by Microsoft and are not supported in all versions of all browsers... use onClick or write scripts for each browser and version.

Another possibility if You really need this type of action for all Your users is to use Flash by Macromedia... It has supported onMouseDown and onMouseUp since the beginning.

logspirit
 

 (#56 2003-05-11 06:56:01) Post Reply

xjlittle
Need To Set


Enrolled: Jan 2003
Posts: 3
AP: 1

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Lesson 1 javascript 101 scriptschool.com</title>
<script language="javascript" type="text/javascript"><!--

var over_button=new Image; //new mouse over image
over_button.src="mqmapgend.gif"; //mouse over source

var up_button=new Image; //new mouse up button image
up_button.src="phplogo.gif"; //mouse up button image

var down_button=new Image; //new mouse down button
down_button.src="FingerDown.png"; //mouse down button image

//--></script>

</head>
<body>

<a href="#"
onMouseOver="document.active_button.src=over_button.src;
window.status='Click now to find your way to the picnic!!'; return true;"
onMouseOut="document.active_button.src=up_button.src;
window.status=' '; return true;"
onMouseDown="document.active_button.src=down_button.src;"
onMouseUp="document.active_button.src=up_button.src;
window.location='http://pack106.hopto.org/picnic';
window.status=''; return true;"
onFocus="this.blur();">
<img src="phplogo.gif" name="active_button" /></a>
<br />
<br />

</body>
</html>
 

 (#57 2003-05-11 07:23:17) Post Reply

xjlittle
Need To Set


Enrolled: Jan 2003
Posts: 3
AP: 1

 oops--was I not supposed to post the advanced code
here? Please forgive my lack of etiquette.


Here is the url where you can see it.
 

 (#62 2003-08-22 19:26:24) Post Reply

RJ
Need To Set


Enrolled: Aug 2003
Posts: 4
AP: 1

 Hi TD

Sorry for the slight delay. I thought of posting a link instead of throwing too much text in the thread. I combined the image rollovers for the three icons; red when mouse is not on icon and green with mouse over the icon along with the custom status message, and I have the mousedown event to change the icon to blue when clicked. The window.status parts looked like this

[b]
onMouseOver="document.image.src = on.src;" window.status='Ytunnel site'; return true;"[/b]
This second quote after on.src; ended the line I think? so instead I changed it to this:

[b]
onMouseOver="document.image.src = on.src; window.status='Ytunnel site'; return true";[/b]
Now all the code bits work together.

Here is the link: http://www.mysite.verizon.net/vze3spp2/js1/
I wasn't sure about posting the code in here since it would take up more space and plus with the images; the page would have to be served somewhere.

This is exciting stuff.

 

 (#64 2003-08-25 02:04:53) Post Reply

RJ
Need To Set


Enrolled: Aug 2003
Posts: 4
AP: 1

 I made a mistake, the link to week's #1 assignment is: http://mysite.verizon.net/vze3spp2/js1/

the www messed it up. I'm sorry about posting again. The format is a little confusing to me still and will take some time to get use to. I notice when I post to the right section I get a message to repost somewhere else and when I return, the place where the post is doesn't seem right.

 

 (#65 2003-08-25 23:39:51) Post Reply

logspirit
Need To Set


Enrolled: Oct 2001
Posts: 63
AP: 1

 RJ, Please see my post above about the use of onmousedown It is NOT standard universal code. it is proprietary by microsoft.
You should be using onclick unless you do a browser check first.

Keep Up the Good Work
logspirit
 

 (#73 2003-11-12 21:26:28) Post Reply

dawnnivas
Need To Set


Enrolled: Nov 2003
Posts: 6
AP: 1

 hello there,

the link is http://www.geocities.com/zephy...sub/assign2.htm

now for questions.will i be able to setup a status bar message when i use a mouseDOwn..thnx log spirit.have a good day
 

 (#74 2003-11-12 23:36:59) Post Reply

logspirit
Need To Set


Enrolled: Oct 2001
Posts: 63
AP: 1

 dawnnivas, Yes You can...(control the status bar on a onmousedown) BUT it would not be completely cross browser compatible, as I previously stated! (onmousedown was originally proprietary to Microsoft although some newer versions of other browsers are starting to support it - but their user population is very small) Believe it or not, there are still folks out there using Netscape 4.7!!! If You don't care about them (some of them CAN'T upgrade due to old hardware, and an inability to afford new stuff!) or if You do a browser check and either branch Your code or redirect into a special basic 'default' site, then go ahead... It's done the same way as using any other method within the 'a href' tag. It may also be notable that the default settings in the newer versions of Microsoft's Internet Explorer HIDE the status bar... and unless the user goes through the steps necessary for it to show, all Your extra work won't even be seen! I guess, as the webmaster, it's up to You to decide where to spend Your coding time.
~logspirit ;)
 

 (#78 2004-06-29 12:43:45) Post Reply

SnakeEater
Need To Set


Enrolled: Jun 2004
Posts: 4
AP: 1

 <html>
<body>
<script type="text/javascript">
<!--
var out_image = new Image()
out_image.src = "http://atlas.walagata.com/w/snakeeater/Platinum_Akira.gif"
var over_image = new image()
over_image.src = "http://atlas.walagata.com/w/snakeeater/Platinum_Akira.gif"
-->
</script>
<p><a href="http://www.trickstutorials.com"
onMouseOver="window.status='Click here to learn how to backflip!'; "document.img_change.src=over_image.src"; return true;"
onMouseOut="window.status=' '; document.img_change.src=out_image.src; return true;">
<img src="http://atlas.walagata.com/w/snakeeater/Platinum_Akira.gif" name="img_change" />
</a></p>
</body>
</html>
Here's mine!






 

 

View Previous Thread
Print this page Print This Page

View Next Thread

School Map:  Home / Enroll $ Student Records; Class  
$ News @ LIVE Tech Radio * Support/FAQ | Store

Advertising | Link To Us | Privacy 
Copyright 2000-2002 Script School Productions / KMR Enterprises 
No part of this website may be reproduced, copied and/or distributed in any medium 
without express written permission