Elxis CMS Forum

Support => Technical support => Topic started by: Amigamerlin on November 19, 2012, 10:45:08

Title: How to use tinymce "onmouseover" event.
Post by: Amigamerlin on November 19, 2012, 10:45:08

Hello you all,
anyone can explain me how sintax to use "onmouseover" tinymce event?
I have an image with link and I would like to show another image when mouse come over this image.
Thank you you all.
 

Title: Re: How to use tinymce "onmouseover" event.
Post by: xmanhattan on November 19, 2012, 14:58:13

Hello Amigamerlin,

In the edit content items page where you have your image, click the insert/edit image icon.
In the advance tab, check Alternative image, then put a link into for mouse over and the return link of either the original image or another into for mouse out.

Title: Re: How to use tinymce "onmouseover" event.
Post by: datahell on November 19, 2012, 15:01:58

You need some javascript and you can not write javascript in the editor.
Do this:
switch editor into html mode add an onmouseover event on the element you want, for example:
<img src="http://www.example.com/images/mydir/original.png" onmouseover="dosomething(this, 'hello.png')" onmouseout="dosomething(this, 'original.png')" />

Create dosomething function and place it in a js file that it is included by your template.

function dosomething (obj, img) {
     obj.src = 'http://www.example.com/images/mydir/'+img;
}

Title: Re: How to use tinymce "onmouseover" event.
Post by: xmanhattan on November 19, 2012, 17:01:44

The tinymce editor has it built in.

Title: Re: How to use tinymce "onmouseover" event.
Post by: datahell on November 19, 2012, 19:11:15

Oh sorry, I am used to do everything by hand :)

Title: Re: How to use tinymce "onmouseover" event.
Post by: Amigamerlin on November 19, 2012, 19:15:22

Thank you datahell, xmanhattan !!!
You all are precious !!!