using onMouseOver function with images

using onMouseOver function with images

by Sylvain Houmeau -
Number of replies: 16
Hi there,
Running Moodle 1.9
This is what I am trying to do: create a link to a webpage via a picture. I know this sounds easy, and i can actually do it fairly easily. What I can't do is: have the picture change when the mouse moves over the picture.
I have been looking around for the right code to use with onMouseOver and onMouseOut functions, but it doesn't seem to be working right.

This is the last code i have used:
<A HREF="http://www.mysite/mod/resource/view.php?id=244" onMouseOver="img1.src='http://www.mysite/file.php/16/Search2.png' " onMouseOut="img1.src='http://www.mysite/file.php/16/Search.png' "><IMG NAME="img1" WIDTH=100 HEIGHT=100 BORDER=0 SRC="" ALT="text"><BR></A>

and it works when i am editing (it works fine with the wysywyg editor)

but then when i save it, it won't work anymore. I go back to the editor and the code has changed to:
<a onmouseover="function anonymous() { function anonymous() { img1.src='http://www.mysite/file.php/16/Search2.png' } }" onmouseout="function anonymous() { function anonymous() { img1.src='http://www.mysite/file.php/16/Search.png' } }" href="http://www.mysite/mod/resource/view.php?id=244"><img height="100" alt="text" src="http://www.mysite/file.php/16/Search.png" width="100" border="0" name="img1" /><br /></a>

I dont' get it... anyone?
Thank you for your help.
Average of ratings: -
In reply to Sylvain Houmeau

Re: using onMouseOver function with images

by Itamar Tzadok -
Yes, the HTML filters tends to muck up the code. When working directly with the code it is recommended to turn the editor off (in your profile) and use web forms. Alternatively you can keep the code in an external file and use a decent editor to edit it and whenever you want to make a change make it in that file and then copy the code into Moodle.
Hope that helps. smile
Average of ratings: -
In reply to Itamar Tzadok

Re: using onMouseOver function with images

by Sylvain Houmeau -
thanks for the reply. I actually used notepad2 to edit my code and then i copy directly in moodle. However, i don't think i have grasped the whole meaning of :"When working directly with the code it is recommended to turn the editor off (in your profile) and use web forms."
Could you give me more details?
Thanks again.
Average of ratings: -
In reply to Itamar Tzadok

Re: using onMouseOver function with images

by Sylvain Houmeau -
I made more testing:
  • my code (original code) works fine in a webpage composed with moodle... as long as i do not go back to the html editor of the page within moodle.
  • the code (original code) will not work in a label. or actually I should say: i copy the code in the editor, i then turn on the wysywyg editor and it works. I will then click on the save button... and the result is not working
  • I have gone back into the code (code 2 that is, because it should be original code but at that point it has already been altered) of the webpage - that is within moodle - and copied and pasted that code 2 in my label but it won't work either.
  • it seems the code in the webpage is being altered too but not as much as in the label (where you will see 3 or 4 times "function anonymous ()" as opposed to only 1 in the webpage - see previous post)
Has anyone had this problem before? how did you manage?
Average of ratings: -
In reply to Sylvain Houmeau

Re: using onMouseOver function with images

by Mauno Korpelainen -

This is one of those old htmlarea bugs: read details from

http://tracker.moodle.org/browse/MDL-9963

Click your name - select tab Edit profile and "When editing text - Use standard web forms", then you can edit content without htmlarea...

Average of ratings: -
In reply to Mauno Korpelainen

Re: using onMouseOver function with images

by Sylvain Houmeau -
Thanks for the reply, but this still doesn't work!
Same results as before. Webpage ok, label not ok. And it is the label that means more to my website.
I will keep reading the tracker, but if anyone has more ideas, i'm interested!

Thanks again.
Average of ratings: -
In reply to Sylvain Houmeau

Re: using onMouseOver function with images

by Mauno Korpelainen -
Try to use those event handlers for the image and not for the link, for example

<a title="test" href="http://moodle.org"><img alt="test" onmouseout="src='http://moodle.org/theme/moodleorange/hat.gif';" onmouseover="src='http://moodle.org/theme/moodleorange/community.gif';" src="http://moodle.org/theme/moodleorange/hat.gif" title="test" /></a>


Average of ratings: -
In reply to Mauno Korpelainen

Re: using onMouseOver function with images

by Sylvain Houmeau -
thank you.
I tried your script but same result again.
I think i will just use that onMouseOver on a webpage and not on labels... unfortunately.
Thank you again
Average of ratings: -
In reply to Sylvain Houmeau

Re: using onMouseOver function with images

by Giovanni Borzi -
There is a X in front of onMouseOver, that is why
XonMouseOver does not work.

This a filter to prevent users to insert malicious javascripts in the content they post.

The filter is anyway too zealous: infact it filters out the content inserted by the admin user, even if the trusted content button is checked in:
security > site policies

I believe it should not filter it out.

This happens when inserting a label resource in Moodle 1.8

The behaviour does not change if the htmlArea is turned off.

regards

Giovanni
Average of ratings: -
In reply to Giovanni Borzi

