Multiple instances of rollovers?

J

James Gifford

I've successfully created rollover graphics (in PS/IR 7), but just
discovered that only single instances of each graphic will work. I want to
use multiple instances of a simple over/click rollover button on a page,
but adding the second instance causes the rollover effects to fail.

Do I have to create a separately-named element for each rollover instance,
or is there a JS trick to make multiple instances work?

I've Googled and searched the newsgroups without finding an answer,
probably because I'm not using the right search terms.

(FYI: My Javascript skill is near-zero: I cut and paste.)

Ad(thanks)vance.
 
C

Chet

| I've successfully created rollover graphics (in PS/IR 7), but
just
| discovered that only single instances of each graphic will
work. I want to
| use multiple instances of a simple over/click rollover button
on a page,
| but adding the second instance causes the rollover effects to
fail.
|
| Do I have to create a separately-named element for each
rollover instance,
| or is there a JS trick to make multiple instances work?
|
| I've Googled and searched the newsgroups without finding an
answer,
| probably because I'm not using the right search terms.
|
| (FYI: My Javascript skill is near-zero: I cut and paste.)
|
| Ad(thanks)vance.
|
| --
| | James Gifford * FIX SPAMTRAP TO REPLY |
| | So... your philosophy fits in a sig, does it? |
| | Heinlein stuff at: www.nitrosyncretic.com/rah |

give this script a try, for more images/rollovers, just
progressively add to the actual script:

<head>
<script LANGUAGE="JavaScript">
<!--
if (document.images) { //if image object is available
img1on = new Image(); // MouseOver Images
img1on.src = "images/free1a.gif";
img2on = new Image();
img2on.src = "images/free2a.gif";

img1off = new Image(); // MouseOut Images
img1off.src = "images/free1.gif";
img2off = new Image();
img2off.src = "images/free2.gif";
}

function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName +
"); }}

function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName +
c"); }}

//-->
</script>
</head>
<body>
<p><a HREF="freedeskthemes.htm" onMouseOver="imgOn('img1')"
onMouseOut="imgOff('img1')"><img NAME="img1" BORDER="0"
SRC="images/free1.gif" alt="Desktop Themes" WIDTH="106"
HEIGHT="36"></a></p>
<p><a HREF="freedeskthemes.htm" onMouseOver="imgOn('img2')"
onMouseOut="imgOff('img2')"><img NAME="img2" BORDER="0"
SRC="images/free2.gif" alt="Desktop Themes" WIDTH="106"
HEIGHT="36"></a></p>
</body>

I've used this one many times with the script in an external .js
file also.

hth
 
L

Leslie

I've successfully created rollover graphics (in PS/IR 7), but just
discovered that only single instances of each graphic will work. I want to
use multiple instances of a simple over/click rollover button on a page,
but adding the second instance causes the rollover effects to fail.
Click to expand...

You can use the same image as a rollover multiple times if you change
the "image#" for each use. The first image would be image1 throughout
the javascript code, the second image would be image2 throughout, etc.

HTH,

Leslie
"I refuse to have a battle of wits with an unarmed person."
 
J

James Gifford

Leslie said:
You can use the same image as a rollover multiple times if you change
the "image#" for each use. The first image would be image1 throughout
the javascript code, the second image would be image2 throughout, etc.
Click to expand...

I don't quite follow - as I said, JS is not a language I have much
familiarity with. (I'm working on it!)

Are you saying that I can duplicated the JS code for each instance of the
rollover, but have to have a separately-numbered set of images for each
instance? Or is there somewhere in the code that defines an image file on
disk as a differently-numbered loaded image?
 
L

Leslie

I don't quite follow - as I said, JS is not a language I have much
familiarity with. (I'm working on it!)

Are you saying that I can duplicated the JS code for each instance of the
rollover, but have to have a separately-numbered set of images for each
instance? Or is there somewhere in the code that defines an image file on
disk as a differently-numbered loaded image?
Click to expand...


Here's what I use (also copy & paste from a web source)

in HEAD of your page (with image_on.gif being your 'mouse on' image in
the rollover:

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

image1 = new Image();
image1.src = "image_on.gif";

// End -->
</script>


Place this code where you want your images (with : image_off.gif being
the image seen without the mouse being over it)

<a href="http://www.domain.com/"
onmouseover="image1.src='image_on.gif';"
onmouseout="image1.src='image_off.gif';">
<img name="image1" src="image_off.gif" border="0" align="left"
alt="silly little nav gizmo"></a>


For the second instance of the same rollover image use:

<a href="http://www.domain2.com/"
onmouseover="image2.src='image_on.gif';"
onmouseout="image2.src='image_off.gif';">
<img name="image2" src="image_off.gif" border="0" align="left"
alt="silly little nav gizmo"></a>

The only change you're making is the "image#.src" in each instance.
Just change the number for each use of the rollover, and of course,
change the target of the link.

Leslie
"I refuse to have a battle of wits with an unarmed person."
 
J

James Gifford

Leslie said:
The only change you're making is the "image#.src" in each instance.
Just change the number for each use of the rollover, and of course,
change the target of the link.
Click to expand...

Okay, I think I actually understand that. Now let's see if I can make it
work... :)
 
J

James Gifford

Leslie said:
Here's what I use (also copy & paste from a web source)
Click to expand...

Hmm. This differs from the code generated by ImageReady. If necessary, I
can chuck the IR code and rewrite it, but I'd be interested in a simple
mod to IR code to streamline the process. Here's the complete IR code:

=====

<HEAD>
<TITLE>sRAH go</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (sRAH go.psd) -->
<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src =
changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
sRAH_go_01_over = newImage("images/sRAH-go_01-over.gif");
sRAH_go_01_down = newImage("images/sRAH-go_01-down.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0
MARGINHEIGHT=0 ONLOAD="preloadImages();">
<!-- ImageReady Slices (sRAH go.psd) -->
<A HREF="#"
ONMOUSEOVER="changeImages('sRAH_go_01', 'images/sRAH-go_01-
over.gif'); return true;"
ONMOUSEOUT="changeImages('sRAH_go_01', 'images/sRAH-go_01.gif');
return true;"
ONMOUSEDOWN="changeImages('sRAH_go_01', 'images/sRAH-go_01-
down.gif'); return true;"
ONMOUSEUP="changeImages('sRAH_go_01', 'images/sRAH-go_01-
over.gif'); return true;">
<IMG NAME="sRAH_go_01" SRC="images/sRAH-go_01.gif" WIDTH=30 HEIGHT=
20 BORDER=0 ALT=""></A>
<!-- End ImageReady Slices -->
</BODY>

=====

Is there a simple way to duplicate the instances with this code?
 
L

Leslie

Hmm. This differs from the code generated by ImageReady. If necessary, I
can chuck the IR code and rewrite it, but I'd be interested in a simple
mod to IR code to streamline the process. Here's the complete IR code:
Click to expand...


<code snipped>

You're way over my head here. As I said, the code I gave you earlier
was copied and pasted from a javascript web site, and it will work if
you make the changes to the image# for each use.
Is there a simple way to duplicate the instances with this code?
Click to expand...

You need someone with much more knowledge than I to help you with this
question.

Good luck,

Leslie
"I refuse to have a battle of wits with an unarmed person."
 
M

Mark Parnell

You need someone with much more knowledge than I to help you with this
question.
Click to expand...

A javascript group would probably be a good place to start. :)

E.g.
 
J

James Gifford

Mark Parnell said:
A javascript group would probably be a good place to start. :)
Click to expand...

*Sigh*. This group is my third stop on the reference chain. I keep digging
in deeper and deeper to something I don' wanna spend all that much time
on... :)

