onmouseover

Discussion in 'Javascript' started by windandwaves, Sep 1, 2005.

  1. windandwaves

    windandwaves Guest

    Hi Folk

    If I have 100 images with an onmouseover effect then what is an efficient
    way to set this up.

    I could do

    <img src="i1.gif" onmouseover="show('i1');''>

    100 times but I am sure that there is a more efficient way (using less
    bytes).

    Do you have any ideas?

    Thank you

    - Nicolaas
     
    windandwaves, Sep 1, 2005
    #1
    1. Advertising

  2. windandwaves

    ASM Guest

    windandwaves wrote:
    > Hi Folk
    >
    > If I have 100 images with an onmouseover effect then what is an efficient
    > way to set this up.
    >
    > I could do
    >
    > <img src="i1.gif" onmouseover="show('i1');''>
    >
    > 100 times but I am sure that there is a more efficient way (using less
    > bytes).


    <html>
    <script type="text/javascript">
    function setShow() {
    var I = document.images;
    for(var j=1;j<I.length;j++) {
    var ind = I[j].src;
    if(ind.lastIndexOf('/')>0)
    ind = ind.substring(ind.lastIndexOf('/')+1);
    ind = ind.substring(0,ind.indexOf('.'));
    I[j].onmouseover= Function ("show('"+ind+"')");
    }
    }
    onload=setShow;
    function show(name) {
    document.images['viewer'].src = 'photos/'+ind+'.jpeg';
    }
    </script>
    <img name="viewer" />
    <img src="i1.gif" ><br>
    <img src="i2.gif" ><br>
    <img src="i99.gif" ><br>
    </html>

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Sep 2, 2005
    #2
    1. Advertising

  3. windandwaves

    Randy Webb Guest

    windandwaves said the following on 9/1/2005 6:13 PM:

    > Hi Folk
    >
    > If I have 100 images with an onmouseover effect then what is an efficient
    > way to set this up.


    That depends on what your effect is.

    > I could do
    >
    > <img src="i1.gif" onmouseover="show('i1');''>
    > 100 times but I am sure that there is a more efficient way (using less
    > bytes).


    less bytes? Hmmm.

    You could dynamically loop through the page, find all img tags, then
    dynamically add an event handler.

    > Do you have any ideas?


    I have lots of ideas, how many of them do you want?

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Sep 2, 2005
    #3
  4. JRS: In article <npLRe.7722$>, dated Fri, 2
    Sep 2005 10:13:56, seen in news:comp.lang.javascript, windandwaves
    <> posted :
    >If I have 100 images with an onmouseover effect then what is an efficient
    >way to set this up.
    >
    >I could do
    >
    ><img src="i1.gif" onmouseover="show('i1');''>
    >
    >100 times but I am sure that there is a more efficient way (using less
    >bytes).
    >
    >Do you have any ideas?


    Consider :-

    for (j=0 ; j<10 ; j++)
    document.writeln(
    "<img src=\"graphics\\fig-", j,
    ".gif\" onmouseover=\"alert(", j, ");''\">")

    Your line has '' where it needs " .

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr John Stockton, Sep 2, 2005
    #4
  5. windandwaves

    Randy Webb Guest

    Dr John Stockton said the following on 9/2/2005 1:31 PM:
    > JRS: In article <npLRe.7722$>, dated Fri, 2
    > Sep 2005 10:13:56, seen in news:comp.lang.javascript, windandwaves
    > <> posted :
    >
    >>If I have 100 images with an onmouseover effect then what is an efficient
    >>way to set this up.
    >>
    >>I could do
    >>
    >><img src="i1.gif" onmouseover="show('i1');''>
    >>
    >>100 times but I am sure that there is a more efficient way (using less
    >>bytes).
    >>
    >>Do you have any ideas?

    >
    >
    > Consider :-
    >
    > for (j=0 ; j<10 ; j++)
    > document.writeln(
    > "<img src=\"graphics\\fig-", j,
    > ".gif\" onmouseover=\"alert(", j, ");''\">")
    >
    > Your line has '' where it needs " .
    >


    And then ditch it?

    var myVar = '';
    for (j=0 ; j<10 ; j++){
    myVar += '<img src="graphics\\fig-'+j+'.gif"';
    myVar += 'onmouseover="alert('+j+');">';

    }
    document.write(myVar);

    Of course, your defense of that improper use (or lack of) variable
    concatenation with one document.write will be "I said Consider" but with
    regards to your replies to McKirahan, practice what you preach.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Sep 2, 2005
    #5
  6. JRS: In article <>, dated Fri, 2 Sep
    2005 17:14:40, seen in news:comp.lang.javascript, Randy Webb
    <> posted :
    >Dr John Stockton said the following on 9/2/2005 1:31 PM:
    >> JRS: In article <npLRe.7722$>, dated Fri, 2
    >> Sep 2005 10:13:56, seen in news:comp.lang.javascript, windandwaves
    >> <> posted :
    >>
    >>>If I have 100 images with an onmouseover effect then what is an efficient
    >>>way to set this up.


    >> Consider :-
    >>
    >> for (j=0 ; j<10 ; j++)
    >> document.writeln(
    >> "<img src=\"graphics\\fig-", j,
    >> ".gif\" onmouseover=\"alert(", j, ");''\">")
    >>
    >> Your line has '' where it needs " .
    >>

    >
    >And then ditch it?
    >
    >var myVar = '';
    >for (j=0 ; j<10 ; j++){
    > myVar += '<img src="graphics\\fig-'+j+'.gif"';
    > myVar += 'onmouseover="alert('+j+');">';
    >
    >}
    >document.write(myVar);
    >
    >Of course, your defense of that improper use (or lack of) variable
    >concatenation with one document.write will be "I said Consider" but with
    >regards to your replies to McKirahan, practice what you preach.


    References to hand indicate that document.write (which I did not use)
    can take multiple comma-separated parameters. Your method has
    unnecessary string manipulation, but you have clarified the quote-marks.

    Mine is as I tested it, and works; so, in fact, does yours.

    Your original response to the OP wasn't helpful, either.

    --
    © John Stockton, Surrey, UK. ???@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Check boilerplate spelling -- error is a public sign of incompetence.
    Never fully trust an article from a poster who gives no full real name.
     
    Dr John Stockton, Sep 4, 2005
    #6
  7. windandwaves

    Jim Davis Guest

    "Randy Webb" <> wrote in message
    news:...
    >
    > var myVar = '';
    > for (j=0 ; j<10 ; j++){
    > myVar += '<img src="graphics\\fig-'+j+'.gif"';
    > myVar += 'onmouseover="alert('+j+');">';
    >
    > }
    > document.write(myVar);
    >
    > Of course, your defense of that improper use (or lack of) variable
    > concatenation with one document.write will be "I said Consider" but with
    > regards to your replies to McKirahan, practice what you preach.


    Actually, despite being as tactless as ever, he's absolutely correct. Both
    document.write() and document.wrtieln() can accept any number of arguments.
    All arguments will be concatenated together before display.

    This allows for markedly cleaner code when you're dumping a lot of HTML. As
    a simple example this:

    document.write("<table>");
    document.write(" <tr>");
    document.write(" <td>Hello</td>");
    document.write(" </tr>");
    document.write("</table>");

    Could be done as this (untested code... but I trust you get the point even
    if I screw up):

    document.write("",
    "<table>",
    " <tr>",
    " <td>Hello</td>",
    " </tr>",
    "</table>");

    It's not universally useful of course, but in some cases it can make life so
    very much easier.

    Jim Davis
     
    Jim Davis, Sep 4, 2005
    #7
  8. windandwaves

    Randy Webb Guest

    Dr John Stockton said the following on 9/4/2005 8:48 AM:

    > JRS: In article <>, dated Fri, 2 Sep
    > 2005 17:14:40, seen in news:comp.lang.javascript, Randy Webb
    > <> posted :
    >
    >>Dr John Stockton said the following on 9/2/2005 1:31 PM:
    >>
    >>>JRS: In article <npLRe.7722$>, dated Fri, 2
    >>>Sep 2005 10:13:56, seen in news:comp.lang.javascript, windandwaves
    >>><> posted :
    >>>
    >>>
    >>>>If I have 100 images with an onmouseover effect then what is an efficient
    >>>>way to set this up.

    >
    >
    >>>Consider :-
    >>>
    >>> for (j=0 ; j<10 ; j++)
    >>> document.writeln(
    >>> "<img src=\"graphics\\fig-", j,
    >>> ".gif\" onmouseover=\"alert(", j, ");''\">")
    >>>
    >>>Your line has '' where it needs " .
    >>>

    >>
    >>And then ditch it?
    >>
    >>var myVar = '';
    >>for (j=0 ; j<10 ; j++){
    >> myVar += '<img src="graphics\\fig-'+j+'.gif"';
    >> myVar += 'onmouseover="alert('+j+');">';
    >>
    >>}
    >>document.write(myVar);
    >>
    >>Of course, your defense of that improper use (or lack of) variable
    >>concatenation with one document.write will be "I said Consider" but with
    >>regards to your replies to McKirahan, practice what you preach.

    >
    >
    > References to hand indicate that document.write (which I did not use)
    > can take multiple comma-separated parameters. Your method has
    > unnecessary string manipulation, but you have clarified the quote-marks.


    If I were writing that for myself, it would look something like this:

    var myVar = '';
    for (j=0 ; j<10 ; j++){
    myVar += '<img src="graphics\\fig-'+j+'.gif" onmouseover="alert('+j+');">';
    }
    document.write(myVar);

    Where the myVar line is, obviously, on one line.

    But you are correct, the original did double string manipulation.

    But, to add dynamic event handles to every link on a page, I would do as
    I said to begin with. Loop through the page and dynamically add them,
    not dynamically create the links.

    Dynamically added event handlers enhance the page for JS users.
    Dynamically created links makes the page totally unusable by non-JS users.
    The above way only works if it is a continuous list of links. Not many
    sites fall into that category.

    > Mine is as I tested it, and works; so, in fact, does yours.


    That goes without saying.

    > Your original response to the OP wasn't helpful, either.


    Yes it was, you just didn't realize it.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Sep 4, 2005
    #8
  9. windandwaves

    Randy Webb Guest

    Jim Davis said the following on 9/4/2005 1:29 PM:

    > "Randy Webb" <> wrote in message
    > news:...
    >
    >>var myVar = '';
    >>for (j=0 ; j<10 ; j++){
    >> myVar += '<img src="graphics\\fig-'+j+'.gif"';
    >> myVar += 'onmouseover="alert('+j+');">';
    >>
    >>}
    >>document.write(myVar);
    >>
    >>Of course, your defense of that improper use (or lack of) variable
    >>concatenation with one document.write will be "I said Consider" but with
    >>regards to your replies to McKirahan, practice what you preach.

    >
    >
    > Actually, despite being as tactless as ever, he's absolutely correct. Both
    > document.write() and document.wrtieln() can accept any number of arguments.
    > All arguments will be concatenated together before display.


    For each call to document.write.

    for (i=0;i<100;i++){document.write(i);}

    document.write will be called 100 times.

    var k='';
    for (i=0;i<100;i++){k += i;}
    document.write(k)

    document.write will be called once.

    Both display the same thing in the end. The second is close to 100 times
    faster than the first. Which was my point in my reply.

    > This allows for markedly cleaner code when you're dumping a lot of HTML. As
    > a simple example this:
    >
    > document.write("<table>");
    > document.write(" <tr>");
    > document.write(" <td>Hello</td>");
    > document.write(" </tr>");
    > document.write("</table>");
    >
    > Could be done as this (untested code... but I trust you get the point even
    > if I screw up):
    >
    > document.write("",
    > "<table>",
    > " <tr>",
    > " <td>Hello</td>",
    > " </tr>",
    > "</table>");


    Yes, I get the point. That wasn't my original point, but even so, the
    above can be written more efficiently as:

    document.write('<table><tr><td>Hello</td></tr></table>');

    The first has to perform string concatenation the second one doesn't.

    Yes, it gets muddier with longer, more complex, HTML, but the idea is
    the same.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Sep 4, 2005
    #9
  10. windandwaves

    Jim Davis Guest

    "Randy Webb" <> wrote in message
    news:...
    > Jim Davis said the following on 9/4/2005 1:29 PM:
    >
    > For each call to document.write.
    >
    > for (i=0;i<100;i++){document.write(i);}
    >
    > document.write will be called 100 times.
    >
    > var k='';
    > for (i=0;i<100;i++){k += i;}
    > document.write(k)
    >
    > document.write will be called once.
    >
    > Both display the same thing in the end. The second is close to 100 times
    > faster than the first. Which was my point in my reply.


    Well - that makes sense. I was only responding the statement about
    "improper variable concatenation". I didn't say it was smart - just legal.
    ;^)

    But... sidetracking... is it really 100 times faster? Is document.write
    really that slow? I'm not challenging you - just curious (I've never
    bothered to explore it).

    > Yes, I get the point. That wasn't my original point, but even so, the
    > above can be written more efficiently as:
    >
    > document.write('<table><tr><td>Hello</td></tr></table>');


    But of course that's not the point either. ;^)

    When you have large blocks of HTML code to dump (my debugger code dumps over
    100 lines of style sheet code for example) that you'd like to maintain later
    it can be a life saver.

    If you're never going to edit the code the one long string is just as useful
    (and probably faster by at least a bit) but if you need to edit it often (or
    what the ability to) then it's by far the cleanest way to do it in
    JavaScript that I've found.

    Jim Davis
     
    Jim Davis, Sep 4, 2005
    #10
  11. windandwaves

    Randy Webb Guest

    Jim Davis said the following on 9/4/2005 6:49 PM:
    > "Randy Webb" <> wrote in message
    > news:...
    >
    >>Jim Davis said the following on 9/4/2005 1:29 PM:
    >>
    >>For each call to document.write.
    >>
    >>for (i=0;i<100;i++){document.write(i);}
    >>
    >>document.write will be called 100 times.
    >>
    >>var k='';
    >>for (i=0;i<100;i++){k += i;}
    >>document.write(k)
    >>
    >>document.write will be called once.
    >>
    >>Both display the same thing in the end. The second is close to 100 times
    >>faster than the first. Which was my point in my reply.

    >
    >
    > Well - that makes sense. I was only responding the statement about
    > "improper variable concatenation". I didn't say it was smart - just legal.
    > ;^)
    >
    >
    > But... sidetracking... is it really 100 times faster? Is document.write
    > really that slow? I'm not challenging you - just curious (I've never
    > bothered to explore it).


    Calling document.write 100 times has to be on the order of 99 times
    slower than calling it once. But then you add in the over head of string
    concatenation and go from there.

    And string concatenation is extremely slow.


    In production code, it is probably most efficient to define data as an
    array, and then document.write(arrayName.join()). <shrug>

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Sep 5, 2005
    #11
  12. JRS: In article <QNCdnZ2dnZ2fLsrLnZ2dnf-uht6dnZ2dRVn-
    >, dated Sun, 4 Sep 2005 13:48:27, seen in
    news:comp.lang.javascript, Randy Webb <> posted :
    >Dr John Stockton said the following on 9/4/2005 8:48 AM:
    >
    >> JRS: In article <>, dated Fri, 2 Sep
    >> 2005 17:14:40, seen in news:comp.lang.javascript, Randy Webb
    >> <> posted :
    >>
    >>>Dr John Stockton said the following on 9/2/2005 1:31 PM:
    >>>
    >>>>JRS: In article <npLRe.7722$>, dated Fri, 2
    >>>>Sep 2005 10:13:56, seen in news:comp.lang.javascript, windandwaves
    >>>><> posted :
    >>>>
    >>>>
    >>>>>If I have 100 images with an onmouseover effect then what is an efficient
    >>>>>way to set this up.


    >But, to add dynamic event handles to every link on a page, I would do as
    >I said to begin with. Loop through the page and dynamically add them,
    >not dynamically create the links.


    The OP asked for an efficient way to set up 100 images with handlers,
    not just 100 handlers. He's not new here; he should by now know that
    "creating" those images with javascript means that those without
    javascript won't see the images.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr John Stockton, Sep 5, 2005
    #12
  13. JRS: In article <>, dated Sun, 4 Sep
    2005 14:03:50, seen in news:comp.lang.javascript, Randy Webb
    <> posted :

    >Both display the same thing in the end. The second is close to 100 times
    > faster than the first. Which was my point in my reply.


    It can be interesting to find out, in the end, what your point was
    actually intended to be.

    But what you mean is that a certain portion of the code will take a
    hundredth of the time; not that the page will display 100 times quicker.

    Speeding up portions of the code is always useful, provided that it is
    not accompanied by countervailing disadvantage. On a modern machine,
    say less than ten years old, a hundred document.writes (as opposed to
    concatenations and one document.write) are insignificant - especially
    when there are 100 images to display. And the code with multiple
    document.writes is IMHO clearer to read in News.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
    PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
    Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
     
    Dr John Stockton, Sep 5, 2005
    #13
  14. windandwaves

    Randy Webb Guest

    Dr John Stockton said the following on 9/5/2005 10:10 AM:

    > JRS: In article <>, dated Sun, 4 Sep
    > 2005 14:03:50, seen in news:comp.lang.javascript, Randy Webb
    > <> posted :
    >
    >
    >>Both display the same thing in the end. The second is close to 100 times
    >> faster than the first. Which was my point in my reply.

    >
    >
    > It can be interesting to find out, in the end, what your point was
    > actually intended to be.


    We may never know.

    > But what you mean is that a certain portion of the code will take a
    > hundredth of the time; not that the page will display 100 times quicker.


    Actually, it only takes 1/99th the time to run it once versus 100 times,
    but thats beside the point.

    > Speeding up portions of the code is always useful, provided that it is
    > not accompanied by countervailing disadvantage. On a modern machine,
    > say less than ten years old, a hundred document.writes (as opposed to
    > concatenations and one document.write) are insignificant - especially
    > when there are 100 images to display. And the code with multiple
    > document.writes is IMHO clearer to read in News.


    Probably true about News, but I don't write code to "look good in News",
    I wrote code that works. If it happens to look good in News, thats a
    benefit but not my primary concern when writing code.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Sep 5, 2005
    #14
  15. windandwaves

    ASM Guest

    Dr John Stockton wrote:
    >
    > The OP asked for an efficient way to set up 100 images with handlers,
    > not just 100 handlers.


    It is not exactly what I understood...
    (because html code was given)

    > He's not new here; he should by now know that
    > "creating" those images with javascript means that those without
    > javascript won't see the images.


    anyway, nobody will can see the (big) images
    even with what originaly proposed ... :)

    I did give too a code that on load attributes an onclick to each img
    But, and because without JS the first idea couldn't run,
    sure, it's much beter again to create imgs and their handlers together.

    To create the code thru a loop
    it is allways preferable to stock the html code to write in a temporary
    variable, insteed to write it on the fly line to line, becaus this
    second way can hurt fiew browsers
    and also : it's all simply cleaner ...




    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Sep 5, 2005
    #15
    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. Tor Inge Rislaa
    Replies:
    3
    Views:
    16,134
    Jerry III
    Aug 6, 2003
  2. Jay
    Replies:
    2
    Views:
    41,709
    Alex Papadimoulis
    Sep 30, 2003
  3. Frances Valdes

    Onmouseover

    Frances Valdes, Mar 2, 2004, in forum: ASP .Net
    Replies:
    7
    Views:
    791
    Frances Valdes
    Mar 3, 2004
  4. =?Utf-8?B?QXZpIFNoaWxvbg==?=

    OnMouseOver for a DataGrid control

    =?Utf-8?B?QXZpIFNoaWxvbg==?=, Jul 12, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    2,184
    Mr. Dot Net
    Jul 12, 2004
  5. Ryan Moore

    DataList <td onMouseOver>

    Ryan Moore, Oct 11, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    3,299
    Eliyahu Goldin
    Oct 12, 2004
Loading...

Share This Page