Office Live Rollover Buttons "I'm Constructing" Adding rollover buttons to your site can be a way to tell your viewer that a link exists at this spot or to emphasize a special item. It's generally not a good idea to make your rollover images too large as it will minimize the effect of the rollover and or make your pageload slower. |
|
Example - Simple Rollover Button | |
1. Create two images that are of equal size and shape that vary in some aspect. (You can make a rollover out of any two images but for button puposes it's best to use a shape that is consistent.) Name the images "something"1 and "something" 2 for later ease of use. 2. Upload the images to your Documents area of the Member Center. (Images don't lose their resolution and respond better if loaded in the Documents area rather than the Image Gallery.) 3. Go to the page you want the rollover to appear and click in a zone. 4. Click "Modules" and then "HTML" as illustrated below. 5. Paste the following code into the HTML dialog box. <script type="text/javascript">
function mouseOver()
{
document.b1.src ="/Documents/number2.jpg"
}
function mouseOut()
{
document.b1.src ="/Documents/number1.jpg"
}
</script>
</head>
<body>
<a href="yoursite/yourpage" target="_blank">
<img border="0" alt="WOW This is Cool!" src="/Documents/number1.jpg" name="b1"
width="87" height="87" onmouseover="mouseOver()" onmouseout="mouseOut()"
/></a>6. Alter the text in Red. Image names, link site & page, alt Text You can also remove the target"_blank" if you want the link to open in the current | |