I'm trying to insert a rollover image in a Moodle page. I have code that works on an ordinary page outside Moodle (http://83.70.181.166/rollover.html ), but I cannot get it to work in a Moodle page. Strange thing is, when I am in html view in the editor in Moodle, the rollover feature works perfectly, but won't when I save and view the page. When I go back into the page, most of the code I put in has gone.
Thanks,
Matt
Hello Joseph,
Yes, it is Javascript. I am the admin of the site, and have direct access to the server, so would be interested to know how to authorise the use of Javascript. I managed to get the page working (without understanding how or why!), but if I have to go back and edit the page for any reason, the rollover will stop working. Then I have to go back in and paste the code again. All will work fine until I edit the page again for any reason.
I'm using version 1.7, xampp, Windows XP. The source code that produced the page can be seen at http://83.70.181.166/rollover.html, which is outside Moodle. I've given you a username and password if you get a minute to look at the actual page inside Moodle. The image is on the bottom right of that page, and is working (at the moment!). I'll email the login.
Thanks for your help,
Matt
Hi Matt,
you have two possible ways to use javascript without changing anything in moodle:
1) place your javascript to header.html (or footer.html) of your theme
or
2) use iframe tags in editor and place link to a javascript file or html document using javascript between iframe tags. In editor press <> and paste <iframe
src ="http://83.70.181.166/rollover.html"
width="100%">
</iframe>
I have got both working fine, you may add some extra tags to iframe, for example height. That link you gave did not work however when I looked it...images are not in site files (folder 1)
Hello Mauno,
Thanks for that. The </iframe> worked a treat on a test page. I had already taken a chance and pasted some of the code into the header file:
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById; return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
The rest of the code, I inserted into the page itself:
<body onLoad="MM_preloadImages('http://83.70.181.166/moodle/file.php/8/clutch/diaphragminw.jpg')">
<p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','http://83.70.181.166/moodle/file.php/8/clutch/diaphragminw.jpg',1)"><img src="http://83.70.181.166/moodle/file.php/8/clutch/diaphragmoutw.jpg" alt="asdf" name="Image1" width="300" height="225" border="0"></a></p>
This will work once I save and do not go back and edit the page. If I edit the page for any reason, the rollover stops working, and I have to repaste the code.
Joseph was suggesting that with 1.7, I could enable Javascript for myself, so maybe this would be the way to go? I will email you a login to the site.
Thanks for your help,
Matt
Hi Matt,
I visited your site and that "thumb" is in your code
Instead of if(!x && d.getElementById) x=d.getElementById<img alt="no" width="15" height="15" src="http://83.70.181.166/moodle/pix/s/no.gif" />; return x;
you should have
if(!x && d.getElementById) x=d.getElementById; return x;
Editor of moodle cuts body tags so it should be in header.html (if it is possible)
