Jump to content
xisto Community
Sign in to follow this  
Followers 0
tempest

How To Make Image To Highlight When It`s Mouseovered

By tempest, in General Discussion

Recommended Posts

tempest    0

tempest
Posted

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

 

<script language="JavaScript1.2"><!-- function makevisible(cur,which){strength=(which==0)? 1 : 0.2if (cur.style.MozOpacity)cur.style.MozOpacity=strengthelse 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!!!

Share this post

Link to post
Share on other sites

SolarX    0

SolarX
Posted

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

Share this post

Link to post
Share on other sites

KoYoda    0

KoYoda
Posted

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!

Share this post

Link to post
Share on other sites

arcalypse    0

arcalypse
Posted

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.

Share this post

Link to post
Share on other sites

Avalon    1

Avalon
Posted

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://forums.xisto.com/no_longer_exists/ 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; }

galexcd reacted to this

Share this post

Link to post
Share on other sites

Dooga    0

Dooga
Posted

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

Share this post

Link to post
Share on other sites

Avalon    1

Avalon
Posted

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.

67.40% MSIE 6.020.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.

Share this post

Link to post
Share on other sites

vkthiru    0

vkthiru
Posted

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.

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

 

<script language="JavaScript1.2"><!-- function makevisible(cur,which){strength=(which==0)? 1 : 0.2if (cur.style.MozOpacity)cur.style.MozOpacity=strengthelse 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!!!

 


Share this post

Link to post
Share on other sites

galexcd    0

galexcd
Posted

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: 

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

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept