Mouseover Image Swap in Twine

Twine Version: 1.4.2
Story Format: Sugarcube2

I’m trying to a have section where the images are clickable links but when the Player’s mouse hovers over the image it will change to a different one. (In this case I have a black and white version and it will swap to color).

EDIT: I was able to get the mouseover code to work using -

.explore1 img:hover{
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: [img[Explore Lvl1]] no-repeat;
width: 100px;
height: 100px;
padding-left: 100px;

and wrapping the image in @@.explore1;image@@

However, now I’m finding that whenever the images swap the new image pushes anything below it down a space. Which doesn’t make sense because the images are exactly the same in terms of pixels. I’ve tried using “” to see if it would help but that only make the image or text below it come CLOSER to the swapped image.

It’s a bit difficult to diagnose without seeing exactly what’s going on. Would you be able to make a simple example of just that problem and post a link to it? You can use SendGB to provide a temporary download (click the “link” icon in the lower-right).

In the meantime, I’d recommend trying to use the “Developer Tools” window to try to diagnose/fix the issue. With the game open in your browser, just right-click on the image, choose “Inspect Element”, and then you can try playing around with the CSS in the “Style” section of that window.

Hope that helps. :grinning:

I think the issue is that you’re setting it to display: block. The default display value of the img tag is inline. The difference between the two is that inline lets text follow it on the same line (like a span) and block doesn’t.

Thanks to you HiEv I was able to get it to work. I just had to approach it a little differently.

I ended up using -
.explore1 {
display: block;
*width: 100px; /*width of the image /
height: 100px; / height of the image /
background:[img[Explore Lvl1BW]] no-repeat;
position: relative;
z-index: 2;
.explore1:hover {
background: [img[Explore Lvl1]] no-repeat;
position: relative;
z-index: 2;

Which worked and didn’t make everything else go wonky. The next problem I had was that I couldn’t really make that clickable (not that I could see with markups) so I created a transparent holder image that was the same size as the images and I used that z thingie to have it go under the swapping image.

.holder img{
position: absolute;
z-index: 1;

then I just tagged the image like so: @@.holder;.explore1;[img[Text|Holder][INTRODUCTION]]@@

I wanted to include that for anyone else who needs in the future. Hopefully that’s a sustainable workaround. So far I haven’t had any troubles. Thanks again!