Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > onmouseover

Reply
Thread Tools

onmouseover

 
 
windandwaves
Guest
Posts: n/a
 
      09-01-2005
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


 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      09-02-2005
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
 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      09-02-2005
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
 
Reply With Quote
 
Dr John Stockton
Guest
Posts: n/a
 
      09-02-2005
JRS: In article <npLRe.7722$(E-Mail Removed)>, dated Fri, 2
Sep 2005 10:13:56, seen in news:comp.lang.javascript, windandwaves
<(E-Mail Removed)> 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.
 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      09-02-2005
Dr John Stockton said the following on 9/2/2005 1:31 PM:
> JRS: In article <npLRe.7722$(E-Mail Removed)>, dated Fri, 2
> Sep 2005 10:13:56, seen in news:comp.lang.javascript, windandwaves
> <(E-Mail Removed)> 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
 
Reply With Quote
 
Dr John Stockton
Guest
Posts: n/a
 
      09-04-2005
JRS: In article <(E-Mail Removed)>, dated Fri, 2 Sep
2005 17:14:40, seen in news:comp.lang.javascript, Randy Webb
<(E-Mail Removed)> posted :
>Dr John Stockton said the following on 9/2/2005 1:31 PM:
>> JRS: In article <npLRe.7722$(E-Mail Removed)>, dated Fri, 2
>> Sep 2005 10:13:56, seen in news:comp.lang.javascript, windandwaves
>> <(E-Mail Removed)> 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.
 
Reply With Quote
 
Jim Davis
Guest
Posts: n/a
 
      09-04-2005
"Randy Webb" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>
> 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


 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      09-04-2005
Dr John Stockton said the following on 9/4/2005 8:48 AM:

> JRS: In article <(E-Mail Removed)>, dated Fri, 2 Sep
> 2005 17:14:40, seen in news:comp.lang.javascript, Randy Webb
> <(E-Mail Removed)> posted :
>
>>Dr John Stockton said the following on 9/2/2005 1:31 PM:
>>
>>>JRS: In article <npLRe.7722$(E-Mail Removed)>, dated Fri, 2
>>>Sep 2005 10:13:56, seen in news:comp.lang.javascript, windandwaves
>>><(E-Mail Removed)> 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
 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      09-04-2005
Jim Davis said the following on 9/4/2005 1:29 PM:

> "Randy Webb" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>
>>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
 
Reply With Quote
 
Jim Davis
Guest
Posts: n/a
 
      09-04-2005
"Randy Webb" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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


 
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
DataList <td onMouseOver> Ryan Moore ASP .Net 5 10-12-2004 01:44 PM
OnMouseOver for a DataGrid control =?Utf-8?B?QXZpIFNoaWxvbg==?= ASP .Net 5 07-12-2004 03:53 AM
Onmouseover Frances Valdes ASP .Net 7 03-03-2004 12:35 PM
ASP.NET ImageButton and OnMouseOver Jay ASP .Net 2 09-30-2003 01:31 PM
How to change onmouseover and onmouseout dynamically Tor Inge Rislaa ASP .Net 3 08-06-2003 04:43 PM



Advertisments