ASP Hosting sale!
Double disk space and transfer for FREE!
Limited time offer! Act Now!

aspdev | articles | tutorials | forums

 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Code to Highlight Images

 
Post new topic   Reply to topic    ASPdev.org Forum Index -> JavaScript / DHTML / HTML / CSS
View previous topic :: View next topic  
Author Message
blueangell



Joined: 31 Jan 2006
Posts: 19

PostPosted: Tue Jan 31, 2006 12:11 pm    Post subject: Code to Highlight Images Reply with quote

Hello , im trying to find a javascript to use on my website to highlight images when you put a mouse over them.

Basically i wanted them in grey until someone mouses over them and then they will pop out in colour. I hope that makes sense as i am still actually learning.

If anyone could help me that would be muchly appreciated.
Back to top
View user's profile Send private message
administrator
Site Admin


Joined: 01 Oct 2004
Posts: 183

PostPosted: Tue Jan 31, 2006 1:35 pm    Post subject: Reply with quote

You will need 2 copies of your image - one in color and one in grey. Then you can use the onMouseOver and onMouseOut link event handlers to switch between the 2 images.


I hope this helps.
_________________
Peter
ASP & ASP.NET Articles and Tutorials
Back to top
View user's profile Send private message
twinkle



Joined: 31 Jan 2006
Posts: 79

PostPosted: Tue Jan 31, 2006 4:00 pm    Post subject: Reply with quote

Heres also a script i found for this sort of thing. The guys link is at the bottom and he has some really usful scripts.

Place the following code between your HEAD tags:

Code:
<SCRIPT language="JavaScript1.2">
<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
// -->
</SCRIPT>


Place the following code within all of the image tags you'd like the affect to be applied:


Code:
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"


Here's how your image tag might look:


Code:
<img src="yourimage.gif" width="96" height="134" style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">




Script code provided by:
Christian Kizer
http://www.kizer.8k.com/
_________________
I shine
Back to top
View user's profile Send private message
Missie



Joined: 06 Feb 2006
Posts: 25

PostPosted: Tue Feb 07, 2006 7:58 pm    Post subject: Reply with quote

Cool! I have been trying to figure this one out for a long time! Smile I can't wait to see if it works! Smile And thanks for the link twinkle! Smile Know I can get some cool codes off there and won't have to try and find them. Smile
Back to top
View user's profile Send private message
Stitch



Joined: 07 Feb 2006
Posts: 43

PostPosted: Tue Feb 07, 2006 8:04 pm    Post subject: Reply with quote

Thanks for the info guys, I had been looking for this sort of thing for a long time now and I think I'm getting the idea. Thanks for the code too twinkle.
Back to top
View user's profile Send private message Send e-mail AIM Address MSN Messenger
blueangell



Joined: 31 Jan 2006
Posts: 19

PostPosted: Wed Feb 22, 2006 10:53 pm    Post subject: Reply with quote

Thank you for all the information. I almost have it working although I have a problem where the image gets stuck sometimes and does not change.

Thanks again!
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    ASPdev.org Forum Index -> JavaScript / DHTML / HTML / CSS All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2002 phpBB Group

SQL Tutorial