SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    LaGrange, Georgia
    3 Post(s)
    0 Thread(s)

    How to do this within Prototype/Scriptaculous framework (or similar)?

    I have a client who wants a popup graphic on hover -- when a customer rolls over a product graphic they want the supersized image to appear.

    See example below:

    Has anyone done this using a framework like prototype or scriptaculous? I'd rather not code it from scratch.

    Any recommendations?

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Mountain View
    0 Post(s)
    0 Thread(s)
    Hey, cool website for fancy dresses
    There is in fact the ever popular Lightbox which was developed using Proto/Scriptac. But this can simply be done with any framework since you're going the framework route
    Your core ingredients really only need to include a getXY function, a setXY, and a little dandy work of creating an element.

    Consider the logic behind it.
    function get(el) {
      return document.getElementById(el);
    function getXY(el) {
      // ...
      return [x,  y];
    function setXY(el) {
      // set's xy of element
    var example = get('example');
    var previewEl = get('preview');
    // use Prototype's Event.observe, YUI's addListener, or jQuery's 'hover'
    addListener(example, 'mouseover', function() {
      var xy = getXY(this);
      // find the right x coordinate to set
      var xToSet = xy[0] + this.offsetWidth;
      // then set the preview
      setXY(previewEl, [x, xy[1]]);
      // show it = 'block';
    addListener(example, 'mouseout', function() {
      // hide it = 'none';


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts