onmouseover

W

windandwaves

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
 
A

ASM

windandwaves said:
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).
Click to expand...

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

Randy Webb

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.
Click to expand...

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).
Click to expand...

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?
Click to expand...

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

Dr John Stockton

JRS: In article <[email protected]>, dated Fri, 2
Sep 2005 10:13:56, seen in windandwaves
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?
Click to expand...

Consider :-

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

Your line has '' where it needs " .
 
R

Randy Webb

Dr John Stockton said the following on 9/2/2005 1:31 PM:
JRS: In article <[email protected]>, dated Fri, 2
Sep 2005 10:13:56, seen in windandwaves



Consider :-

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

Your line has '' where it needs " .
Click to expand...

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

Dr John Stockton

JRS: In article <[email protected]>, dated Fri, 2 Sep
2005 17:14:40, seen in Randy Webb
Dr John Stockton said the following on 9/2/2005 1:31 PM:

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.
Click to expand...

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

Jim Davis

Randy Webb said:
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.
Click to expand...

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
 
R

Randy Webb

Dr John Stockton said the following on 9/4/2005 8:48 AM:
JRS: In article <[email protected]>, dated Fri, 2 Sep
2005 17:14:40, seen in Randy Webb



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.
Click to expand...

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.
Click to expand...

That goes without saying.
Your original response to the OP wasn't helpful, either.
Click to expand...

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

Randy Webb

Jim Davis said the following on 9/4/2005 1:29 PM:
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.
Click to expand...

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>");
Click to expand...

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

Jim Davis

Randy Webb said:
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.
Click to expand...

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>');
Click to expand...

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
 
R

Randy Webb

Jim Davis said the following on 9/4/2005 6:49 PM:
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).
Click to expand...

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

Dr John Stockton

JRS: In article <QNCdnZ2dnZ2fLsrLnZ2dnf-uht6dnZ2dRVn-
(e-mail address removed)>, dated Sun, 4 Sep 2005 13:48:27, seen in
news:comp.lang.javascript said:
Dr John Stockton said the following on 9/4/2005 8:48 AM:
Click to expand...
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.
Click to expand...

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

Dr John Stockton

JRS: In article <[email protected]>, dated Sun, 4 Sep
2005 14:03:50, seen in Randy Webb
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.
Click to expand...

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

Randy Webb

Dr John Stockton said the following on 9/5/2005 10:10 AM:
JRS: In article <[email protected]>, dated Sun, 4 Sep
2005 14:03:50, seen in Randy Webb



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

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.
Click to expand...

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.
Click to expand...

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

ASM

Dr said:
The OP asked for an efficient way to set up 100 images with handlers,
not just 100 handlers.
Click to expand...

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.
Click to expand...

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

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

Help with Visual Lightbox: Scripts 2
InnerHTML does not return Onmouseover 2
Javascript onmouseover/out vs. Opera browser 0
Performance problem with onMouseover in Internet Explorer 2
how to achieve onmouseover/onmouseout effect? 3
Centering picture element for larger screen sizes 2
Flip-Cards with Local Images 1
Onmouseover, onmouseout question 9

Members online

No members online now.
Total: 34 (members: 0, guests: 34)
Robots: 320

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,013
Latest member
KatriceSwa

Latest Threads

Top