Re: using onMouseOver function with images

by Mauno Korpelainen -

I don't know if some version of 1.8 or 1.9 is working in a different way but I have used javascripts all the time in labels and for example

<a title="test" href="http://moodle.org"><img alt="test" onmouseout="src='http://moodle.org/theme/moodleorange/hat.gif';" onmouseover="src='http://moodle.org/theme/moodleorange/community.gif';" src="http://moodle.org/theme/moodleorange/hat.gif" title="test" /></a>

without X at the beginning of onmouseover works in my labels (just tested with the latest 1.9.3) - but you may not use HTMLArea to add or edit those tags. "Enable Trusted Content" is not checked - and I am the administrator of my test sites.

The easiest way I usually use is to click my name from the top right corner to edit my profile - Edit profile - When using editor->Use standard web forms - Update profile ... add a resource / Insert a label - Add the code to textarea of Label text - Save and return to the course. This way you can even edit the code and javascripts.

If you want to use HTMLArea you can also Insert a lable (NEW), click <>, paste the code, Save and return t the course but if you click the second time <> before saving HTMLArea goes to WYSIWYG mode and adds those anonymous functions mentioned in bug tracker (each browser has a different way to handle anonymous functions and they should be deleted from code before saving but HTMLArea can't do this - TinyMCE in moodle 2.0 can). So if you want to use HTMLArea with <> you may not click <> again or try to edit the content with HTMLArea because the default state of HTMLArea is WYSIWYG mode, you may only paste the code once in text mode and save. That's the reason why using standard web forms from profile is easier.

This is a bug of HTMLArea - not a filter bug

Average of ratings: -
In reply to Mauno Korpelainen

Re: using onMouseOver function with images

by Mauno Korpelainen -

And I tested this also with the latest moodle 2.0 tinymce to make sure that it is not a filter issue - tinymce on/off/on - tinymce does not add anonymous function and no filter changed the javascripts.

On the other hand moodle 2.0 is still not ready for production sites - maybe I should try to fix the code in HTMLArea ( http://tracker.moodle.org/browse/MDL-9963 ) ... it used to work better in old moodle 1.6.3...

Average of ratings: -
In reply to Mauno Korpelainen

Re: using onMouseOver function with images

by Mauno Korpelainen -
I found the cause of the changed behaviour of event handlers - and tested the old moodle 1.6.3+ htmlarea.php in moodle 1.9.3+ that worked ok, did not create anonymous functions and onmouseover effects could be added with htmlarea so that WYSIWYG mode did not change them. Also filters worked ok (X was added to forum posts etc) but there have been many other bug fixes since that file and the priority of this bug is not probably very high in bug tracker. Some comments in http://tracker.moodle.org/browse/MDL-9963
Average of ratings: -
In reply to Mauno Korpelainen

Re: using onMouseOver function with images

by Giovanni Borzi -
Dear Mauno

I am too the admin of my sites.
I tried without success several options, for example:
- disabled htmlArea in my profile, and repasted the code in the label as plain html.
- enable the trusted content button
- enabled htmlArea and pasted the correct HTML into the section

The fact that disabling htmlArea did not solve the issue convinced me that this is either a Moodle filter issue or a PHP (?) issue.

I did some research on the Internet, to no avail.

I use 1.8.3 right now.

Keep up the good work!

Regards

Giovanni
Average of ratings: Useful (1)
In reply to Giovanni Borzi

Re: using onMouseOver function with images

by Mauno Korpelainen -

Giovanni,

we might be right - both of us. Maybe you have some non default filter enabled that is not enabled on any of my sites.

Can you rename your current lib/editor/htmlarea/htmlarea.php and test if the attached 1.6.3 version of htmlarea.php works on your site? After test you could take the current version of htmlarea.php back.

If 1.6.3 version does work can I visit your site with some temporary teacher user name and password (temporary course that is visible only for testing) and test adding a simple onmouseover effect with your current htmlarea.php (moodle 1.8.3) ?

You can find my email from my profile.

Average of ratings: -
In reply to Mauno Korpelainen

Re: using onMouseOver function with images

by Mauno Korpelainen -
I tested this attached (example.txt) also with local moodle 1.8.7 and tried to tick/untick some filters but the script still worked nicely if htmlarea is not used in WYSIWYG mode (toolbar usable) when javascript is saved. In moodle 1.6.3 htmlarea.php adding and editing javascript worked also when saved in WYSIWYG mode.
Average of ratings: -
In reply to Mauno Korpelainen

Re: using onMouseOver function with images

by Giovanni Borzi -
Dear Mauno

thank you for your time and help. I am quite busy these days, will be back on this (little) issue next week. Anyway I posted my website in my profile. The not working label is in the front page in the right side menu (the bookmark label).

regards

Giovanni
Average of ratings: -
In reply to Giovanni Borzi

Re: using onMouseOver function with images

by Deniz Olcay -

has this issue been resolved? is it possible to use onmouse over within the WYSIWYG editor in moodle? 

 

If so, what is the html code i need to use to do this?

Average of ratings: -