Thread: MouseImage BBCode not working

^ is there a technical reason it doesn't work in the forums?

The problem here is that the <b></b> parts get added automatically in the forums areas, even though they are not in the actual bbcode. I'm not currently aware of how to prevent this from happening so that it can work on the forums.

Edit:
I have adjusted to code to the above suggestion that included the preloading request and it seems to work fine for both wiki and forums. Please feel free to test this and make sure.

Originally Posted by Kotono

I have adjusted to code to the above suggestion that included the preloading request and it seems to work fine for both wiki and forums. Please feel free to test this and make sure.

Thanks. A practical demonstration of the code's use in the forum can be found in the second post here if you are interested.

Originally Posted by Kotono

The problem here is that the <b></b> parts get added automatically in the forums areas, even though they are not in the actual bbcode. I'm not currently aware of how to prevent this from happening so that it can work on the forums.

Edit:
I have adjusted to code to the above suggestion that included the preloading request and it seems to work fine for both wiki and forums. Please feel free to test this and make sure.

Do you think we can add some CSS transitions to it? Actually, I think you can do the switch without using an inline handler at all and just use animations: JSFiddle. Though I'm not sure if this will work in the forums.

Originally Posted by MiqDoloran

Do you think we can add some CSS transitions to it? Actually, I think you can do the switch without using an inline handler at all and just use animations: JSFiddle. Though I'm not sure if this will work in the forums.

That method unfortunately has a few issues. For instance, it relies upon the default image being as larger or larger than the mouseover image in order to conceal it. If the default image is either smaller or contains transparency it will show the second image through it. Admittedly, this could be handled by making the second image innately transparent, and having it fade in while the other fades out. However, there is then the second issue, which is that absolute positioning means the images do not take up space in the document flow. If you were to place text following the images, it will be placed behind them. This can be handled via javascript getting the dimensions of the images and assigning them to the span, but that begins to get more complicated (and depending on the method used, may run into problems if the images are slow in loading). There is also the arguable issue that the transition is tied to hovering over the default image rather than the span, which could potentially be problematic if the images are of sufficiently different size.

That isn't to say such a method couldn't be worked out to utilize the fade in/out, but it would need to be more complex.

I was not able to find a way to make it work so far. The best success so far just made the images vanish and not come back after the first mouseover.

Originally Posted by NotThatGuy

That method unfortunately has a few issues. For instance, it relies upon the default image being as larger or larger than the mouseover image in order to conceal it. If the default image is either smaller or contains transparency it will show the second image through it. Admittedly, this could be handled by making the second image innately transparent, and having it fade in while the other fades out. However, there is then the second issue, which is that absolute positioning means the images do not take up space in the document flow. If you were to place text following the images, it will be placed behind them. This can be handled via javascript getting the dimensions of the images and assigning them to the span, but that begins to get more complicated (and depending on the method used, may run into problems if the images are slow in loading). There is also the arguable issue that the transition is tied to hovering over the default image rather than the span, which could potentially be problematic if the images are of sufficiently different size.

That isn't to say such a method couldn't be worked out to utilize the fade in/out, but it would need to be more complex.

Yeah, it wouldn't work well with variable sized images. The whole BBCode system is really restrictive so it's kinda hard to make it work for all cases. I experimented with it a bit more though, and managed to get something which seems to work by using event listeners combined with animations: https://jsfiddle.net/cpmam9jt/4/.

Basically involves changing the opacity on mouse enter/leave and attaching transition listeners to flip the other image's opacity. At first I tried this:

Code:

<span
  class="hbc-mo"
  onmouseover="this.firstElementChild.style.opacity = 0;"
  onmouseout="this.lastElementChild.style.opacity = 0;"
>
  <img
    class="hbc-mo__init"
    src="http://lorempixel.com/400/200/city/1/"
    style="display: initial;"
  >
  <img
    class="hbc-mo__alt"
    src="http://lorempixel.com/600/300/city/2/"
    style="display: none; opacity: 0;"
  >
</span>

but then it kept switching the images while I hovered over the span. Didn't know wtf was happening then I ended up switching it to mouseleave instead. I guess it's cause the images were registering mouseout events whenever I switch them out? fuck me