• 0

Image Effect

Asked by Marginal,

 Share

Question

Explorer

Marginal

Posted
Posted

Hello,

First of all, I'm not sure I'm in the right section... I hesitated to post in "Web Programming (HTML, JAVA, PHP, XML etc...)".

I would like to know how to do this effect : I want to give to my image (that's on a website) a shaded effect and when the mouse goes on it this shaded effect has to go away and the picture has to be shown without any effect.

I hope you can understand me in spite of my bad English.

Thank you in advance and have a nice evening.

Link to comment
https://www.neowin.net/forum/topic/91312-image-effect/
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Grand Master

jackwanders

Posted
Posted

well what you want to do is make a rollover button. essentially a rollover is an image that is replaced with another image when the user hovers over it with his mouse.

I haven't used image rollovers in quite some time, but when I did them, I used a javascript function to tell the browser to replace image A with image B when the user put his mouse over the image.

In your case, all you need to do is make two images...one with the shadow effect and one without. then make a rollover. :D

Link to comment
https://www.neowin.net/forum/topic/91312-image-effect/#findComment-1037001
Share on other sites
  • 0
Contributor

raghuveer_v

Posted
Posted

Good. In this case, we DONT need to have two pictures. ONE will do. Here we go ...

Put this stuff in the <head> of your HTML,...

-----------

<script language="JavaScript">

function fadein(obj,startvis,endvis,step)

{

for (i=startvis;i<endvis;i=i+step)

{

setTimeout(eval('obj.id')+".style.filter = 'alpha(opacity="+i+")';",5*(i-startvis));

}

}

function fadeout(obj,startvis,endvis,step)

{

for (i=startvis;i>endvis;i=i-step)

{

setTimeout(eval('obj.id')+".style.filter = 'alpha(opacity="+i+")';",5*(startvis-i));

}

}

</SCRIPT>

---------

and then,.... in your <BODY> ,....

something like this:

---------

<img id="img1" src="images/interfacelogo.jpg" STYLE="filter: alpha(opacity=50)" onMouseOver="fadein(this,50,100,1);" onMouseOut="fadeout(this,100,50,1);">

--------

Hope that helps ....

Link to comment
https://www.neowin.net/forum/topic/91312-image-effect/#findComment-1037131
Share on other sites
  • 0
Contributor

raghuveer_v

Posted
Posted

If that looks too complex, it's because I wanted it to fade-in and fade -out gradually. You can have an abrupt swicth-over from opaque to translucent using a simple assignment like the following in the onMouseOver and onMouseOut functions:

this.style.filter = 'alpha(opacity=50)';

Ask, if it needs elaboration ...

Link to comment
https://www.neowin.net/forum/topic/91312-image-effect/#findComment-1037141
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.