Solved

Make image more transparent (more opacity) on roll over

Posted on 2008-10-24
5
618 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

803 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