Closed Thread Icon

Preserved Topic: Javascript Rollovers Pages that link to <a href="https://ozoneasylum.com/backlink?for=18446" title="Pages that link to Preserved Topic: Javascript Rollovers" rel="nofollow" >Preserved Topic: Javascript Rollovers\

 
Author Thread
Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 07-26-2002 21:15

Hey everyone! I'm a student intern at Gravity Probe B and we're trying to re-vamp our webbie and I thought rollover/rollout menu's would be a great idea. Only I'm having a hard time with just viewing the source codes for people who have them (example: http://soe.stanford.edu) and I was wondering if anyone is any good at this and wouldn't mind giving me a basic tutorial sorta thing on this subject... or if you know of a good already existing one, that would be awesome too. Hope someone can help!

Thanks so much!

Genevieve Hokanson
Student Intern, GPB http://einstein.stanford.edu

[This message has been edited by Genevieve (edited 08-08-2002).]

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 07-27-2002 05:10

Doc's Script

If you do decide to check this, this is the best bet for something like the example. All it is doing is pretty much just a rollover. There are other ways of doing this using a hidden layer and stuff, but the example given is just using images.

I don't feel like emailing you but I will post here

Later,
C:\


~Binary is best~

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 07-29-2002 00:43

Actually I looked at your sample and he's got one of the orginal crossplatform rollout menu scripts, mainly using a hidden div that appears with the rollover and has additional links availible. It's not that hard where are you at with this?



.:[ Never resist a perfect moment ]:.

Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

posted posted 07-29-2002 14:30

// Rollover script by Voodoo 'Doll' Petskull
// Copyright 2002
// You may use it, but remember to leave this credit in the soure code.
// http://www.twistedport.com

pics = new Array(8);
for(x=0; x<=9; x++){
pics[x] = new Image();
}

pics[0].src = "images/boo.gif";
pics[1].src = "images/boo.gif";
pics[2].src = "images/boo.gif";
pics[3].src = "images/boo.gif";
pics[4].src = "images/boo.gif";
pics[5].src = "images/boo.gif";
pics[6].src = "images/boo.gif";
pics[7].src = "images/boo.gif";
pics[8].src = "images/boo.gif";
pics[9].src = "images/boo.gif";


function trade(name,img){
document.images[name].src = pics[img].src;
}

// remember-- onmouseover="trade('nameOfPic',numberofpicInArray);"
// onmouseover="trade('home',1);"
// the name is defined as-- ID="home"



Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-05-2002 16:55

THANKS everyone :-D (well, all three of you hehe). I want to actually LEARN how to do this, so I probably won't use the pre-made script, though I definately appreciate it. :-) I'll look into that tutorial asap.

Thanks again! I'll let you know when i get it down.

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 08-05-2002 17:59
quote:
I want to actually LEARN how to do this, so I probably won't use the pre-made script



YAY

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 08-06-2002 03:22

I second that emotion





.:[ Never resist a perfect moment ]:.

Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

posted posted 08-06-2002 12:33

that's why I posted the code.... if you have any problems, come back and we'll try and help some more..


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-08-2002 20:28

Thanks. I appreciate it. My boss has me busy on some other projects right now (of course, she keeps asking me how this one is going while expecting me to finish about 5 billion others all at the same time hehehe ) so I'll get to it asap. And I definately will let you know how it goes.

Thanks again! I really appreciate all the helpfulness!

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 08-08-2002 20:34

Genevieve: I am preparing a utility for generating the Doc's rollover script (which is pretty similar to the one Petskull has posted) which might help reduce the development time. Its functional but needs a few stylingtweaks before I'd be ready to go live. If it could help drop me a line and I'll point you to it (with the usual caveats for a script that hasn't been fully approved).

___________________
Emps

FAQs: Emperor

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 08-10-2002 18:22

OK the utility that generates the Doc's rollover script is now up for approval so people can access it via here:
www.gurusnetwork.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topic;f=12;t=000072

