Mouse Over BBCode

[BBCode Bot]

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]

[wijo]

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.

[KukY13]

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?

[wijo]

Yes exactly.

[KukY13]

Yes exactly.

Ok. Wait until I write the code...

[KukY13]

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.

[wijo]

Super Thank you very much!