code for fade in/fade out image transparency mouseover?

1 New Member

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(op acity=10);
}
</style>
</head>
<body>

<img src="http://farm5.static.fl ickr.com/4100/4814101144_07ce 8f4e8e_b.jpg" width="150" height="350" alt="the fall"
onmouseover="th is.style.opacit y=1;this.filter s.alpha.opacity =100"
onmouseout="thi s.style.opacity =0.9;this.filte rs.alpha.opacit y=10" />

</body>
</html>

Oct 16 '10 #1

Subscribe Reply

13825

Death Slaught

1,137

Top Contributor

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

Recognized Expert Expert

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

New Member

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(op acity=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

78171

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 below will work for the border no problem, but I can't seem to get the SRC to work - is this not an option in CSS?

HTML / CSS

1477

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 enlighten me.... thanks a million~ Dim imgImage As WebControls.Image Dim lblLabel As Label

Visual Basic .NET

1121

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 Designer, the transparency is replaced by a bright blue backgroud, but when I drag the same image from windows explorer, it keeps the transparency... Anyone can Help me with this?? Thank you, you're help is greatly appreciated! Jean Christophe Avard

Visual Basic .NET

3655

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 purpose to improve it. Frankly, I am not clear about the exact meaning of some pixel format (max, gdi, etc.) and I hope I have put them under the right "case". I have made only some superficial test and it seems to work. Note that the purpose is...

Visual Basic .NET

19499

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 mouseover entire image, I want it on each hotspot only, so an image pertaining to each link shows up. I have done it in JavaScript, but the website I'm using doesn't use JavaScript. Y'all are obviously light-years more knowledgeable then me on html...

HTML / CSS

3017

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 width="50%"></TD> <TD width="110"><a href="index.php"><IMG SRC="{image-path}matrix_03.gif" WIDTH=110 HEIGHT=40 ALT="Homepage" border="0" onmouseover="myOn('matrix_03')" onmouseout="myOut('matrix_03')"></a></TD> <TD width="100"><a...

Javascript

4663

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 column width or something.i would prefer doing it by mouseover.can anybody help me...my code is below <%@ Page Language="C#" AutoEventWireup="true" CodeFile="news_evnts.aspx.cs" Inherits="news_evnts" %> <!DOCTYPE html PUBLIC "-//W3C//DTD...

.NET Framework

6250

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. function Large(obj) { var imgbox=document.getElementById("imgbox"); imgbox.style.visibility='visible'; var img = document.createElement("img"); img.src=obj.src; img.style.height="180px"; imgbox.innerHTML='';

C# / C Sharp

9647

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10108

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9960

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7510

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6744

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5397

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5532

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4064

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2894

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General