For Images


In order to support image switching in real time, jqDock() supports (since v1.3) a small alternate set of options for use solely on images.

When passed a selection of elements that consists solely of IMG elements that are already part of a jqDock menu, jqDock() will accept 2 options, that effect a change of an image’s source path.

  • src : string or function
    The new source path for the ‘at-rest’ image.
  • altsrc : string or function
    The new source path for the expanded image.

Example (strings):

Example (functions):

If you provide a function, that function will be called for each image in the jQuery selection object; it will be given the scope (this) of the relevant IMG element, and it will be passed 2 arguments: the current value of the relevant image path, and the type of path (ie. ‘src’ or ‘altsrc’). It is expected to return a string of the new (or possibly current?) image path.
This means that providing the same function for both ‘src’ and altsrc’, for a selection object containing 5 images, will result in 10 calls in total to the function (5 images, once each for ‘src’ and altsrc’ types).

[ You can specify a string for one property and a function for the other, eg ‘src’ as a string and ‘altsrc’ as a function. ]

Note that ‘src’ refers to the image that is used when the Dock as ‘at rest’; the ‘altsrc’ image is always the one that is used for any expansion.

I have provided an example that uses these alternate options – Change image source.

Important! Even though you may not have initialised the dock with alternate larger images (see the Dock’s source option), jqDock will still have 2 separate internal variables: one for the ‘at-rest’ image path, and one for the expanding image path. This means that if you change one of the paths, it is highly likely (but not inevitable!) that you should be changing both.

HTML5 data- Attributes2.0

As of v2.0, a data-jqdock-altsrc attribute may be used on any image, as an alternative to, and at a higher priority than, specifying an image path in the ‘alt’ attribute. For example:

 Posted by at 5:22 pm

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">