ウィジェットに、ロールオーバー効果を持ったバナーを入れたいです。

ワードプレスでのサイト作成で、次の問題点が浮かび、質問させていただきます。

～目標～
・左側メニューであるウィジェットに、ロールオーバー効果を持ったバナーを入れたいです。
※ロールオーバーは、別の画像に差し替える形式にしたいと思っています。

～現状～
ワードプレスは、バージョン3.8を使用しています。
テーマは、ホームページビルダーのテーマを使用しています。
PHPについては初心者です。

Image Widgetを使用することで、ウィジェットに画像を入れることはできたのですが、ロールオーバー機能が設置できませんでした。
次に、ウィジェットの「テキスト」を利用してウィジェット部分に画像を表示しましたが、画像の下半分が、マウスを置いた際にリンクの反応がない状態でした。

HTMLでサイトを作成していた時は、jquery、jsファイル(スマートロールオーバー)を使用して、
末尾が「.off」「.on」の画像データを用意することでにロールオーバーを実現していたので、
ワードプレスでも上記のような方法でロールオーバーを実現したいと思っています。

しかし、ワードプレスにjqueryを導入する方法や、jsファイルを読み込ませる方法に関して、よくわかっていません。

上記のような状況なのでございますが、ウィジェットにロールオーバー機能をつける方法に関しまして、助言をいただけましたら幸甚に存じます。

初心者で、もしこちらの質問に不備がございましたら申し訳ございません。

どうか、宜しくお願い申し上げます。