FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

How to make a picture blur or something else using CSS ?

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


phicha
i see on user friendster profile,
that a picture can be blured, i don;t know using a javascript or css,
but it seem using that, since when my mouse over this thing. the blur gone away..

can someone explain how to a thing like that ?

regards,
Arno v. Lumig
Impossible without javascript...

Javascript has a really simple function to blur images, but it only works for iexplore (I guess...)

Goodluck,
Arno
phicha
what do u mean by good luck ? Shocked
oh i see using javascript, so what kind of function for using like that huh ? Very Happy

regards,
v3rt1go
It's done with a simple Javascript Rollover behavior and with 2 images, one with a blur and one without:

Code:

<a href="TheLink.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ImageName,'','NoBlur.gif',1)">
<img src="Blur.gif"></a>


If you want to learn more about CSS Design try:
www.alistapart.com, great site for CSS and not only.

Good Luck.
Mosquito.Tyler
Arno v. Lumig wrote:
Impossible without javascript...


It can be done with pure CSS using the :hover pseudo-element, and the content property.

Example.

THE CSS
Code:

div.picture
{
content:url('blurredimage.jpg');
}

div.picture:hover
{
content:url('unblurredimage.jpg');
}


The HTML
Code:

<html>
<head>
     <title>title</title>
</head>
<body>
<table>
     <tr>
          <td><div class="picture"></div></td>
          <td>Some random Words</td>
     <tr>
</table>
</body>
</html>


I have not actually tested this, it popped into my head and I compared to W3 Schools's information on the 'content' property. In theory it should work.

Whether you choose to use CSS or Javascript, they are both pretty fast, and have the same effect. The thing with javascript is that you will have to have a function for the 'onmouseover' event, as well as the 'onmouseout' event so that the picture will change back to the blurred image when you take your cursor off of it. Personally I find the CSS to be a much simpler option.

I would recommend you use javascript as a learning experience first though Very Happy
phicha
sorri, but i think when i looking on friendster
the photo is only one, and not just like that

the picture not just only can be blur but can be rotated 180 also.
that so wield for me. Very Happy
Mosquito.Tyler
That sounds like a Flash Applet. Could you give me a direct link? That way i can go check it out and give you a more accurate answer.
The_Gamer294
Mosquito.Tyler wrote:
That sounds like a Flash Applet. Could you give me a direct link? That way i can go check it out and give you a more accurate answer.


Yeah, flash would be the easiest way to get that effect. Try the demo or something...
phicha
like this one

http://www.friendster.com/user.php?uid=6707593

please look at the owner picture, and mouse over and mouseout. Smile
speedwaffle
Making this effect is probably done most easily in flash IF you want to see a continuous blur (e.g. a progressive blur whereby the pic becomes more and more blurry over say 2 secs). If you just want to have the image change to a blurry image when you hover the mouse over it (where the change is instantaneous), I'd use javascript or CSS as described above.

The site phicha posted above is probably done with css or java as the change is instantaneous.

Cheers
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.