# Unity [web] HTML Opacity JavaScript Question

This topic is 4226 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I was fooling around with the DHTML tutorial on w3schools.com and I found the whole mouse over/changing opacity thing to be very interesting. It reminded me of the sexy play button on the new Windows Media Player cuz of the pulsing look. The tutorial only taught you how to implement the mouseover pulse and simply reset the opacity on mouseout, so I decided to try and implement my own mouseout version, but ran into trouble in two places: 1> If you mouseover then mouseout too fast, the transitions get stuck mid-shift. 2> Using the function for multiple images causes chaos. Basically, I am stuck on how to rearrange/rewrite the code so that it does not mess up so badly. If there are any HTML/javascript gurus out there willing to help me create awesomeness, I would very much appreciate it! Two notes: 1> Sorry for the inconvenience, this DHTML fading stuff only works with IE. 2> I hope it is okay that I linked to a picture on GameDev.
<html>
<style>
img
{
filter:alpha(opacity=10)
}
</style>
<script type="text/javascript">
function clean(id)
{
interval=setInterval("makeclean('"  + id + "')",6)
}
function foggy(id)
{
interval=setInterval("makefoggy('" + id + "')",6)
}

function makefoggy(id)
{
if(document.getElementById(id).filters.alpha.opacity<=10)
{
clearInterval(interval)
}
else
{
document.getElementById(id).filters.alpha.opacity-=10
}
}
function makeclean(id)
{
if(document.getElementById(id).filters.alpha.opacity>=100)
{
clearInterval(interval)
}
else
{
document.getElementById(id).filters.alpha.opacity+=10
}
}
</script>

<body>

<a href="http://www.yahoo.com">
<img border="0" id="myImage1" src="http://www.gamedev.net/community/forums/mod/news/icons/news16.png" onmouseover="clean('myImage1')"
onmouseout="foggy('myImage1')" />
</a>

<a href="http://www.yahoo.com">
<img border="0" id="myImage2" src="http://www.gamedev.net/community/forums/mod/news/icons/news16.png" onmouseover="clean('myImage2')"
onmouseout="foggy('myImage2')" />
</a>

<a href="http://www.yahoo.com">
<img border="0" id="myImage3" src="http://www.gamedev.net/community/forums/mod/news/icons/news16.png" onmouseover="clean('myImage3')"
onmouseout="foggy('myImage3')" />
</a>

<a href="http://www.yahoo.com">
<img border="0" id="myImage4" src="http://www.gamedev.net/community/forums/mod/news/icons/news16.png" onmouseover="clean('myImage4')"
onmouseout="foggy('myImage4')" />
</a>

</body>
</html>


..For some odd reason, my plus signs don't show up in the preview window. Well, at any rate, there are plus signs before and after the "id" in the functions.

##### Share on other sites
I haven't looked through your code, but found a similar example here:

The onmouseout event simply resets the image, but you should be able to duplicate the function that fades the image in and reverse it so that the image fades out when you do a onmouseout. And it works in FF and easily on multiple images ;)

Hope it helps.

• 13
• 11
• 22
• 11
• 15
• ### Similar Content

• Hi , I was considering this start up http://adshir.com/, for investment and i would like a little bit of feedback on what the developers community think about the technology.
So far what they have is a demo that runs in real time on a Tablet at over 60FPS, it runs locally on the  integrated GPU of the i7 . They have a 20 000 triangles  dinosaur that looks impressive,  better than anything i saw on a mobile device, with reflections and shadows looking very close to what they would look in the real world. They achieved this thanks to a  new algorithm of a rendering technique called Path tracing/Ray tracing, that  is very demanding and so far it is done mostly for static images.
From what i checked around there is no real option for real time ray tracing (60 FPS on consumer devices). There was imagination technologies that were supposed to release a chip that supports real time ray tracing, but i did not found they had a product in the market or even if the technology is finished as their last demo  i found was with a PC.  The other one is OTOY with their brigade engine that is still not released and if i understand well is more a cloud solution than in hardware solution .
Would there  be a sizable  interest in the developers community in having such a product as a plug-in for existing game engines?  How important  is Ray tracing to the  future of high end real time graphics?

• Good day,

I just wanted to share our casual game that is available for android.

Description: Fight your way from the ravenous plant monster for survival through flips. The rules are simple, drag and release your phone screen. Improve your skills and show it to your friends with the games quirky ranks. Select an array of characters using the orb you acquire throughout the game.

Trailer:

• Hello fellow devs!
Once again I started working on an 2D adventure game and right now I'm doing the character-movement/animation. I'm not a big math guy and I was happy about my solution, but soon I realized that it's flawed.
My player has 5 walking-animations, mirrored for the left side: up, upright, right, downright, down. With the atan2 function I get the angle between player and destination. To get an index from 0 to 4, I divide PI by 5 and see how many times it goes into the player-destination angle.

In Pseudo-Code:
angle = atan2(destination.x - player.x, destination.y - player.y) //swapped y and x to get mirrored angle around the y axis
index = (int) (angle / (PI / 5));
PlayAnimation(index); //0 = up, 1 = up_right, 2 = right, 3 = down_right, 4 = down

Besides the fact that when angle is equal to PI it produces an index of 5, this works like a charm. Or at least I thought so at first. When I tested it, I realized that the up and down animation is playing more often than the others, which is pretty logical, since they have double the angle.

What I'm trying to achieve is something like this, but with equal angles, so that up and down has the same range as all other directions.

I can't get my head around it. Any suggestions? Is the whole approach doomed?

Thank you in advance for any input!

• By khawk
Watch the latest from Unity.

• By GytisDev
Hello,
without going into any details I am looking for any articles or blogs or advice about city building and RTS games in general. I tried to search for these on my own, but would like to see your input also. I want to make a very simple version of a game like Banished or Kingdoms and Castles,  where I would be able to place like two types of buildings, make farms and cut trees for resources while controlling a single worker. I have some problem understanding how these games works in the back-end: how various data can be stored about the map and objects, how grids works, implementing work system (like a little cube (human) walks to a tree and cuts it) and so on. I am also pretty confident in my programming capabilities for such a game. Sorry if I make any mistakes, English is not my native language.