January 11, 2014

Weebly Tricks #6 - Highlight Image on Mouse Hover

Posted by Domz at 1/11/2014

Highlight Image on Mouseover



Today, we are going to learn about highlighting your photos when your mouse pointer hovers on it. Best for photos with light backgrounds. The code is really simple and the procedure is basically easy like the previous mouseover effects we discussed lately. Starting now, I will make steps simpler and just ask if you can't catch up.







Recommended topics before proceeding:
Now we start with this procedures:

1. Go to Weebly > Design > Edit CSS/ HTML

2. Upload photos you want to use with the “add new file” on the right side.

3. Select the page layout you want to use. Find <head>, and just below it paste the following code and save.

<style>
.borderimage{
border:1px solid white;
}
</style>
<script language="JavaScript1.2">

/*
Highlight Image Script II- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

function borderit(which,color){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
which.style.borderColor=color
}
}

</script>

4. Now you can insert images into your page using “embed code" element.


5. Use this sample as code in inserting an image:

<img src="http://theweeblytricks.weebly.com/files/theme/crying.gif" class="borderimage" onMouseover="borderit(this,'black')" onMouseout="borderit(this,'white')">

6. Change the following:

Red marked text for your website address.
Green marked for your image name

The term black and white is the image color effects. As defined, black will be the border when you point your mouse over it and becomes white when clear. Try something else to comply with your site.

Please check the demo for clarification or ask questions so I can guide you.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top