Solved

Make image more transparent (more opacity) on roll over

Posted on 2008-10-24
5
622 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

690 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