Forum

Hi,

I would like to be able to use JQuery within DNN pages. As an example, I found some code which will (I hope) swap images on mouseover, please see the code below. 

The question is I can't see how or where this code should go within DNN.

Could someone please explain where I should put the JQuery code? Also, I am using DNN 6.2, is it autmatically enabled for JQuery?

I've been googling this for a while but can't find any information on how to use Jquery from DNN.

Steve

The JQuery code:

1. 
   <script type="text/javascript">
   $(document).ready(function(){
   // Change the image of hoverable images
   $(".imgHoverable").hover( function() {
   var hoverImg = HoverImgOf($(this).attr("src"));
   $(this).attr("src", hoverImg);
   }, function() {
   var normalImg = NormalImgOf($(this).attr("src"));
   $(this).attr("src", normalImg);
   }
   );
   });
   
   function HoverImgOf(filename)
   {
   var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
   return filename.replace(re, "$1_hover.$2");
   }
   function NormalImgOf(filename)
   {
   var re = new RegExp("(.+)_hover\\.(gif|png|jpg)", "g");
   return filename.replace(re, "$1.$2");
   }
   </script>

To use the code:

1. <img class="imgHoverable" src="images/submit.png"/>

Hi Aderson,

Thankyou for your reply.

I guess I can make the html module viewable on every page so the code is available throughout the site.

Will look out for your JQuery videos, that is good news.

Regards,

Steve

Very correct Steve. A [SPACE] should also do it in case you are using the Rich Editor view.

Aderson