mouseover image

[toyomaz]

I have been trying to create a mouseover image in a forum post.

I have tried several ways with no success.

The way I normally display images are

[url=addressofimage1][img]addressofimage1[/img][/url]

[url=addressofimage2][img]addressofimage2][/img][/url]
Both are the same image but image2 has some overlays of information.

Can someone here please help with bbcode so that when mouse is hovered over the image (image1), the additional information is displayed (image2).

Thanks in advance

[Todge]

I'm afraid you'll not be able to do this with BBCode alone, you'll need a javaScript element to make the change.

The BBCode part would be something like this..

[img class="imageflip" alt="addressofimage2"]addressofimage1[/img]

and you'll need this code snippet in the Global or Board Footer..

<script type="text/javascript">
    $(document).ready(function(){
        $('.imageflip').each(function(){
            $(this).mouseover(function(){
                var oimg=$(this).attr('src');
                $(this).attr('src',$(this).attr('alt'));
                $(this).mouseout(function(){
                    $(this).attr('src',oimg);
                });
            });
        });
    });
</script>

[toyomaz]

Hey Todge, Thanks so much for your quick reply.

When I open the forum editor to create a post, I do not see a global or board footer so im confused.
There is a box below the main message body which contains the "create post" button, this has the words The thread in which you are posting has no effects applied to it.

Where is the Global or Board footer so I can insert the snippet please ?

[Todge]

Nov 26, 2017 9:48:21 GMT -8 toyomaz said:

Hey Todge, Thanks so much for your quick reply.

When I open the forum editor to create a post, I do not see a global or board footer so im confused.
There is a box below the main message body which contains the "create post" button, this has the words The thread in which you are posting has no effects applied to it.

Where is the Global or Board footer so I can insert the snippet please ?

Click on 'Admin', in the menu bar, then click 'Structure' >> 'Headers & Footers' >> 'Global Header & Footer'..

You should get two text areas, the top being the header, and the bottom being the footer.

Copy & paste the JS code into the FOOTER area, 'Save Changes', then go back to your forum. You can now forget about that code, and post your images as you see fit.