How to add rollover effect to image in a click macro? (SugarCube)

oldshep168

Using an image as a link/button is easy enough in Sugarcube 2. However, I'm having trouble setting an image with a rollover effect as a link.

In terms of code, how would I go from something like this:

<<click [img[testimage1]] >>
<<replace "#test">>test text<</replace>>
<</click>>

To this?:

<<click <img src="testimage1" onmouseover="this.src='testimage2'" onmouseout="this.src='testimage1'"/> >>
<<replace "#test">>test text<</replace>>
<</click>>

Outside the brackets it works perfectly, but I can't seem to get it to work inside.

greyelf

This css-tricks article explains how to use a CSS hover rule to replace the image being shown within an img element.

First you need to identify the img element, and you can do that by wrapping the <<click>> macro in a span with a class like so.

@

Next you need to reference the image in your CSS, which is easy because SugarCube's image markup links work there as well.

.someclassname a img:hover {
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: [img[testimage2]] no-repeat;
	width: 160px; /* Width of new image */
	height: 160px; /* Height of new image */
	padding-left: 160px; /* Equal to width of new image */
}

Obviously you should change the .someclassname class name used in the above with a more meaningful one.

oldshep168

Thanks! I've been using a silly workaround using both desired images as the background of a div wrapped around the <<click>> and a transparent image as the link. Not quite as elegant as your method :P