Simple Mouseover Effect Code For Images

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/bloggertricksandtoolz/mouseovertabs.css" />
<script src="https://sites.google.com/site/bloggertricksandtoolz/mouseovertabs.js" type="text/javascript">

/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
* Bloggerized by - Sameera- http://www.bloggertricksandtoolz.com/
***********************************************/
</script>

5.Click on "Save Template"

6.Now Go to desing-->> Add a Gadget-->> Select Html Java Script-->> Paste the below code

<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="Your Link 1" rel="gotsubmenu[selected]">Your text 1</a></li>
<li><a href="Your Link 2" rel="gotsubmenu">Your text 2</a></li>
<li><a href="Your Link 3">Your text 3</a></li>
</ul>
</div>

<div id="mysubmenuarea" class="tabsmenucontentclass">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

Note: Replace Your Link,Your text , with your content.

7.Now save your "Html Java scrpit" You are done.

Cheers.

Posted in: