Loading...
HOME
 |
Transparent Roll Over Pictures - Whats the code for tranparent pictures | ||
Discussion by BooZker with 4 Replies.
Last Update: December 24, 2006, 3:54 pm | |||
 |
|||
 |
 |
|
 |
 |
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
 |
|
|
I dont want just transparent pictures i want a sort of rollover image. I see this done on myspace a lot. A transparent picture that when you roll over is less transparent. I want that for my site. Go to:
http://boozkerstweaks.trap17.com/tutorials...ws_to_vista.php
And look at the thumbnail at the beginning. I want that to be a transparent image that when you roll over it, it becomes less transparent. Ive seen this in HTML and CSS. Either way is fine with me.
I looked on this site and google, but never really found what i wanted. Almost everyone was only how to make it transparent, but not roll over.
http://boozkerstweaks.trap17.com/tutorials...ws_to_vista.php
And look at the thumbnail at the beginning. I want that to be a transparent image that when you roll over it, it becomes less transparent. Ive seen this in HTML and CSS. Either way is fine with me.
I looked on this site and google, but never really found what i wanted. Almost everyone was only how to make it transparent, but not roll over.
The simplest way of achieving this technique is onMouse over function.
http://www.computerhope.com/onmouse.htm
You must have two images: one transparent and default on loading, and another one to achieve desired effect when mouse is placed on top.
The page I gave as a reference is very easy to understand and customize. Hope that helps.
Additional information: you can speed up the transition by preloading images on body load. This script and tutorial is found under Tutorial section.
If you want to achieve this as CSS, it's just modifying a and a.hover and setting background-image: url(image); for both before and after. Hover is when the mouse is over any <a href="..." link. This can be used just for CLASS system where only activated when <a href="..." class="rollover"> where class rollover is set to show a different picture/text format.
PS. much better with topic title this time.
http://www.computerhope.com/onmouse.htm
You must have two images: one transparent and default on loading, and another one to achieve desired effect when mouse is placed on top.
The page I gave as a reference is very easy to understand and customize. Hope that helps.
Additional information: you can speed up the transition by preloading images on body load. This script and tutorial is found under Tutorial section.
If you want to achieve this as CSS, it's just modifying a and a.hover and setting background-image: url(image); for both before and after. Hover is when the mouse is over any <a href="..." link. This can be used just for CLASS system where only activated when <a href="..." class="rollover"> where class rollover is set to show a different picture/text format.
PS. much better with topic title this time.
To expand a bit on buff post on CSS rollovers it would look more like this
CSS
.home {
background: url('images/home.gif') no-repeat;
width: 40px;
height: 31px
}
.home a {
width: 40px;
height: 31px;
display: block;
}
.home a:hover {
background: url('images/home_h.gif') no-repeat;
}
HTML
class="home">
Then you would apply that class to your images and your set. Of course adjust the code accordingly to fit your design.
CSS
CODE
.home {
background: url('images/home.gif') no-repeat;
width: 40px;
height: 31px
}
.home a {
width: 40px;
height: 31px;
display: block;
}
.home a:hover {
background: url('images/home_h.gif') no-repeat;
}
HTML
CODE
class="home">
Then you would apply that class to your images and your set. Of course adjust the code accordingly to fit your design.
Here is a pretty good link to figure out the gist of Transparencies and Opacity.
http://www.mandarindesign.com/opacity.html
There are plenty of examples of on:hover roll-overs, etc.
http://www.mandarindesign.com/opacity.html
There are plenty of examples of on:hover roll-overs, etc.
jlhaslip i went to that site to. I didnt even notice they had that section at the bottom. That is exactly what i want. Thank you.
BuffaloHELP i know actual rollovers with two images, but i wanted just CSS design.
BuffaloHELP i know actual rollovers with two images, but i wanted just CSS design.
|
|
|
|
|
|
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
Similar Topics:
Slanted Pictures
Some Of My Pictures I Took
I Need Help With Changing The Size ...
my problem is that i can NOT find a way to adjust the size of pictures so that they spread across the screen without gaps between them. i made the pictures a defined size and when i opened the page on a different computer there were gaps between the pictures. does anyone know of a way to adjust the ...more
 Help With Website Layout Correction For All Browsers Page gets larger on Firefox 2 (4)
|
(5) Fixed Background easy 
|
