Transparent Roll Over Pictures - Whats the code for tranparent pictures

free web hosting
Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

Transparent Roll Over Pictures - Whats the code for tranparent pictures

BooZker
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.

Reply

BuffaloHELP
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.

Reply

Saint_Michael
To expand a bit on buff post on CSS rollovers it would look more like this

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.

Reply

jlhaslip
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.

Reply

BooZker
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.


Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. how to make your myspace picture colored when the mouse goes over it - 2.66 hr back. (1)
  2. make pictures black and white and color on rollover on myspace - 5.48 hr back. (1)
  3. change pictures to black and white when the arrow is over them generator - 7.17 hr back. (1)
  4. flash rollover photos - 8.32 hr back. (1)
  5. how to make all my pictures transparent on my page using html - 10.56 hr back. (1)
  6. whats the code to to align text on the side of a picture in your about on myspace - 16.25 hr back. (1)
  7. myspace picture roll overs - 18.81 hr back. (1)
  8. transparent photos code - 19.82 hr back. (1)
  9. how do i make rollover effects for my whole myspace page? - 25.24 hr back. (1)
  10. rollover transparency on myspace - 34.06 hr back. (1)
  11. how to make transparent only photos not background myspace - 38.39 hr back. (1)
  12. linkbar transparent rollover - 57.53 hr back. (1)
  13. html code for picture roll - 57.83 hr back. (1)
  14. hover over pics black and white code - 75.21 hr back. (2)
Similar Topics