drop any comments, bugs, thoughts for extensions, etc. into that thread and I'll see what I can do

___________________
Emps

FAQs: Emperor

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-16-2002 19:33

Hey all! I've been going through Thau's JavaScript Tutorial: http://hotwired.lycos.com/webmonkey/programming/javascript/tutorials/tutorial1.html and I've finally gotten to "swap"ing images. Only...his two example links aren't working and I can't seem to get my "assignment" to work. I'm going to post it below...can you look at it and tell my why you think it might not be working right?

Thanks!

<HTML>
<HEAD>
<TITLE>Swap_2</TITLE>

<SCRIPT LANGUAGE = "JavaScript">
<!--Begin Hide!

//declare var:

var Name = prompt("What is your name?", " ");
var image1 = 'monkey.gif';
var image2 = 'thau.gif';
var image3 = 'sky.gif;
var temp = " ";

//End Hide!-->
</SCRIPT>

</HEAD>
<BODY>


<center>

<!--Set up images-->

<img src="back.gif" name="back" align=left>
<img src="forth.gif" name="forth" align=left>
<img src="home.gif" name="home" align=left>
<img src="monkey.gif" name="monkey" align=right><p><p>
<img src="location.gif" name="location" align=left>

</center>

<p><p><p><H1>Browser Configuration</H1>
<b>Welcome
<SCRIPT LANGUAGE = "JavaScript">
<!--Begin Hide!

document.writeln(Name);

//End Hide!-->
</SCRIPT>
</b>

<p>Brand your browser by moving your mouse over the image below until you find one you like. Then click on the image.<p>

<!--Now for the swap images-->

<a href="#"
onMouseOver="temp=image1; image1=image2; image2=image3; image3=temp; document.monkey.gif.src=image1;"
onClick="document.brand_image.src=image1;">
<img src="monkey.gif" name="monkey" align=left border=0></a>

</BODY>
</HTML>

Granted, I am not sure I understand completely this whole thing since I couldn't look at the two examples he had...but I don't understand why this won't work. ANY help would be VERY much appreciated.

Thanks all!

Genevieve Hokanson
Student Intern, GPB http://einstein.stanford.edu

woops! PS! If you want to know what it SHOULD look like, check out the 2nd lesson, page 10. Thanks again!

[This message has been edited by Genevieve (edited 08-16-2002).]

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-16-2002 20:54

Ha! My second try...using different images and more of my own version of the code:

<HTML>
<HEAD>
<TITLE>Lesson 2: Swap Exercise</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--Begin Hide!

//declare var:

var Name = prompt("What is your name?", " ");

if (Name == " ")
{
var Name = "Stranger";
}

var image1 = 'JavaScript/rolleyes.gif';
var image2 = 'JavaScript/tongue.gif';
var image3 = 'JavaScript/wink.gif';

//End Hide!-->
</SCRIPT>
</HEAD>
<BODY>

<img src="JavaScript/back.gif" name="back">
<img src="JavaScript/forth.gif" name="forth">
<img src="JavaScript/location.gif" name="location">
<img src="JavaScript/rolleyes.gif" name="rolleyes">

<p><H3>Browser Configuration</H3><p>
<b>Welcome

<SCRIPT LANGUAGE = "JavaScript">
<!--Begin Hide!

document.writeln(Name + "!");

//End Hide!-->
</SCRIPT>
</b>

<!--Image Swap here-->

<a href="#"
onMouseOver="'image1=image2'; 'image2=image3'; 'image3=image1'; document.rolleyes.src= 'Javascript/rolleyes.gif'"><img src="JavaScript/rolleyes.gif" name="rolleyes"
onClick="document.rolleyes.src=image1;"></a>


</BODY>
</HTML>


Alrighty, I figured out that the brand_image should actually be my image1 or "rolleyes" as I named it. Yet still, the thing doesn't want to change when I roll my mouse over it. Nor when I click....I'm not sure why.

Thanks all for any help!!

Thanks!

Genevieve Hokanson
Student Intern, GPB http://einstein.stanford.edu

