?
Solved

Make image more transparent (more opacity) on roll over

Posted on 2008-10-24
5
Medium Priority
?
623 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

Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

752 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