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:
<<click [img[testimage1]] >>
<<replace "#test">>test text<</replace>>
To this?:
<<click <img src="testimage1" onmouseover="this.src='testimage2'" onmouseout="this.src='testimage1'"/> >>
<<replace "#test">>test text<</replace>>

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


  • 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.
  • 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
Sign In or Register to comment.