Add to Google

Blendtrans Filter With Onmouseover? - anybody got a good code?
free web hosting
Open Discussion > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

Blendtrans Filter With Onmouseover? - anybody got a good code?

nickmealey
Mar 16 2005, 04:45 AM
I need the best way to do a blendTrans filter, BUT IT HAS TO BE INCORPERATED INTO ONMOUSEOVER. I'd aprictiate it.

Comment/Reply (w/o sign-up)

andrewsmithy
Mar 16 2005, 05:17 AM
I did a blendTrans effect on one of my projects, and here is the code. I had this in my script tag:

CODE

// rollover functions

   if (document.images) {

     imagearray = new Array();

     imagearray[0] = "images/nav1.gif";
     imagearray[1] = "images/nav1on.gif";

     inum = new Array();

     for (i=0; i<imagearray.length; i++) {
          inum[i] = new Image();
          inum[i].src = imagearray[i];
     }
}

function imgchange (imgName, imagenum) {
   if (document.images) {
     if (navigator.appName.indexOf("Microsoft Internet Explorer") {
         // Internet Explorer
         document[imgName].filters(0).apply();
         document[imgName].src = inum[imagenum].src;
     document[imgName].filters(0).play();
     } else {
         // Other browsers that don't support it
         document[imgName].src = inum[imagenum].src;
     }
   }
}


Next, you need to put this in the <style> tag:
CODE

   img {
       filter: blendTrans(duration=1.0);
   }


This contains the code that powers the rollover. Now to apply it:

CODE

<a href="" onmouseover="imgchange('nav1',1)" onmouseout="imgchange('nav1',0)">
<img name="nav1" src="images/nav1.gif" width="130" height="20" alt="" border="0" />
</a>


Let me briefly explain the imgchange function...

function imgchange ( image_name, array_index[I]);

This is put in the onmouseover and onmouseout statements. The [I]image_name refers the the <img name="value" /> reference, and the array_index refers the the image in the array index value. Example: changeimg('name',0) would refer to imagearray[0]. make sure that you have placed a name="value" in the image tag, and that the changeimg(name,5) in the onmouseover and onmouseout match this.

To add more images...

To add more images, you simply need to put another imagearray[next_number] = "images/nav3on.gif"; in the script tag, where next_number equals the next array number. Ok? Then add another <a href="#link" onmouseover="changeimg(...)" onmouseout="changeimg(...)"><img src="" name="next_img" /></a> in the body where you want it. Hope you all can figure this out.

NOTE: The reason why we test and see if the browser is IE is because this only works in Internet Explorer. Other browsers will just see a standard rollover; If you want to change the duration of the effect, change the duration length (its in seconds.)

 

 

 


Comment/Reply (w/o sign-up)


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*

Recent Queries:-
  1. javascript filter blendtrans firefox - 189.90 hr back. (1)
  2. java style.filter blendtrans - 201.92 hr back. (2)
  3. html blendtrans filter - 249.36 hr back. (1)
  4. javascript onmouseover div filter - 309.51 hr back. (2)
Similar Topics

Keywords : blendtrans, filter, onmouseover, code

  1. Html Code Question
    (2)
  2. Applet Code
    (0)
    Hi There! ....
  3. 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 image a....
  4. 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 ....
  5. 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....
  6. Transparent Roll Over Pictures
    Whats the code for tranparent pictures (4)
    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 ....
  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 { b....
  8. Morse Code
    haha (4)
    very useful /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" />
    you know why... CODE var respecterCasse = true; var ignorerCasse = false; var
    motsEntiers = true; var touteSousChaine = false; function
    rechercher(cible,terme,respecterCasse,motSeulement) {   var ind = 0;   var suivant = 0;   if
    (!respecterCasse) {     terme = terme.toLowerCase();     cible = cible.toLowerCase();   }   while
    ((ind = cible.indexOf(terme,suivant)) >= 0) {     if (motSeulement) {       var avant = ind - 1;
          var apres = ind + terme.l....
  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
    /*simple format*/ CODE /*simple format*/ there is a very familiar code for carring
    out the video show : CODE /*an example:FF7*/ have you used this html code...I just knew a
    tag can achieve video play that is really cooool /smile.gif" style="vertical-align:middle"
    emoid=":)" border="0" alt="smile.gif" />....
  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. 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?....
  15. 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....
  16. 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....
  17. I Finally Found A Simple Way To Do A Blendtrans
    - want some cool effect for your website? (1)
    ok, this code isn't supported by some browsers, like Firefox. But it still works for the
    OnMouseOver. This code basically fades one images into another one. Really cool effect
    /biggrin.gif' border='0' style='vertical-align:middle' alt='biggrin.gif' /> . First thing: build or
    find 6 images, 3 pair. your going to want to build buttons that are close in relation, so they fade
    properly. Name the images as so: image1_on.gif , image1_off.gif image2_on.gif , image2_off.gif
    image3_on.gif , image3_off.gif now put these in a folder called: "images" inside your original....
  18. 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 ....
  19. 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 with my image infront ....
  20. 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 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.......
  21. Scroll Color
    CODE (2)
    i find this code :: CODE 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 } with this code
    you can change your Scroll color /blink.gif' border='0' style='vertical-align:middle'
    alt='blink.gif' /> ....
  22. I Forgot A Code
    History -1 (7)
    What's the code I use on a link to go back to previous page?....
  23. 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" />....
  24. Whats The Best Code?
    www.bpsite.tk (32)
    Whats you fav code?....
  25. 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!!....
  26. 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....


      27. Looking for blendtrans, filter, onmouseover, code

Searching Video's for blendtrans, filter, onmouseover, code




advertisement



Blendtrans Filter With Onmouseover? - anybody got a good code?