Thanks.
 
L

Leslie

*Sigh*. This group is my third stop on the reference chain. I keep digging
in deeper and deeper to something I don' wanna spend all that much time
on... :)
Click to expand...

Well, then don't make this more difficult than it needs to be. I gave
you a code that works, and also told you how to modify it so it will
work with multiple uses of the same graphic.

If the solution I offered is too simple then you can continue to bang
you head against the wall, but all you'll end up with is a headache.

Leslie
"I refuse to have a battle of wits with an unarmed person."
 
J

James Gifford

Well, then don't make this more difficult than it needs to be. I gave
you a code that works, and also told you how to modify it so it will
work with multiple uses of the same graphic.

If the solution I offered is too simple then you can continue to bang
you head against the wall, but all you'll end up with is a headache.
Click to expand...

No, it's a good solution, but I don't want to start writing my own
Javascript for everything, especially not rollovers and sliced graphics.
I'd really, really, really like to let ImageReady handle all the messy
stuff and just touch up its code as necessary.
 
L

Leslie

No, it's a good solution, but I don't want to start writing my own
Javascript for everything, especially not rollovers and sliced graphics.
I'd really, really, really like to let ImageReady handle all the messy
stuff and just touch up its code as necessary.
Click to expand...

Your original post should have stated that all you want is to be able
to modify the code spit out by ImageReady. Now you need to find a
fourth group whose topic is ImageReady and/or Adobe and post your
question there.

BTW, nobody has suggested that you write your own javascript, only
that you copy and paste the few lines given to you with the minor
modifications needed to accomplish what you asked for.

Leslie
"I refuse to have a battle of wits with an unarmed person."
 
J

James Gifford

Your original post should have stated that all you want is to be able
to modify the code spit out by ImageReady.
Click to expand...

It did.
Now you need to find a
fourth group whose topic is ImageReady and/or Adobe and post your
question there.
Click to expand...

That's where I started, since the Photoshop (aka ImageReady) group is
one of my regular groups.
BTW, nobody has suggested that you write your own javascript, only
that you copy and paste the few lines given to you with the minor
modifications needed to accomplish what you asked for.
Click to expand...

I'm not a major HTML or web page junkie - it's just a side task for me
that I like to accomplish with as little effort as possible. ImageReady,
like many higher-end web tools, generates the component graphic files
and all of the HTML/Javascript code to make them work. I'd much rather
let it do its job and add a bit of tinkering than move all the way back
to creating my own individual graphics and code, whether it's by cutting
and pasting or learning JS from the ground up.

I appreciate your suggestion, but the code generated by IR uses a
different "model" and I can't apply the simple renumbering trick to it.
It seems to me that somewhere in IR's approach is a simple way to
"instance" it, but I don't know enough to find it.

I'll work it out. Thanks for the help, though!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

comp.lang.c FAQ list Table of Contents 0
comp.lang.c FAQ list Table of Contents 0
FAQ update (roundup of pending requests - for comment) 6
comp.lang.vhdl FAQ part 1 of 4: general 0
comp.lang.c Answers (Abridged) to Frequently Asked Questions (FAQ) 0
comp.lang.c Answers (Abridged) to Frequently Asked Questions (FAQ) 0
comp.lang.c Answers (Abridged) to Frequently Asked Questions (FAQ) 0
comp.lang.c Answers (Abridged) to Frequently Asked Questions (FAQ) 0

Members online

Total: 30 (members: 2, guests: 28)
Robots: 501

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top