Keywords : transparent, roll, pictures, whats, code, tranparent, pictures

  1. Flash Wmode(transparent) Pramater In Firefox3(on Linux) - Not Working
    issue with flash transparancy and firefox3( on linux op. sistem) (1)
  2. Any Advice From Experts?
    wrapping text around pictures. (3)
    I was wondering if someone could help me. I know that when you mix text with pictures, when you use
    the "align" feature, the text will wrap around the picture, eg. when you want text to the left to
    wrap around a picture on the right, you just add 'align="right"' to the picture and vice
    cersa for text and pictures on the opposite side. However, it becomes totally different when you
    want 2 pictures, one underneath the other, or when you want a caption text underneath the
    picture(s), in which case the wrapping and formatting completely disappears. it is of course po....
  3. Applet Code
    (0)
    Hi There! ....
  4. I Need Help With This Code
    (3)
    could some one help with this code. I have been working on this for the past hour trying to get it
    to work. this is the first time i have had problem with writing html code. the code i need help
    with is HTML a href =" http://www.darkzone3.110mb.com/contact.php " target=" _blank ">
    input type =" image " height=" 27 " width=" 139 " src="
    http://www.darkzone3.110mb.com/buttons/contact.png " /> /a > for some reason on my page it
    want work at all it want even open it the same page. What i'm trying to do with the code is a
    page in a new window using an....
  5. Email Form Code
    (8)
    I want to create my own e-mail form for my site and I don't quite know if JavaScript or PHP is
    required. I use my Nintendo Wii to manage my sites so I only can use what my webhost allows. I am
    using Angelfire for my main site and InvisionPlus for my forums. I'm planning on switching to
    Trap17 for my main site. Well here is my current code. Please tell me what I need to change.
    Message ....
  6. How To Display Php Code [resolved]
    Html Help With Php Codebox (8)
    I'm trying to make codebox for my guestbook so that users can post PHP code inside.. I tried
    many versions but none of them works If i use , or i can display HTML code, but when i try to
    write PHP code it executes it does not display.. There is a way to make swap for You have codebox
    in forum to display php how can i make that?! thanks....
  7. My Very Sad Code
    (4)
    So i usually work in notepad, or frontpage but i was using dreamweaver instead because i wanted to
    see the difference and i like it better than frontpage and all. But as usual i cant get anything to
    work. I wanted the table to be over the images i took the table out .
    http://www.indiealways.trap17.com/zooey.html is the link to the page HTML html xmlns ="
    http://www.w3.org/1999/xhtml "> head > meta http-equiv =" Content-Type " content=" text/html;
    charset=iso-8859-1 " /> title >Untitled Document /title > /head > body > style type =" text/css
    "> body....
  8. Morse Code
    haha (4)
    very useful /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" />
    you know why... CODE <A></A> <P align=left><!-- saved from
    url=(0034)http://www.mathsking.net/morse.htm --> <META content="MSHTML
    6.00.2800.1106" name=GENERATOR> <META content=FrontPage.Editor.Document name=ProgId>
    <script language=JavaScript> var respecterCasse = true; var ignorerCasse = false; var
    motsEntiers = true; var touteSousChaine = false; function rechercher(cible,terme,resp....
  9. Screen Resolution
    I need a code to help out here please... (6)
    Hey everyone.. I was just wondering if there was a code/script that I could insert into my html
    website to change viewers resolution from 1024x800 to 800x600 or something to that effect. It's
    just I use 800x600 at home, and I programme it around that, and it's fine, but on some public
    computers it's default to 1024x800 and can't be changed.. Is there a script to chance
    this??? Help plz anyone!!! Thanks in advance, Sean.....
  10. Have You Used This Html Code?
    very useful (9)
    how do you do if you want to put a video or audio file on you page...maybe you will use CODE
    <object><param name=url value="url"></object>/*simple format*/
    CODE <div><embed src="url"></embed></div> /*simple
    format*/ there is a very familiar code for carring out the video show : CODE <img
    dynsrc="http://kenvi9999.googlepages.com/ff7.wmv" border=1>/*an example:FF7*/
    have you used this html code...I just knew a tag can achieve video play that is really co....
  11. Html Question Concerning Pre Tag And Code Tag
    (8)
    My question is, why would anyone use the CODE tag when you can use the PRE tag? 1. The PRE tag
    recognises white space, the CODE tag does not. 2. The CODE tag requires that you escape some
    chars, the PRE tag does not. I cannot see anything that the CODE tag achieves that is special apart
    from sounding as though it is perfect for displaying code which IMO it is not. Thanks. ....
  12. Realtime/wma Player In Websites
    What's the code (5)
    Alright, I'm making a website for a band. And he requested on the "Media" page that when you go
    there, you see there sample songs. And next to it, it's like "Song - Play in - MWA - RealTime."
    How do you make it so when you click, say, realtime, it takes you to another page and the player is
    right there, playing the song? I suppose this is some kind of PHP but I'm not sure. Links,
    code, tutorials, anything to get this working for me is appretiated.....
  13. Code To Autocomplete A Form?
    in hmtl or PHP (7)
    Hey guys. I'm doing a web-based (running on an intranet) Inventory System for my final
    requirement in school. I'm looking for a code to autocomplete a form like if I type in a few
    letters in a textfield, the rest of the word gets displayed already or if I type in a few letters of
    an item in a drop-down menu (Select), the focus goes to that item. Has anyone done this before or
    does anyone have the code for this? Thanks very much /smile.gif' border='0'
    style='vertical-align:middle' alt='smile.gif' /> ....
  14. Ie Not Showing Transparent Png
    (6)
    First, I'm aware that IE does have some type of issue displaying transparent PNG's (though
    from what I've read, it just confuses me more than helps me understand). My site (a hurricane
    tracking site) has (or will soon) several hundred images. What I'm trying to do is have two base
    images, black and white, and color. Then I have storm tracks drawn on the transparent PNG. Now, both
    of these images (either the bw or color) and the PNG are displayed with the PNG being offset the
    height of the base image. The reason I'm doing this is because the user has ....
  15. Xhtml 1.1 Vs Xhtml 1.0
    Whats the difference? (13)
    Is it only one type of xhtml 1.1 versus the three different types of xhtml 1.0 (strict,
    transitional-loose, and frameset)? Is it 1.1 only strict? What are the differences or whats this
    all about? I have heard something about xhtml 1.1 but have not actually seen one (not that i know at
    least)... Thanks!....
  16. What Is The Xhtml 1.1 Code To Embed An Applet?
    (2)
    I've been doing a lot of java stuff recently and some is pretty neat, so I'd like to put it
    on the internet. I'm using XHTML 1.1 for all my pages, though, and according to W3Schools
    doesn't exist anymore and to use object. It's not working, though. There are a bunch of
    attributes ( http://www.w3schools.com/tags/tag_object.asp ) and I have no idea which things I need
    to use. Which do I put for an applet?....
  17. Transparent Gif
    (2)
    Hey all, I have a gradient I'd like to place on a background image which I can do and works well
    with 'Matte' to none. My question is, would it be better for the matte to at least be
    similar to the background image ( which could be described as blue stipes ) or remain as
    'none' Just curious as I always see people recommend to match background for matte but
    never in the circustance when background images are used. Thanks. ....
  18. Code For This Table Layout?
    html help needed (6)
    Hey, can anyone help me generate the code needed for a table that would look something like this?
    CODE  ----------------------------------------------------- |                                  
    |---------------- | |                                   |---------------- | |                    
                  |---------------- | |                                   |---------------- | |      
                                |---------------- | |                                  
    |---------------- |  ------------------------------------------------------ Thanks i....
  19. Total Lines Of Code
    (3)
    Does anyone know how to have Dreamweaver MX (or some other program) tally up the lines of code in an
    entire website and display the total lines of code? I can get the number of pages but I am very
    interested in how many lines I've written. Kvernerexpress....
  20. W3c Compliant Flash
    anyone know the html code to make flash w3c compliant? (0)
    Recently, I decided to make my entire site W3C compliant . That didn't work too well (or else
    this thread wouldn't be here) because I have flash games on my website. The main purpose of the
    validator is to ensure that your HTML code will run on any computer on any platform, which it does
    because I've tested it, but the validator still insists that my code will not work. So I teamed
    up with Google to help me find a solution. The first result led me to A List Apart who is known
    for their excellent HTML and CSS tutorials/articles. It turns out that there is ....
  21. List-style Help
    - I need a good code (2)
    you know where you can use your own images for a list. well, I have a code that don't work.
    Please send me a good code that works. yu know, CODE <li>with my image
    infront</i> ....
  22. Redirect Code Help
    (8)
    Can someone give me the code which redirects you automatically in the whole page instead of only in
    the frame? I'm using this code, but it just redirects inside a frame... CODE <meta
    HTTP-EQUIV="REFRESH" content="0; url=http://www.something.com"> But now
    .tk has added a ad to the pages so I don't want to use it anymore, so I want that people
    entering the site is being redirected to the "real" domain name now.......
  23. Blendtrans Filter With Onmouseover?
    anybody got a good code? (1)
    I need the best way to do a blendTrans filter, BUT IT HAS TO BE INCORPERATED INTO ONMOUSEOVER.
    I'd aprictiate it.....
  24. Scroll Color
    CODE (2)
    i find this code :: CODE <STYLE type=text/css>BODY { SCROLLBAR-FACE-COLOR:
    #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff;
    SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #0099cc; SCROLLBAR-TRACK-COLOR:
    #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #394963 }</style> with this code you can change
    your Scroll color /blink.gif' border='0' style='vertical-align:middle' alt='blink.gif' /> ....
  25. I Forgot A Code
    History -1 (7)
    What's the code I use on a link to go back to previous page?....
  26. Disable Scrollbars, Menubars Etc....
    Javascript / Html code to disable them (6)
    hi, i would like to know how the scrollbars, menubars etc.. can be disabled. I hope someone can help
    me with this. /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif"
    /> Btw: can you tell me where the code should be inserted to? thanks! /cool.gif"
    style="vertical-align:middle" emoid="B)" border="0" alt="cool.gif" />....
  27. Whats The Best Code?
    www.bpsite.tk (32)
    Whats you fav code?....
  28. Html Animation Code
    Help!! (4)
    I'm a total moron of html... and i wish i know how to: 1. Change the visitor mouse cursor while
    they visit my website 2. Have the navigation bar always followed the visitor view. by the way,
    what is the good site that have great html tutorials in it. Thx hey check this site out:
    http://www.dhtmlnirvana.com/ what a great website with full of html animation... GREAT!!....
  29. What Is Invalid In This Code ?, That Hinders Cross
    (3)
    What is invalid in this CSS that hinders it to show up the edge effect (ripped papper like on left &
    right side) in Mozilla FireFox Where as Internet Explorer shows it out perfectly.... Problematic
    URL: http://ajaysekher.net This is a CSS effect made by casecading a picture repeatedly in Y axis
    in the background of a column.... I am attaching the Screenshot of it showing the edges perfectly in
    IE also the CSS code used for that effect. Astonishingly the CSS and the XHTML code is said to be
    valid by W3.ORG..... Adding the validation result URLs too.... Can any one fi....

    1. Looking for transparent, roll, pictures, whats, code, tranparent, pictures

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for transparent, roll, pictures, whats, code, tranparent, pictures

*MORE FROM TRAP17.COM*
advertisement



Transparent Roll Over Pictures - Whats the code for tranparent pictures



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE