Solved

Make image more transparent (more opacity) on roll over

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

947 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now