The first thing I notice is that you're performing some extra work by
getting all of the images on the page and then looking for the ones that
have the necessary tooltip attribute. Instead, I would do this to get
only those which have the tooltip attribute:
var images = $$("img[tooltip]");
Then, rather than storing a reference to that list of images, I'd the
each() function to iterate through the list and apply your actions:
$$("img[tooltip]").each(function(image) {
/* ... do tooltip stuff ... */
});
It looks to me that the reason your tooltips always show the last one's
information is because the myProductID gets overwritten by each
iteration of the loop. It might be more appropriate, though I'm sure
someone else will correct me if I'm wrong, to pass only the element
itself to the show method of your tooltip, and then you can use the
readAttribute() function within show() to get at the productID for the
specified element:
$$("img[tooltip]).each(function(image) {
image.observe("mouseover", function() {
productTooltip.show(image) });
image.observe("mouseout", function() { productTooltip.hide })
});
And the last thing I think you should be able to do, then, is bind the
functions to the image rather than pass it around. I don't know if
you're familiar with the bind() function of prototype, but this looks
like a good time to learn about it if you don't. Something like this
will probably be what you're looking for:
$$("img[tooltip]").each(function(image) {
image.observe("mouseover", productTooltip.show.bind(image));
image.observe("mouseout", productTooltip.hide.bind(image));
}
What the bind() function does is makes sure that the called function is
executed using the scope of the object which is passed to the bind()
function as a parameter, in this case, the image. In other words,
within the show() and hide() functions you can use the "this" keyword to
refer to the image to which the function was bound rather than having to
actually pass around references to the images
themselves. Thus, your show() function would be able to do this ...
var show = function() {
var myProductID = this.readAttribute("tooltip");
/* ... do other stuff ... */
}
... instead of having to be passed the product ID explicitly.
- Dash -
Cgnost wrote:
> I've created a custom tooltip function to be used on a website. I'm
> trying to code it in such a way that by giving any img tag an
> attribute with tooltip="productid" it will attach the correct
> onmouseover and onmouseout event.
>
> Here is the code:
>
> loadEvents: function() {
> var images = document.getElementsByTagName("img");
> var myElement = null;
> var myProductID = 0;
> for (var i = 0; i < images.length; i++) {
> myElement = images[i];
> if (myElement.hasAttribute("tooltip")) {
> myProductID = myElement.getAttribute("tooltip");
> Event.observe(myElement, 'mouseover', function()
> { productTooltip.show(myProductID,myElement); });
> Event.observe(myElement, 'mouseout', function()
> { productTooltip.hide(); });
> }
> }
> }
>
> What this is doing is looping through all the imgs on the page and
> finding any of the ones that have the tooltip attribute, then usinv
> Event.observe to attach the onmouseover and onmouseout events. But the
> problem is with the onmouseover I need to pass it two arguments, the
> product ID which I get from the tooltip attribute and then I need to
> pass it a reference to that particular element so my show() function
> knows how to position the tooltip.
>
> After this function is run, it correctly attaches an onmouseover and
> onmouseout event to all of the neccessary images that have the tooltip
> attribute, except it passes the product ID and element reference of
> the last tooltip image that was processed. So if I had 3 tooltip
> images on the page, all 3 mouseovers will run the show() function
> using the third images ID and element reference.
>
>
> >
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
