code for fade in/fade out image transparency mouseover?

I am wondering if there is a css [or other type of] code that would enable a fade in/fade out image mouseover transparency?
picture this:
image is slightly transparent,
mouseover: *FADE INTO* image
mouseout: *FADE OUT* of image
back to slightly transparent.

this is what I have, it include the transparency of image, the mouseover/mouseout, the only thing missing [and need help with] is the FADE IN/FADE OUT, in other words SLOW DOWN/ADD A TIME SEGMENT TO WHICH THE TRANSPARENCY MOUSEOVER/MOUSEOUT OCCURS?:
after that, how do I embed a link to the image? [sorry, I'm a newbie]

<html>
<head>
<style type="text/css">
img
{
opacity:0.9;
filter:alpha(opacity=10);
}
</style>
</head>
<body>

<img src="http://farm5.static.flickr.com/4100/4814101144_07ce8f4e8e_b.jpg" width="150" height="350" alt="the fall"
onmouseover="this.style.opacity=1;this.filters.alp ha.opacity=100"
onmouseout="this.style.opacity=0.9;this.filters.al pha.opacity=10" />

</body>
</html>

Oct 16 '10 #1

Subscribe Post Reply

13799

Death Slaught

1,137

1GB

I'm sure the timing can be done in JavaScript. As for embedding the image, you could make the image a link or position a link over the image.

Thanks, Death

Oct 16 '10 #2

drhowarddrfine

7,435

Expert 4TB

Filters are not standard in HTML or CSS. You should not use them. What you are trying to accomplish is only available using JavaScript.

Oct 17 '10 #3

oranoos3000

107

100+

hi
my friend
you can use jquery and do this work easily
only work this is that add jquery.js at the above your code in head section of your page

Expand|Select|Wrap|Line Numbers

 
<head>

<script type="text/javascript" src="jquery.js"></script>

</head>

jquery.js is a libarary for javascript that you can download from www.jquery.com site

and inside another jquery script you can write

Expand|Select|Wrap|Line Numbers

 
$(document).ready(function(

$('img[alt=the fall]').mouseover(function(){

$(this).fadeTo(1,200);

})
 
$('img[alt=the fall]').mouseout(function(){

$(this).fadeTo(0.1, 200);

})

));

for more information about jquery please visite www.jquery.com

inside your code
i think some of thing is wrong
img
{
opacity:0.9;
filter:alpha(opacity=90);
}

inside img tag alpha is typed al pha and is a space between al and pha ,

be successful

Oct 28 '10 #4

Similar topics

CSS image "mouseover"

by: al | last post by:

Hi, I've been trying to create a image mouseOver effect using CSS - is this possible? Or will I have to use DIV tags or something along those lines? I've tried a number of things - the code...

HTML / CSS

Changing image when mouseover on a text in VB.NET

by: Panic Student | last post by:

hi all, i'm having trouble with changing image when mouseover on a particular label. Below is what i attempted to but it didn't seem to work at all. I guess my concept is wrong ): Please...

Visual Basic .NET

Image Transparency

by: Jean Christophe Avard | last post by:

Hi! I'm designing a clipart manager. It stores TIFF file since the clipart are isolated object (transparent background). The problem is that when I drag the TIFF from my application onto Corel...

Visual Basic .NET

CODE to Test ALPHA Transparency

by: tommaso.gastaldi | last post by:

In a previous post I have been asking about a way to test Alpha Transparency. Bob and Michael have kindly provided some ideas. Here I would like to share the function I have prepared, for the...

Visual Basic .NET

HTML image map mouseover help

by: Annette Acquaire | last post by:

I have and image map with a dozen hotspot links on it that I'm trying to get to open a new image over existing one on mouseover of each COORD. The only thing I was able to do was swap image on...

HTML / CSS

Image on mouseover not working

by: Evolution445 | last post by:

I got this code, and it somehow doesnt work. <TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center"> <TR> <TD background="{image-path}navfiller.gif" HEIGHT=40...

Javascript

How to enlarge image on mouseover in gridview

by: lisles | last post by:

hi; Im using a gridview to display images in 1 of the column...but the size of the images is very small.is there anyway to enlarge the image on mouseover or even without mouseover by adjusting the...

.NET Framework

enlarge image on mouseover

by: readbanana | last post by:

I have a column in a gridview that fills with images from the gridview. I am very new to javascript so I googled until I found a good javascript function that enlarges this image onmouseover....

C# / C Sharp

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice