Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.


Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

0

How To Make Image To Highlight When It`s Mouseovered

Started by tempest, Jun 25 2006 04:29 PM

Prev

11 replies to this topic

#11 vkthiru

Newbie

Kontributors
1 posts

Posted 25 May 2010 - 04:17 AM

Hello,

This code is working only in IE browsers and it is not suitable for other browsers.

How to ensure that the script is browser compatible.

tempest, on 25 June 2006 - 04:29 PM, said:

Place this code between <HEAD and </HEAD tags.

<script language="JavaScript1.2">
<!-- 
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 effect to be applied.

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

And your image tag might look like that.

<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)">

"yourimage.gif" in last code change to your image URL!!!

#12 galexcd

Trap Grand Marshal Member

[MODERATOR]
1,331 posts

Gender:Not Telling
myCENT:39.82

Posted 26 May 2010 - 06:59 AM

vkthiru, on 25 May 2010 - 04:17 AM, said:

Hello,
This code is working only in IE browsers and it is not suitable for other browsers
How to ensure that the script is browser compatible.

Hello vkthiru, and welcome to our forum.
Avalon provided a cross-browser compatible pure css solution that I would recommend using over the OP's script. I have quoted this solution below:

Avalon, on 26 June 2006 - 10:13 AM, said:

.image:link { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; width: auto; height: 100px; }
.image:visited { opacity: .65; -moz-opacity: .65; filter: alpha(opacity=65); width: auto; height: 100px; }
.image:hover { -moz-opacity: .65; opacity: .65; filter: alpha(opacity=65,finishopacity=65,style=0); width: auto; height: 100px; }

Prev

Back to Tutorials · Next Unread Topic →

Reply to this topic

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users