Creating HTML buttons with images

Creating HTML buttons with images

by Jacob Fraser -
Number of replies: 7

In doin' sum learnin' of HTML, I came across an indication of how I could create buttons using the <button> tag.  And I can successfully create buttons, buttons with images, buttons of different sizes, but cannot make them do anything, or specifically cannot make them hyperlink to other url's in the site.  I can create a webpage outside of moodle, with the code on it that functions correctly, but when I copy that code into Moodle, it is changed. 

This is the code that I input: (The x is our school site, thought it best not to publish)

<button onClick="window.location='http://x.net/web/asn.nsf'"><img src="http://x.net/file.php/74/images/ASNCoatofarms.png" height="165" width="135"/> </button>

This distinctly gives me a button, with the image, and I can click it and see it perform like a button, but not complete the request.  And when I toggle back or save, and revisit the HTML this is what Moodle says:

<button Xonclick="function onclick() { function onclick() { function onclick() { function onclick() { function onclick() { window.location='http://x.net/web/asn.nsf' } } } } }"><img src="http://x.net/file.php/74/images/ASNCoatofarms.png" width="135" height="165" /></button>

Any additional manipulations, like adding the address within the parentheses, has not yielded any results. 

My next step will be to just use rollover images, but there are some similar issues cropping up where the code is changed.  But that may be another ball of wax.

Any assistance would be appreciated.  Thank you.

 

Average of ratings: -
In reply to Jacob Fraser

Re: Creating HTML buttons with images

by Itamar Tzadok -

The editor filters are designed to filter any potentially offensive code. Disable the editor in your profile whenever adding/editing these buttons or any other html which involves scripting. hth smile

In reply to Itamar Tzadok

Re: Creating HTML buttons with images

by Federico Botti -

Hi guys,

@Itamar Tzadok: I believe that in spite of disabling the editor the moodle code filters any text introduced through its forms anyway. That make sense since the final user can disable the editor and could introduce malicious code all the time.

 

@Jacob Fraser: I tested your code in moodle 2.0.2+ (Build: 20110316) and i will ask you to try this code:

<button onclick="window.location='http://clarin.com.ar'"><img src="http://localhost/moodle20/" height="165" width="135" /> </button>

hope it helps!

 

Federico

In reply to Federico Botti

Re: Creating HTML buttons with images

by Jacob Fraser -

Hi gents,

Well thank you for the prompt replies.  I see what Itamar might be referring to, but I have don't have significant control over the filters as a teacher, but that is something we could look into.  The first question I'll be asked is about the security threats associated with allowing scripting code to be applied from all of our teachers (assuming that's the admin filter restrictions are what you are referring to).  So if you have any advice on that, but it might qualify as a new thread.

And Federico, I did try using your code, but still achieves the same result and Moodle alters the code.  If the filters are at fault, then the mucky-mucks on high will have to make that decision.  big grin  Thank you for your help.

In reply to Jacob Fraser

Re: Creating HTML buttons with images

by Itamar Tzadok -

Provided content is trusted (see below) you can disable the editor in your profile (see image for illustratation; set to 'use standard webforms') so that when you go to edit the label/block/summary/etc. it will open in a standard web form and your code won't be mucked up. smile

Attachment userprofile-usehtmleditor.png
Average of ratings: Useful (1)
In reply to Jacob Fraser

Re: Creating HTML buttons with images

by Federico Botti -

Hi all,

@jacob are you running moodle 1.9.x? Cause the php library implemented to solve the filtering problem is different from 1.9.x version to 2.0.x version.

@itamar: you are right. If you trust all of your content producers it would be ok to enable trust text. For the institutions where we cannot guarranteed 100% the content maybe it's better not to activate that feature for security reasons.

Federico

In reply to Federico Botti

Re: Creating HTML buttons with images

by Itamar Tzadok -
That make sense since the final user can disable the editor and could introduce malicious code all the time.

Yes, but we would like to think that our instructors wouls not inject malicious code even sometimes. wink And so we trust their content (Site administration -> Security ->Site policies; See image) smile

Attachment admin-trust-content.png
Average of ratings: Useful (1)
In reply to Federico Botti

Re: Creating HTML buttons with images

by Steve Bear -

Hi guys, I have been able to create a button with an image using Federico's example... what would I need to change if I wanted the window to appear in a new window instead of the 'parent'.  I've tried a few different variations of html but can't get it to work sad

Hope you can help...

Cheers