Creating HTML buttons with images

Creating HTML buttons with images

deur Jacob Fraser -
Getal antwoorde: 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.

 

Gemiddeld van beoordelings: -
In antwoord op Jacob Fraser

Re: Creating HTML buttons with images

deur 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 glimlag

Gemiddeld van beoordelings: -
In antwoord op Itamar Tzadok

Re: Creating HTML buttons with images

deur 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

Gemiddeld van beoordelings: -
In antwoord op Federico Botti

Re: Creating HTML buttons with images

deur 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.  groot glimlag  Thank you for your help.

Gemiddeld van beoordelings: -
In antwoord op Jacob Fraser

Re: Creating HTML buttons with images

deur 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. glimlag

Aanhangsel userprofile-usehtmleditor.png
Gemiddeld van beoordelings:Useful (1)
In antwoord op Jacob Fraser

Re: Creating HTML buttons with images

deur 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

Gemiddeld van beoordelings: -
In antwoord op Federico Botti

Re: Creating HTML buttons with images

deur 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. knipoog And so we trust their content (Site administration -> Security ->Site policies; See image) glimlag

Aanhangsel admin-trust-content.png
Gemiddeld van beoordelings:Useful (1)
In antwoord op Federico Botti

Re: Creating HTML buttons with images

deur 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 hartseer

Hope you can help...

Cheers

Gemiddeld van beoordelings: -