Preserved Topic: Javascript Rollovers

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).]

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~

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 ]:.

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

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

quote:

---

I want to actually LEARN how to do this, so I probably won't use the pre-made script

---

YAY

I second that emotion





.:[ Never resist a perfect moment ]:.

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

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

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

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

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).]

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).]

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:

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~

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).]

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

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

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

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

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)

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

OK, now I understand what you are doing

I think that your problem is here:

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:

<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).]

Just noticed something else.

<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).]

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>

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

Glad you got it working.

Take a look at your code now:

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

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

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/

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).]