Online since 2002. Over 3300 puzzles, 2600 worldwide members, and 270,000 messages.

TwistyPuzzles.com Forum

It is currently Fri Apr 18, 2014 4:53 am

All times are UTC - 5 hours



Post new topic Reply to topic  [ 4 posts ] 
Author Message
 Post subject: Anyone know Javascript?
PostPosted: Sun Sep 26, 2004 6:12 pm 
Offline
User avatar

Joined: Tue Aug 26, 2003 12:38 am
Location: Lafayette, IN.
I've run into a problem with one of the easier javascripts (I'm still learning) and I figured surely there would be a few people here who are fluent enough to help me with it. I'm using a rollover script where an image changes to another when the mouse passes over it. Here is the script:

COPIED INTO HEADS




COPIED INTO BODY

[url=http://java-scripts.net" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src] img src="img1.gif" border=0 name="rollover" /a

*note: I did not include the "<" and ]" around the "img src="img1.gif" border=0 name="rollover" /a at the end so that it would show in this post instead of the code trying to post a picture in this message.
I got the script from this link:

http://www.java-scripts.net/javascripts ... ript.phtml

Everything works great when I replace "img1.gif" and "img2.gif" with my images and indicate those pics in the "button1.src =" and "button2.src =" section. My problem is, I have more than one picture (used as links) that I would like to change when the mouse rolls over it. However, with everything I've tried I can't get it to work for more than one image. I know there must be something I'm missing or doing wrong. Can someone help instruct me as to how to get more than just one image to work?


Top
 Profile  
 
 Post subject:
PostPosted: Sun Sep 26, 2004 6:42 pm 
Offline
User avatar

Joined: Wed Nov 24, 1999 12:18 pm
Location: Palerang Shire, NSW, Australia
Hi Sean, copied from my site (waynejohnson.net), I have four images doing exactly what you are trying to do. I've paasted the code below for you to use:


(this code is from the head)
-----------------------------------

Code:
<script language="javascript]
<!--
var itskills = new Image;
var examples = new Image;
var workhistory = new Image;
var contact = new Image;
itskills.src = "images/itskills-on.gif";
examples.src = "images/examples-on.gif";
workhistory.src = "images/workhistory-on.gif";
contact.src = "images/contact-on.gif";
//-->
</script>




(from the html body)
-----------------------------

Code:
[url=http://waynejohnson.net/skills.asp" onmouseover="xitskills.src = itskills.src"  onmouseout="xitskills.src = 'images/itskills.gif'][img]"images/itskills.gif" border="0" name="xitskills" width="92" height="34][/url]

[url=http://waynejohnson.net/examples.asp" onmouseover="xexamples.src = examples.src"  onmouseout="xexamples.src = 'images/examples.gif'][img]"images/examples.gif" border="0" name="xexamples" width="134" height="34][/url]

[url=http://waynejohnson.net/history.asp" onmouseover="xworkhistory.src = workhistory.src"  onmouseout="xworkhistory.src = 'images/workhistory.gif'][img]"images/workhistory.gif" border="0" name="xworkhistory" width="142" height="34][/url]

[url=http://waynejohnson.net/contact.asp" onmouseover="xcontact.src = contact.src"  onmouseout="xcontact.src = 'images/contact.gif'][img]"images/contact.gif" border="0" name="xcontact" width="129" height="34][/url]


-------------------

Explaination: I set up four invisible image holders in the head and preload them with my "button on" images. Then in the html, the inital images loaded onto the page are obviously "image off" versions. It is important that the images on the page are named.

Then with a simple onmouseover, you load the src of a hidden image into the source of your named image on the page. With the onmouseout, I just load the image src from the images folder because these have already been cached into memory the first time and so are fast anyway. Hope this helps.[/code]

_________________
Wayne Johnson (Developer)
http://waynejohnson.net


Top
 Profile  
 
 Post subject: Re: Anyone know Javascript?
PostPosted: Mon Sep 27, 2004 1:39 am 
Offline
User avatar

Joined: Wed Mar 15, 2000 9:11 pm
Location: Delft, the Netherlands
Sean wrote:
Everything works great when I replace "img1.gif" and "img2.gif" with my images and indicate those pics in the "button1.src =" and "button2.src =" section. My problem is, I have more than one picture (used as links) that I would like to change when the mouse rolls over it. However, with everything I've tried I can't get it to work for more than one image. I know there must be something I'm missing or doing wrong. Can someone help instruct me as to how to get more than just one image to work?


I suspect that it has to do with the 'name' attribute of each img tag. In your case it is named 'rollover'. If you place the second part in the body of the page several times, you must change 'rollover' in each copy to a different name (say, 'rollover2', 'rollover3', etc). Note that this name occurs three times.

Also add the new images to the list in the header, giving them new names (button3, button4, etc), and change the appropriate references to these in the body. If you compare this to Waynes script, his simply quotes the image url directly. That is fine too, though it often leads to the mistake of forgetting to preload one or more of the images in the header.

If you have a lot of images, there are slightly better scripts for preloading all the images in an array instead.

_________________
Jaap

Jaap's Puzzle Page:
http://www.jaapsch.net/puzzles/


Top
 Profile  
 
 Post subject:
PostPosted: Mon Sep 27, 2004 4:35 pm 
Offline
User avatar

Joined: Tue Aug 26, 2003 12:38 am
Location: Lafayette, IN.
Thanks Wayne! Your script makes things a lot easier to grasp. I plugged it in and everything works perfectly.
Jaap, I haven't messed with the other script since I got it to work with Wayne's, but I might give it a try with your advice just for the sake of understanding how it works. Since I have only 3 changing images on each page, I shouldn't run into the problem you mentioned. I do apprechiate all of your help guys!


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  

Forum powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group