Multiple instances of rollovers?

Discussion in 'HTML' started by James Gifford, Jan 6, 2004.

  1. 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 |
     
    James Gifford, Jan 6, 2004
    #1
    1. Advertising

  2. James Gifford

    Chet Guest

    "James Gifford" <> wrote in message
    news:...
    | 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
    (remove NO.....SPAM)
     
    Chet, Jan 6, 2004
    #2
    1. Advertising

  3. James Gifford

    Leslie Guest

    On Tue, 06 Jan 2004 00:47:56 GMT, James Gifford
    <> 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."
     
    Leslie, Jan 6, 2004
    #3
  4. Leslie <> 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 |
     
    James Gifford, Jan 6, 2004
    #4
  5. James Gifford

    Leslie Guest

    On Tue, 06 Jan 2004 03:44:21 GMT, James Gifford
    <> wrote:

    >Leslie <> 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."
     
    Leslie, Jan 6, 2004
    #5
  6. Leslie <> 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 |
     
    James Gifford, Jan 6, 2004
    #6
  7. Leslie <> 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].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 |
     
    James Gifford, Jan 6, 2004
    #7
  8. James Gifford

    Leslie Guest

    On Tue, 06 Jan 2004 18:13:56 GMT, James Gifford
    <> wrote:

    >Leslie <> 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."
     
    Leslie, Jan 6, 2004
    #8
  9. James Gifford

    Mark Parnell Guest

    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
     
    Mark Parnell, Jan 6, 2004
    #9
  10. Mark Parnell <> 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 |
     
    James Gifford, Jan 7, 2004
    #10
  11. James Gifford

    Leslie Guest

    On Wed, 07 Jan 2004 00:16:23 GMT, James Gifford
    <> wrote:

    >Mark Parnell <> 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... :)


    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."
     
    Leslie, Jan 7, 2004
    #11
  12. Leslie <> 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... :)


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


    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.

    --
    | James Gifford * FIX SPAMTRAP TO REPLY |
    | So... your philosophy fits in a sig, does it? |
    | Heinlein stuff at: www.nitrosyncretic.com/rah |
     
    James Gifford, Jan 7, 2004
    #12
  13. James Gifford

    Leslie Guest

    On Wed, 07 Jan 2004 03:51:58 GMT, James Gifford
    <> wrote:

    >Leslie <> 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... :)

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

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


    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."
     
    Leslie, Jan 7, 2004
    #13
  14. Leslie <> wrote:
    >>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.


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


    It did.

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


    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.


    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!

    --
    | James Gifford * FIX SPAMTRAP TO REPLY |
    | So... your philosophy fits in a sig, does it? |
    | Heinlein stuff at: www.nitrosyncretic.com/rah |
     
    James Gifford, Jan 7, 2004
    #14
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Les Caudle
    Replies:
    0
    Views:
    330
    Les Caudle
    Apr 10, 2004
  2. Nathan Sokalski

    Image Rollovers with the Hyperlink Control

    Nathan Sokalski, Feb 18, 2006, in forum: ASP .Net
    Replies:
    8
    Views:
    8,832
    Patrick.O.Ige
    Feb 19, 2006
  3. John Wohlbier
    Replies:
    2
    Views:
    391
    Josiah Carlson
    Feb 22, 2004
  4. Replies:
    8
    Views:
    482
    James Stroud
    Jan 29, 2009
  5. Nav
    Replies:
    15
    Views:
    574
    Steven D'Aprano
    Jan 5, 2010
Loading...

Share This Page