Want to add a beautiful widget to your blog which expands its size when mouse reaches over it. To get this effect keep a small image in the div of id "small" and large image in the div of id "large" This type of widgets are generally used for advertisements.
.png)
1) Go to Blogger Dashboard > Design > Page/Edit Layout.
2) Add a Gadget > HTML/JavaScript.
3) Copy the code below and paste it into the window.
<html>
<script>
function on_it()
{
var a=document.getElementById(small);
var b=document.getElementById(large);
a.style.display=none;
b.style.display=inline;
}
function out_it()
{
var a=document.getElementById(small);
var b=document.getElementById(large);
a.style.display=inline;
b.style.display=none;
}
</script>
<div onmouseover="on_it()" onmouseout="out_it()">
<div id="small" style="display:inline;">
---content of the widget when mouse is not over it-----------
</div>
<div id="large" style="display:none;">
---content of the widget when mouse is over it-----------
</div>
</div>
</html>
See the example below :
0 comments:
Post a Comment