MediaImgTog

^do( MediaImgTog, filename1, filename2, title, [class] )^

Type: Macro

Purpose: Embeds a hover-toggled image (no caption)

The MediaImgTog macro inserts an captionless image that toggles to another image during hover-over. Filename1 is displayed until you hover over; then it is replaced by filename2. Arguments are the same as MediaImg (except their index has been pushed forward by one):

  • Arg4 (class): The default classes for your image are img-responsive img-center img-well, meaning that the image will be centered, responsive, and in a well. Override this with convenience classes for image position (img-left, img-center, img-right) and size (img-large, img-medium, img-small, and img-xs). Adding any override will remove img-well effect. (Thus, to only remove the well, use a redundant img-center.) Adding img-left or img-right will invoke img-medium. Then stylize with img-well or img-shadow. Ultimate convince with minimal intervention!
  • Arg5 (href): Unless an optional 4th argument is given, the image links to a full resolution version in another tab.
  • Arg6 (width): Optional 5th argument fixes the width.

MediaImgTog sample

This is the markup that is rendered below

^do(MediaImgTog, "sample.jpg", "sample_hover.jpg", "I’ve included some text here for alt and title, but it’s optional. You’ll see this text as a tooltip.")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

I’ve included some text here for alt and title, but it’s optional. You’ll see this text as a tooltip.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.