Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
How to add rollover effect to image in a click macro? (SugarCube)
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:
Outside the brackets it works perfectly, but I can't seem to get it to work inside.
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.
Comments
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.