[This message has been edited by Genevieve (edited 08-16-2002).]

[This message has been edited by Genevieve (edited 08-16-2002).]

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 08-16-2002 21:38

I think that you problem is that you are not telling your JavaScript "what" to grab and change. Notice the code that Petskull provided has this line:

code:
document.images[name].src = pics[img].src;



Using the document.images[name].src will allow your Javascript to look for the name of the image and then change it to what you want.

Again, this is just a guess. And I can't find the page you were talking about

Later,
C:\


~Binary is best~

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-16-2002 21:52

http://hotwired.lycos.com/webmonkey/98/03/index2a_page10.html

Here is the exact link to the page I'm trying to recreate. (or at least, somewhat)

As for what you just said: Isn't that an array? I didn't create an array (not sure exactly how they work in JavaScript, though I've used them in C before but it's been almost a year so I'd have to brush up). In terms of my code specifically, how would you use that(not the array, but grabbing the image)?

Thanks!

Genevieve Hokanson
Student Intern, GPB http://einstein.stanford.edu

[This message has been edited by Genevieve (edited 08-16-2002).]

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-16-2002 22:04

This might help. I just posted the html and pics to my geocities site. Here's a link:
http://www.geocities.com/genevievescu/Swap.html

That should show you what it looks like now and see how exactly it is working. (don't look at my homepage though lol, it really sucks!!!)

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-16-2002 22:07

Emperor: I can't seem to get your link to open up. :-\ I was gonna check it out just to see if it might be similar to mine and thus I could find out why mine doesn't work. Might wanna check that out.

BTW: I'm on a MAC OS 8.5, with Explorer 5.1 (I think it's 5.1) for MAC. That might help you--I know for my other job, kscu.org, for a while the site didn't work w/ my browser....

:/

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 08-16-2002 22:17

Genevieve: The GN has been down for a bit but is now up and running now if you want to check it out.

___________________
Emps

FAQs: Emperor

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-16-2002 22:27

Emperor: Attempting to load it failed.... but any ideas on my code? (hehehe...sorry. I'm just so anxious to figure this stuff out. I'm LOVING this stuff! Not as fun as C, but still )

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted posted 08-16-2002 23:25

Genevieve: I just checked that link, it should really be working now. Just keep trying

Or see if you can access the utility itself here:
http://development.gurusnetwork.com/utilities/image_swap/

kuckus (cell #282)

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-17-2002 00:22

Still failed...both links. Maybe it's me? Maybe it's my computer here at work? If I think about it, I'll try it on my PC at home.

Thanks for your help though....



Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 08-17-2002 03:53

OK, now I understand what you are doing

I think that your problem is here:

code:
var image1 = 'JavaScript/rolleyes.gif';
var image2 = 'JavaScript/tongue.gif';
var image3 = 'JavaScript/wink.gif';



You don't have a blank variable to set as your temporary holding place for what will become your "branded" image
So you need to have something like:

[code]
var temp = ""; /*this will be a holding place for the image when clicked*/
var image1 = 'JavaScript/rolleyes.gif';
var image2 = 'JavaScript/tongue.gif';
var image3 = 'JavaScript/wink.gif';
[code]


Now this line:

code:
<a href="#"onMouseOver="'image1=image2'; 'image2=image3'; 'image3=image1'; document.rolleyes.src= 'Javascript/rolleyes.gif'"><img src="JavaScript/rolleyes.gif" name="rolleyes"
onClick="document.rolleyes.src=image1;"></a>



would have to include the temporary image (which we don't know exactly what that is). That is why we first say that "temp=image1" now Temp is set to image1, and so forth.


Later,
C:\


~Binary is best~

[This message has been edited by CPrompt (edited 08-17-2002).]

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 08-17-2002 04:08

Just noticed something else.

code:
<a href="#" onMouseOver="'image1=image2'; 'image2=image3'; 'image3=image1'; 
document.rolleyes.src= 'Javascript/rolleyes.gif'"><img src="JavaScript/rolleyes.gif" name="rolleyes"
onClick="document.rolleyes.src=image1;"></a>



Look at what you have the source set to at the end of this line. "Javascript/rolleyes.gif" This means that no matter what the source to the mage that you set the name to "rolleyes" is always going to be "Javascript/rolleyes.gif"

OK, last thing. You have another problem in the onMouseOver bit. Don't put a double quote and then a single quote in that line. One or the other, I always prefer that double, but that's just me.


Later,
C:\


~Binary is best~



[This message has been edited by CPrompt (edited 08-17-2002).]

Ultrakapy
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2002

posted posted 08-17-2002 23:33

Also, you might want to give the two "rolleyes.gif" images different names. Try this:
<img src="back.gif" name="back">
<img src="forth.gif" name="forth">
<img src="home.gif" name="home">
<img src="location.gif" name="location">
<img src="rolleyes.gif" name="rolleyes_top">

AND:
<!--Image Swap here-->

<a href="#" onMouseOver="temp=image1; image1=image2; image2=image3; image3=temp; document.rolleyes_bottom.src=image1" onClick="document.rolleyes_top.src=image1;"><img src="rolleyes.gif" name="rolleyes_bottom" border="0"></a>


Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-19-2002 16:51

Thank you so much CPrompt and Ultrakapy for that final solution. I just tried it and it works! YAY!! Thanks to everyone who helped me out on this. While I still don't exactly know how to do the rollovers I originally asked about, I'm well on my way. Only one question:

CPrompt, look at my code now and tell me please what you meant by it always being set to "rolleyes.gif"....I'm not exactly sure what you mean, if that's a problem, and if it is how to solve it.

Please feel free to check out the completed code on my site! http://www.geocities.com/genevievescu/Swap.html

Thanks again!

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 08-19-2002 17:55

Glad you got it working.

Take a look at your code now:

code:
<a href="#" onMouseOver="temp=image1; image1=image2; image2=image3; image3=temp; document.rolleyes_bottom.src=image1" onClick="document.rolleyes_top.src=image1;"><img src="rolleyes.gif" name="rolleyes_bottom" border="0"></a>



And what it was:

code:
<a href="#"
onMouseOver="'image1=image2'; 'image2=image3'; 'image3=image1'; document.rolleyes.src= 'Javascript/rolleyes.gif'"><img src="JavaScript/rolleyes.gif" name="rolleyes"
onClick="document.rolleyes.src=image1;"></a>



At the end of the mouseover event you first have :

document.rolleyes.src="Javascript/rolleyes.gif" in the new version you have document.rolleyes_bottom.src=image1

The first one doesn't work because you have the source to this changing image set to the path of "Javascript/rolleyes.gif" which is where you have your image stored. In the second version you changed it to "image1"

In your code you have this "image1" being able to change to the different images in the line: "temp=image1; image1=image2; image2=image3; image3=temp;" See how it is continually switching? You have the temp variable changing to "image1", image1 changing to image2, image2 changing to image3 and image3 ultimatley changing to the temp variable. In your first try you continually say that the image is to be "Javascript/rolleyes.gif"

Does that make sense? I am starting to kind of confuse myself.

With the first you were ultimatley "explicitly" telling Javascript to look for the image javascript/rolleyes.gif and not the variable that is changing. It was never changing.

wooo!

Later,
C:\


~Binary is best~

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-19-2002 18:25

CPrompt: Ah! I see what you mean now! Thanks so much for your help! This is so much fun!!!!

BTW: I haven't yet, but it's okay to add links to this forum to my private webbie right?

Hope so! I'll grab one of the boxes soon.

Thanks again everyone!

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu
http://www.geocities.com/genevievescu/

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted posted 08-19-2002 20:41

Certainly that's OK - there is even an Asylum Web Ring you can join.

kuckus (cell #282)

[edit: wrong link]

[This message has been edited by kuckus (edited 08-19-2002).]

« BackwardsOnwards »

Show Forum Drop Down Menu