Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Multiple instances of rollovers?

Reply
Thread Tools

Multiple instances of rollovers?

 
 
James Gifford
Guest
Posts: n/a
 
      01-06-2004
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 |
 
Reply With Quote
 
 
 
 
Chet
Guest
Posts: n/a
 
      01-06-2004

"James Gifford" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) s.com...
| 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
--
Chet
http://www.velocityreviews.com/forums/(E-Mail Removed) (remove NO.....SPAM)


 
Reply With Quote
 
 
 
 
Leslie
Guest
Posts: n/a
 
      01-06-2004
On Tue, 06 Jan 2004 00:47:56 GMT, James Gifford
<(E-Mail Removed)> wrote:

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


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."
 
Reply With Quote
 
James Gifford
Guest
Posts: n/a
 
      01-06-2004
Leslie <(E-Mail Removed)> wrote:
> 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.


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?

--
| James Gifford * FIX SPAMTRAP TO REPLY |
| So... your philosophy fits in a sig, does it? |
| Heinlein stuff at: www.nitrosyncretic.com/rah |
 
Reply With Quote
 
Leslie
Guest
Posts: n/a
 
      01-06-2004
On Tue, 06 Jan 2004 03:44:21 GMT, James Gifford
<(E-Mail Removed)> wrote:

>Leslie <(E-Mail Removed)> wrote:
>> 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.

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



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."
 
Reply With Quote
 
James Gifford
Guest
Posts: n/a
 
      01-06-2004
Leslie <(E-Mail Removed)> wrote:
> 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.


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

--
| James Gifford * FIX SPAMTRAP TO REPLY |
| So... your philosophy fits in a sig, does it? |
| Heinlein stuff at: www.nitrosyncretic.com/rah |
 
Reply With Quote
 
James Gifford
Guest
Posts: n/a
 
      01-06-2004
Leslie <(E-Mail Removed)> wrote:
> Here's what I use (also copy & paste from a web source)


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[i]].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?

--
| James Gifford * FIX SPAMTRAP TO REPLY |
| So... your philosophy fits in a sig, does it? |
| Heinlein stuff at: www.nitrosyncretic.com/rah |
 
Reply With Quote
 
Leslie
Guest
Posts: n/a
 
      01-06-2004
On Tue, 06 Jan 2004 18:13:56 GMT, James Gifford
<(E-Mail Removed)> wrote:

>Leslie <(E-Mail Removed)> wrote:
>> Here's what I use (also copy & paste from a web source)

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



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


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."
 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      01-06-2004
On Tue, 06 Jan 2004 23:49:06 GMT, Leslie declared in alt.html:
>
> You need someone with much more knowledge than I to help you with this
> question.
>


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

E.g. news:comp.lang.javascript

--
Mark Parnell
http://www.clarkecomputers.com.au
 
Reply With Quote
 
James Gifford
Guest
Posts: n/a
 
      01-07-2004
Mark Parnell <(E-Mail Removed)> wrote:
> A javascript group would probably be a good place to start.


*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.

--
| James Gifford * FIX SPAMTRAP TO REPLY |
| So... your philosophy fits in a sig, does it? |
| Heinlein stuff at: www.nitrosyncretic.com/rah |
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Newbie help- Can multiple instances with multiple namesautomatically created. Nav Python 15 01-05-2010 06:03 AM
dicts,instances,containers, slotted instances, et cetera. ocschwar@gmail.com Python 8 01-29-2009 09:52 AM
TB multiple instances - newbie question ciqret Firefox 2 06-02-2005 10:34 PM
Possible to open multiple instances/profiles of Firefox (win32)? Isak Dinesen Firefox 2 07-27-2004 03:12 AM
list of class instances within a list of a class instances John Wohlbier Python 2 02-22-2004 08:41 AM



Advertisments