• 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.

  • Posts

    • Spotify finally removes the disco ball app icon in the latest update

      By +pmrd · Posted

      Was it too much to ask to show the icon in this article?
    • Windows 11's big performance boost is finally available for all

      By Case_f · Posted

      Frankly, I blame whoever is writing such articles. "A big improvement/update and/or new feature is now available to everyone! Also, use this unofficial tweak tool to enable it because it actually isn't available to you yet officially and might not in fact even be entirely ready or whatever, hence why it is perhaps not enabled for you*. But it's great and you should enable it!" I mean there's nothing wrong with sharing info about some feature you might need to enable via unofficial means, of course. It's just that these articles tend to essentially end up being two news pieces in one, and one of them tends to be a bit misleading. (*Yes, yes, the "it's a controlled rollout!" thing. Not a fan of that one either. The argument, not the actual rollout.)
    • SQL Server Management Studio 22.7 brings "What's New" page, T-SQL formatting, and lots more

      By wrack · Posted

      Thank you. Will do. I read in the release notes that editor config might be at play here.
    • Windows 11's big performance boost is finally available for all

      By eiffel_g · Posted

      Actually, I think even Microsoft doesn't know how to control it
    • OpenAI is making Codex more useful in Chrome and the cloud

      By pradeepviswav · Posted

      OpenAI is making Codex more useful in Chrome and the cloud by Pradeep Viswanathan OpenAI's Codex now has more than 5 million users, up nearly 4x from earlier this year. To further accelerate Codex's growth among developers, OpenAI today announced that it has agreed to acquire Ona, a company that builds secure cloud execution and orchestration technology for developers. Ona will enable developers to run Codex with persistent and controlled cloud infrastructure for long-running agentic workflows. Right now, most Codex execution happens locally on developers' laptops and PCs, and the agents work continuously for hours. Through Ona, OpenAI aims to make Codex agents keep working for days without being tied to a user’s local machine or an active session. This will be an important capability for enterprises that want to deploy AI agents in production while maintaining control over infrastructure, data, security boundaries, credential scope, logging, and review workflows. Like any acquisition, the deal is still subject to customary closing conditions, including regulatory approvals. Until the deal closes, OpenAI and Ona will continue to operate as separate companies. After closing, Ona’s team will join the Codex team to improve developer workflows. Alongside the Ona acquisition announcement, OpenAI today introduced a few Codex updates. Developers can now save Codex rate limit resets and use them later instead of losing them when they are not needed immediately. OpenAI is also adding a referral option where users can invite a friend to Codex and get a saved rate limit reset. OpenAI today also announced a developer mode for browser use in Chrome and the Codex in-app browser. With this mode, Codex can use the Chrome DevTools Protocol to debug web apps, inspect pages, and work more directly with browser-based development workflows. Developers can use this when they want Codex to profile JavaScript, inspect console output and network traffic, examine web page states including the DOM and applied styles, and more.

  • Recent Achievements

    • Week One Done
      davidbazooked earned a badge
      Week One Done
    • One Month Later
      Jamswaz earned a badge
      One Month Later
    • Week One Done
      Jamswaz earned a badge
      Week One Done
    • Rookie
      Marzoid went up a rank
      Rookie
    • Community Regular
      coch went up a rank
      Community Regular

  • Popular Contributors

    1. 1
      +primortal
      509
    2. 2
      PsYcHoKiLLa
      186
    3. 3
      +Edouard
      157
    4. 4
      Steven P.
      83
    5. 5
      ATLien_0
      75
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!