The Tree of Widsdom

智慧の樹

MediaFigTog

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

Type: Macro

Purpose: Embeds a hover-toggled image with caption

The MediaFigTog macro inserts a figure that toggles to another image during hover-over. Otherwise it’s the same as MediaImgTog.

Hover below to reveal BoxPress code

)^"><a href="#"><img src="../../../../../../img/$1" onmouseover="this.src='../../../../../../img/$2'" onmouseout="this.src='../../../../../../img/$1'" alt="Unlike MediaImg, MediaFig is a semantic <figure> element, and also includes a (mandatory) caption underneath the image." title="Unlike MediaImg, MediaFig is a semantic <figure> element, and also includes a (mandatory) caption underneath the image." class="img-responsive center-block '.replace("(

|

)", ""))^

MediaFigTog sample

This is the markup that is rendered below

^do(MediaFigTog, "sample.jpg", "sample_hover.jpg", "HOVER over the image above to toggle its content!")^

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.

HOVER over the image above to toggle its content!
HOVER over the image above to toggle its content!

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.

HOVER over the image above to toggle its content!
HOVER over the image above to toggle its content!