PhpBB3 BBCodes

Posted: **06 Mar 2010, 10:17**

Mouse Over BBCode

Author: TechnoTriz
Description: The Mouse Over BBCode allows You To Post An Image That Changes Into Another Image When Mouse Is Hovered Above It.

BBCode:

Code: Select all

[moimg={URL1}]{URL2}[/moimg]

HTML:

Code: Select all

<img onmouseover="Javascript: this.firstsrc=
this.getAttribute('src'); this.secondsrc=
'{URL2}'; this.setAttribute('src',this.
secondsrc);" alt="" onmouseout="Javascript: this.setAttribute
('src',this.firstsrc);" src="{URL1}" />

Helpline:

Code: Select all

MoImg: [moimg=(first img url)](2nd image url)[/moimg]

Example:

Code: Select all

[moimg=http://www.phpbb3bbcodes.com/images/billede16lille.jpg]http://www.phpbb3bbcodes.com/images/billede8lille.jpg[/moimg]

Demo:
[moimg=images/billede16lille.jpg]images/billede8lille.jpg[/moimg]

Posted: **09 Jul 2010, 13:08**

Is it possible to change the code with a resized format of the image. So the showed image is (with bbcode) resized (as in: viewtopic.php?f=2&t=217) and when mouseover the image will be shown in original size.

Posted: **09 Jul 2010, 13:13**

wijo » 09 Jul 2010, 13:08 wrote:Is it possible to change the code with a resized format of the image. So the showed image is (with bbcode) resized (as in: viewtopic.php?f=2&t=217) and when mouseover the image will be shown in original size.

So a smaller picture is displayed at first, and on mouse-over, it is displayed in it's full size?

Posted: **09 Jul 2010, 15:09**

Yes exactly.

Posted: **09 Jul 2010, 15:15**

wijo » 09 Jul 2010, 15:09 wrote:Yes exactly.

Ok. Wait until I write the code...

Posted: **09 Jul 2010, 15:34**

Code: Select all

[imgres]{URL}[/imgres]

Code: Select all

<img width="150" src="{URL}" onmouseover="this.style.width='100%'" onmouseout="this.style.width='150px'">

It is a 150px width thumbnail, and on mouse-over it scretches itself in width as much as it can.

Posted: **09 Jul 2010, 15:49**

Super

Thank you very much!

PhpBB3 BBCodes

Mouse Over BBCode

Mouse Over BBCode

Re: Mouse Over BBCode

Re: Mouse Over BBCode

Re: Mouse Over BBCode

Re: Mouse Over BBCode

Re: Mouse Over BBCode

Re: Mouse Over BBCode