Creating HTML buttons with images

Creating HTML buttons with images

ó $a->name - $a->date
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.

 

Meán na gcomhlán: -
In reply to Jacob Fraser

Re: Creating HTML buttons with images

ó $a->name - $a->date

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 Aoibh

In reply to Itamar Tzadok

Re: Creating HTML buttons with images

ó $a->name - $a->date

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

ó $a->name - $a->date

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.  Straois mhór  Thank you for your help.

In reply to Jacob Fraser

Re: Creating HTML buttons with images

ó $a->name - $a->date

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. Aoibh

Attachment userprofile-usehtmleditor.png
In reply to Jacob Fraser

Re: Creating HTML buttons with images

ó $a->name - $a->date

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

ó $a->name - $a->date
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. Caochadh And so we trust their content (Site administration -> Security ->Site policies; See image) Aoibh

Attachment admin-trust-content.png
In reply to Federico Botti

Re: Creating HTML buttons with images

ó $a->name - $a->date

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 Gruama

Hope you can help...

Cheers