+ Reply to Thread
Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1

    MouseImage BBCode not working

    So, I was looking through the BBCode options here, when I noticed the MouseImage code. Intrigue, I decided to test out the [MO=Option]Value[/MO] tag to see how it worked, given the sample there was not very helpful. As I soon discovered, provided you use an img url in place of option, the result will display that image, however the selection for value seemed to be ignored.

    Looking at the page's html, I discovered the problem. If add the following to a post:
    [MO=http://harem-battle.club/images/vNulletin/statusicon/forum_old-48.png]http://harem-battle.club/images/vNulletin/statusicon/forum_new-48.png[/MO]
    I get:

    This has the html code:
    Code:
    <img onmouseover="Javascript<b></b>: this.firstsrc= 
    this.getAttribute('src'); this.secondsrc=
    'http://harem-battle.club/images/vNulletin/statusicon/forum_new-48.png'; this.setAttribute('src',this.
    secondsrc);" alt="" onmouseout="Javascript<b></b>: this.setAttribute
    ('src',this.firstsrc);" src="http://harem-battle.club/images/vNulletin/statusicon/forum_old-48.png">
    The problem here is the "Javascript<b></b>: " in the onmouseover and onmouseout attributes. If this is removed, the code works as intended, though I suspect it would be more intuitive to reverse which image is the default and which is the one seen when moused over.

    If this could be fixed, it would be appreciated.


  2. #2

    Join Date
    Aug 2015
    Location
    がいじん市
    Posts
    748
    Credits
    519
    It works fine on the wiki. Might be some vBulletin issue. On a side note it would be great if the BBCode was modified to load both images at the same time. Right now there's a delay when mousing over. Mentioned this to @Tomaa a long time ago but I forgot what he said about it, lel

    Also, want to request a nice fade transition when mousing over.
    にせがいじん

  3. #3
    Quote Originally Posted by MiqDoloran View Post
    On a side note it would be great if the BBCode was modified to load both images at the same time. Right now there's a delay when mousing over. Mentioned this to @Tomaa a long time ago but I forgot what he said about it, lel
    Pretty sure this could be handled by changing the code to something like:
    Code:
    <span onmouseover="this.lastElementChild.style.display = 'inline';
    this.firstElementChild.style.display = 'none';" onmouseout="this.firstElementChild.style.display = 'inline';
    this.lastElementChild.style.display = 'none';">
    <img style="display: inline;" alt="" src="http://harem-battle.club/images/vNulletin/statusicon/forum_old-48.png">
    <img style="display: none;" alt="" src="http://harem-battle.club/images/vNulletin/statusicon/forum_new-48.png">
    </span>
    Images set to display: none should still load, they just won't be rendered until such a time as the display is set to something that renders them (such as inline).

  4. #4
    This code was ONLY made to be used in the wiki. It was never looked into for making this a forum option.

  5. #5
    Quote Originally Posted by Kotono View Post
    This code was ONLY made to be used in the wiki. It was never looked into for making this a forum option.
    Would it be possible to set it up to work on the forum? There are contexts in which it could be handy. As an offhand example based on what I had considered using it for: Posting unit icons from Agis that toggle between the normal icon and the awakened one on hover.

  6. #6

    Join Date
    Aug 2015
    Location
    がいじん市
    Posts
    748
    Credits
    519
    ^ is there a technical reason it doesn't work in the forums?
    にせがいじん

  7. #7
    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.
    Last edited by Kotono; 07-10-2017 at 01:26 PM.

  8. #8
    Quote Originally Posted by Kotono View Post
    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.

  9. #9

    Join Date
    Aug 2015
    Location
    がいじん市
    Posts
    748
    Credits
    519
    Quote Originally Posted by Kotono View Post
    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.
    にせがいじん

  10. #10
    Quote Originally Posted by MiqDoloran View Post
    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.

Posting Permissions

  • You may post new threads
  • You may post replies
  • You may not post attachments
  • You may not edit your posts
  •