Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> I Finally Found A Simple Way To Do A Blendtrans, - want some cool effect for your website?
nickmealey
post Apr 30 2005, 03:27 AM
Post #1


Premium Member
********

Group: Members
Posts: 156
Joined: 14-March 05
From: Washington, USA
Member No.: 4,520
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 . 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 one

set this code inside your javascript tags


CODE

//Generate transition CSS (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:BlendTrans(duration=0.4) }</STYLE>');



var onImages=new Array();
function Rollover(imgName, imgSrc)
{
onImages[imgName] = new Image();
onImages[imgName].src = imgSrc;
}

function turnOn(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].apply();
document.images[imgName].offSrc = document.images[imgName].src;
document.images[imgName].src = onImages[imgName].src;
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].play();
}

function turnOff(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].stop();
document.images[imgName].src = document.images[imgName].offSrc;
}

//Specify name of participating images, plus paths to their onMouseover replacements:
Rollover("image1", "images/image1_on.gif");
Rollover("image2", "images/image2_on.gif");
Rollover("image3", "images/image3_on.gif");



next: set this in your body tags

CODE


<a href = "http://www.dynamicdrive.com" onMouseOver="turnOn('image1');" onMouseOut="turnOff('image1');"><img name="image1" class="imgTrans" src="images/image1_off.gif" border="0"></a><br>


<a href = "http://www.dynamicdrive.com" onMouseOver="turnOn('image2');" onMouseOut="turnOff('image2');"><img name="image1" class="imgTrans" src="images/image2_off.gif" border="0"></a><br>

<a href = "http://www.dynamicdrive.com" onMouseOver="turnOn('image3');" onMouseOut="turnOff('image3');"><img name="image1" class="imgTrans" src="images/image3_off.gif" border="0"></a><br>




so, lets wrap this up into a page:


CODE


<html>
<head>

<script type="text/javascript">



//Generate transition CSS (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:BlendTrans(duration=0.4) }</STYLE>');



var onImages=new Array();
function Rollover(imgName, imgSrc)
{
onImages[imgName] = new Image();
onImages[imgName].src = imgSrc;
}

function turnOn(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].apply();
document.images[imgName].offSrc = document.images[imgName].src;
document.images[imgName].src = onImages[imgName].src;
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].play();
}

function turnOff(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].stop();
document.images[imgName].src = document.images[imgName].offSrc;
}

//Specify name of participating images, plus paths to their onMouseover replacements:
Rollover("image1", "images/image1_on.gif");
Rollover("image2", "images/image2_on.gif");
Rollover("image3", "images/image3_on.gif");


</script>

</head>

<body>

<a href = "http://www.dynamicdrive.com" onMouseOver="turnOn('image1');" onMouseOut="turnOff('image1');"><img name="image1" class="imgTrans" src="images/image1_off.gif" border="0"></a><br>


<a href = "http://www.dynamicdrive.com" onMouseOver="turnOn('image2');" onMouseOut="turnOff('image2');"><img name="image1" class="imgTrans" src="images/image2_off.gif" border="0"></a><br>

<a href = "http://www.dynamicdrive.com" onMouseOver="turnOn('image3');" onMouseOut="turnOff('image3');"><img name="image1" class="imgTrans" src="images/image3_off.gif" border="0"></a><br>



</body>
</html>






Hope that worked for you wink.gif

(list)

Go to the top of the page
 
+Quote Post
mbd5882
post Apr 30 2005, 07:41 PM
Post #2


Premium Member
********

Group: Members
Posts: 176
Joined: 26-April 05
From: Manchester
Member No.: 6,203
Really cool, Like it alot.
Really, Thanks for this code.

Thanks,
FFC Webmaster,
Asad Haider.

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · HTML, XML etc.. · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Tips on creating a good website!(8)
  2. Website Security(2)
  3. Blendtrans Filter With Onmouseover?(1)
  4. Optimizing Website?(10)
  5. Ftp Website(0)
  6. Website Copy Protection(15)
  7. Html Templates(3)
  8. Making A Refresh Link On Your Website.(16)
  9. How Do I Mirror A Website?(4)
  10. Website Deployment Problems(3)
  11. Background Image Picture On A Website(3)
  12. How To Make Cms For My Dynamic Website?(3)
  13. Help With Website Layout Correction For All Browsers(4)
  14. Making This Website Automatically Scale For Browsers(1)
  15. Website Problems Please Help(6)
  1. Website Drop Shadow Effect Help(7)
  2. Build A Website(11)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th July 2008 - 05:33 AM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation