Solved

Make image more transparent (more opacity) on roll over

Posted on 2008-10-24
5
619 Views
Last Modified: 2013-12-25
hello,

I have an image as so :

<img src="images\std_temp\1_1.bmp">

When I roll over this image I would like to make the image increase its opacity - is there an easy way in which to do this and adjust the opacity to a desired effect ?

Thanks in advance,

GISVPN
0
Comment
Question by:gisvpn
  • 2
  • 2
5 Comments
 
LVL 6

Expert Comment

by:Iced-evil
ID: 22800671
see the code snippets for your request
The CSS needed:
 
div.transOFF {width: 100%; background-color: silver;border:1px solid black; }
div.transON {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }
div.trans25 {width: 100%; background-color: silver;opacity:.25;filter: alpha(opacity=25); -moz-opacity: 0.25;border:1px solid black; }
div.trans75 {width: 100%; background-color: silver;opacity:.75;filter: alpha(opacity=75); -moz-opacity: 0.75;border:1px solid black; }
 
 
the html 
 
<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"><p style="padding:5px;width:75%;">Place image or text or whatever here</p></div>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22801147
You'd have to use javascript and a timed loop to "fade in" the image -- I assume you want its transparency to DECREASE as it "fades in", yes?   Increased opacity = = decreased transparency, they are the opposite.  SO if you can explain more EXACTLY the effect you want on fade in, it will help everyone here.
0
 

Accepted Solution

by:
gisvpn earned 0 total points
ID: 22802177
Hi Iced-evil,

thanks for the post, however I think there was a lot of code there which I did not need ? It was not quiet what I needed. It also used <DIV> which I could not use (sorry should have mentioned this)...

I ended up using this, works perfect for my needs :


<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>
 
.....
 
 <img src="images\std_temp\1_1.bmp" style="filter:alpha(opacity=100);-moz-opacity:0.2" onMouseover="makevisible(this,1)" onMouseout="makevisible(this,0)">

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22804520
That's pretty much what I said, make a loop to increase the opacity incrementally.  What was wrong with the input you got?  Normally questions are closed by awarding the answer(s) that helped the most.
0
 

Author Comment

by:gisvpn
ID: 22804561
Hi scrathcyboy,

Thanks for the post. I dont think that I needed any fading effects/Javascript or loops for the opacity I was trying to achieve, just for it to change when I rolled over the image. The exact solution was found, but thanks for your input ;)

GISVPN
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question