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

Next

11 replies to this topic

#1 tempest

Newbie [Level 2]

Kontributors
39 posts

Posted 25 June 2006 - 04:29 PM

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!!!

#2 SolarX

Member [Level 3]

Kontributors
90 posts

Location:our universe
Interests:movies, pc games, webdesign

Posted 25 June 2006 - 08:50 PM

I'm mostly using the CSS Option a:hover to change the background-image, from a link. But I will try your way the next time.

Thanks

#3 KoYoda

Newbie [Level 2]

Kontributors
29 posts

Posted 25 June 2006 - 09:05 PM

SolarX, on Jun 25 2006, 10:50 PM, said:

I'm mostly using the CSS Option a:hover to change the background-image, from a link. But I will try your way the next time.

Thanks

Yes, but with CSS you can't make the image highlight effect, can you? (Only if you load another highlighted image on hover).
Pardon me if I am wrong, I would like to be able to do that with CSS, so if anybody knows how please show us. Thanx!

#4 arcalypse

Newbie [Level 3]

Kontributors
45 posts

Posted 26 June 2006 - 04:19 AM

This is pretty basic. It is good though because you'd be suprised how many people are olivious to this type of scripting. There is also a form of HTML that I use of the many. All it really does is take 1 image, and convert it to another when your mouse hovers over it, but if you have 1 picture that is dark, and another of the same picture just lightened a bit, it truly looks like it is highlighted. If you want the code just PM me. It is pretty useful.

I perfer HTML over scripting because HTML is a bit easier to understand a lot of the time, but I wouldn't just blow this off because it can have some advantages some of the time, but like I said, it can get complicated sometimes, and a lot of the time if you make 1 mistake with Javascript, it not only ruins the whole script, but it also is HARD as HECK to fix sometimes, where as HTML is a lot easier to modify and looks a bit clearer to the inexperienced.

#5 Avalon

Privileged Member

Kontributors
630 posts

Location:Melbourne, Australia

Posted 26 June 2006 - 10:13 AM

KoYoda, on Jun 26 2006, 07:05 AM, said:

Yes, but with CSS you can't make the image highlight effect, can you? (Only if you load another highlighted image on hover).
Pardon me if I am wrong, I would like to be able to do that with CSS, so if anybody knows how please show us. Thanx!

Actually, the method shown by tempest IS using CSS, the only difference is that he included the <style> command on the web page with some javascript rather than using a style sheet. It will work the same using either method. I use this method on my web site at http://www.mudmall.com Run your mouse over the 'random image' thumbnail or any thumbnail in a search list to see the effect. My method is a little different and is contained in a style sheet, no javascript required.

.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; }

#6 Dooga

Coolio

Kontributors
1,346 posts

Gender:Male
Location:Canada
Interests:Eating SPAM
myCENT:66.95

Posted 26 June 2006 - 03:49 PM

Wow I really like the CSS method! However i'm currently using firefox, so I wouldn't know if it's cross browser supported. However I thought Opera 8 didn't support opacity? Most likely in IE you would have to add some extra hacks in javascript to make it work. Good thing Opera 9 has opacity features! I would like to try this one day..... perhaps someone could post a tutorial on opacity in CSS

However, it seems like Opera just "hides" the picture as it doesn't define opacity...

#7 tphilakone

Newbie [Level 1]

Kontributors
22 posts

Posted 27 June 2006 - 08:58 AM

oh yes

#8 Avalon

Privileged Member

Kontributors
630 posts

Location:Melbourne, Australia

Posted 27 June 2006 - 10:37 AM

Dooga, on Jun 27 2006, 01:49 AM, said:

Wow I really like the CSS method! However i'm currently using firefox, so I wouldn't know if it's cross browser supported. However I thought Opera 8 didn't support opacity? Most likely in IE you would have to add some extra hacks in javascript to make it work. Good thing Opera 9 has opacity features! I would like to try this one day..... perhaps someone could post a tutorial on opacity in CSS

However, it seems like Opera just "hides" the picture as it doesn't define opacity...

The method I used works the same in both IE (in my version 6 anyways) and Firefox (my browser of choice). These were the 2 browsers I concentrated on making it work for, I don't know about other browsers. According my stats, I have catered for the vast majority of visitors as these are the different browsers used by my visitors in the last month.

Quote

67.40% MSIE 6.0
20.19% Mozilla/5
4.77% Other
3.21% Google
2.11% Mozilla/4
1.05% Konqueror
0.70% Mozilla
0.50% MSIE 5.0
0.05% Opera

My method works for at least 90% of my visitors so I'm pretty happy with that.