Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old August 30th, 2003, 02:06 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default Dynamic Buttons?

I have several button images on several pages that call to separate functions based on the event occurring on each image -
onmouseover="onmouseover()";
onmouseout="onmouseout();"
onmouseup="onmouseup()";
onmousedown="onmousedown()";
etc.

All functions operate as planned when all event possibilities are incorporated into each image tag.

To consolidate the script writing for each page, the function scripts have been written to a single external script page.

However, writing all of the event possibilities into each image tag is very time consuming.

Is there any way to write a single entry into the tag that detects any event on that tag and then calls a function that discerns the event type and responds accordingly?

Regards,
TSEROOGY
  #2 (permalink)  
Old August 30th, 2003, 03:19 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi TSEROOGY,

You may try this in a reversed way; that is, instead of adding the various events in one single location for each image, you may opt to add each event once for all images.

The code below loops through all images in your page and then dynamically assigns an OnMouseOver method. Inside that method, you can use srcElement.id to find out which image was hovered over.

Note: This currently only works in Internet Explorer. To have it work in NN or in Mozilla, you'll need to fiddle around with the srcElement a bit. You could use event.target for Netscape, but that would force you to pass a reference to the current image to the function. If you come up with a cross-browser solution, please let me know.

Hope this helps,

Imar

Code:
<html>
    <head>
        <title>Test Dynamic Event Handlers</title>
        <script language="JavaScript">
            function OnMouseOver()
            {
                alert('OnMouseOver caused by ' + event.srcElement.id);
            }
            function OnLoad()
            {
                var allImages;
                // get a reference to all <img> tags in the page
                if (document.all || document.getElementsByTagName) 
                {
                    allImages = document.getElementsByTagName("img");
                }
                else 
                {
                    document.write("Unrecognized Browser Detected");
                }
                // If there are images
                if (allImages.length > 0)
                {
                    for (i = 0; i < allImages.length; i++)
                    {
                        // next line doesn't work. You'll need an 
                        // explicit reference to the image
                        // allImages[i].onmouseover = OnMouseOver;
                        // This works: Dynamically attach the OnMouseOver method
                        document.getElementById(allImages[i].id).onmouseover = OnMouseOver;
                    }
                }
            }
        </script>
    </head>
<body onload="OnLoad();">
    <img src="Images/image1.gif" id="img1">
    <img src="Images/image2.gif" id="img2">
    <img src="Images/image3.gif" id="img3">
</body>
</html>
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
  #3 (permalink)  
Old September 1st, 2003, 07:34 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Imar,
Sorry for the delayed response, and thank you for your response!

It looks like this may be the best way to go. As every event will be processed, I'm not sure what this will do to performance. As I'm fairly new a this, I'll just give it a try!

Best regards,
TSEROOGY
  #4 (permalink)  
Old September 2nd, 2003, 01:43 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi,

Not *every* event will be processed. On page load, each image gets the On* events dynamically *assigned*. This shouldn't impact performance too much.

When the page is loaded, just the event for the image that caused it will fire. So, when you hover over image1, just the OnMouseOver event for image1 will fire, and execute the code in the OnMouseOver() method.

Cheers,

Imar


Quote:
quote:As every event will be processed, I'm not sure what this will do to performance. As I'm fairly new a this, I'll just give it a try!
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
  #5 (permalink)  
Old September 3rd, 2003, 08:44 PM
Authorized User
 
Join Date: Jul 2003
Location: , , .
Posts: 46
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to stalker Send a message via MSN to stalker
Default

oh man!! no way!! eheheh

I think the best way to do that is with behaviours.

it's like a style sheet but you can define events to the TAGs.

You could get more information at msdn.microsoft.com/library
there must be something there. after creating a .htc file with all the beaviour that you want and atach them to events with the <ATTACH> tag just associate the events with classes or HTML elements within a style TAG like this:

<style>
IMG {
    behaviour: url(behav.htc);
}
</style>

I really believe this is the easier way :)
good luck :)

(AH! i found this in this wrox book: VBScript PROGRAMMER'S REFERENCE.. The good this about wrox books is that they never talk about the subject only.. they only put a lot of other interesting things inside such as this and HTA that I am learing rigth now :)

BYE

  #6 (permalink)  
Old September 3rd, 2003, 10:54 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks, Stalker!

I quickly looked "BEHAVIOR" up in the MSDN library and they have a nice section, detailing how to use and implement this scripting.

However, I need to read a little more to see with which browsers and browser versions it is compatible - i.e. IE4, 5, NS4, 6 etc.

My work is strictly with IE4 and older, so it will probably do fine for my purposes.

And, you're absolutely correct on the WROX manuals including more than just the basics on the topics being covered - at least from a newbie's perspective.

The only problem is that the technology is changing faster than I can read!!!!:-)

TSEROOGY
  #7 (permalink)  
Old September 4th, 2003, 11:38 AM
Authorized User
 
Join Date: Jul 2003
Location: , , .
Posts: 46
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to stalker Send a message via MSN to stalker
Default

HI! look, Ill make it easier to you. I tested this in IE 6.0 and it worked.

You need two files.. an .html here you have the HTML elements and an .htc where you have the behavior descrtiption. I'll use INDEX.html for the elements and IMGS.htc for the behavior.

INDEX.HTML
<html><head>
<title>Test Behavior</title>
<style>
    IMG {
        behavior: url(imgs.htc);
    }
</style>
</head><body>
    <img src="test.jpg">
</body></html>


IMGS.HTC
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="msgit()" />

<SCRIPT LANGUAGE="JScript">
    function msgit() {
        alert("you are over a img!");
    }
</SCRIPT>

Man this will help you out for sure and thank you to coz you made try this tecnology that I had never tried :)

Good Luck :)



Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamic Buttons,SaveToolStrip, adding records KeviJay VB Databases Basics 2 May 28th, 2008 12:46 PM
Dynamic Buttons in PHP Rayne84 PHP How-To 0 March 16th, 2008 07:31 AM
Dynamic created buttons in Vb.Net remya1000 General .NET 1 December 6th, 2007 04:20 PM
dynamic buttons harpua Flash (all versions) 3 October 19th, 2004 07:33 PM
dynamic editable buttons on windows form? frankv25 Pro VB 6 2 March 19th, 2004 10:06 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.