Images and js script

@iONicDec 04.2009

Hi all,
I am new here and, of course, am looking for some help. I got wrangled in by some user of another forum to help out with some scripting.

Here is the scenario:

The first script would be… on page load. Thus on load waite 5 seconds then swap an existing image to another by a fade transition.

The second option or script would be onMouseOver fade image1 to image2 via a
fase transition. The mouse over action would be with a image graphics. At the same time changing the onMouseOver graphisc as well.

The third script would be onClick (the image graphics) to fade transition image2 to image3.

onMouseOut restore to image1

A second button graphics would be identical, but would change image2 to image4…etc

I appreciate the help.

to post a comment

JavaScript

4 Comments(s) _↴

@mityaDec 04.2009 — #Welcome to the forum. If you're new, let me give you a tip: I have never seen a post which asks outright for someone to write their scripts, rather than providing a framework and at least showing effort, get replies.

Post us some code, show us you're trying, and we'll sure help out.

@iONicauthorDec 05.2009 — #Welcome to the forum. If you're new, let me give you a tip: I have never seen a post which asks outright for someone to write their scripts, rather than providing a framework and at least showing effort, get replies.

Post us some code, show us you're trying, and we'll sure help out.[/QUOTE]

My apologies mitya and others. I was too rushed at the time to go into more detail.

Here is what I have been working with.

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script type="text/javascript">
 
 /*****************************************
 * Dissolving Image Rollover- By Roy Whittle (http://www.javascript-fx.com/)
 * Featured on/available at http://www.dynamicdrive.com/
 * This notice must stay intact for use
 *****************************************/
 
 //Generate transition CSS (transition=0 to 23)
 document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>');
 
 //Uncomment the next line for fading rollovers instead of dissolving:
 //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("red",  "red_on.gif");
 Rollover("green", "green_on.gif");
 Rollover("blue", "blue_on.gif");
 Rollover("car1",  "car1.jpg");
 Rollover("car2", "car2.jpg");
 Rollover("car_rr", "car_rr.jpg");
 
 </script>
 </head>
 
 <body>
 
 <a href = ""
 onMouseOver="turnOn('red');"
 onMouseOut="turnOff('red');"><img name="red" class="imgTrans"
 onClick="turnOn('car2');"
 src="red_off.gif" border="0"></a><br>
 
 <a href = ""
 onMouseOver="turnOn('green');"
 onMouseOut="turnOff('green');"><img name="green" class="imgTrans"
 src="green_off.gif" border="0"></a><br>
 
 <a href = ""
 onMouseOver="turnOn('blue');"
 onMouseOut="turnOff('blue');"><img name="blue" class="imgTrans"
 src="blue_off.gif" border="0"></a><br>
 
 <a href = ""
 onMouseOver="turnOn('car2');"
 onMouseOut="turnOff('car2');"><img name="car2" class="imgTrans"
 src="car1.jpg" border="0"></a><br>
 
 
 <br>
 
 </body>
 
 </html>[/CODE]

As it stands now onMouseOver fading works with the graphics (red, green, blue, and car) However, the onMouseOver of the button graphics (red, Green, and blue) need to not only fade/change their own selves, but also the "car" graphics.

I also cant remember what to put in between the quotes after [CODE]<a href = ""[/CODE] to, sort of, disable the hyperlink.

Thanks again

@iONicauthorDec 07.2009 — #Working with new scripts:

[CODE]<html>
 <head>
 <title>Test</title>
 <script type="text/javascript">
 
 /*****************************************
 * Dissolving Image Rollover- By Roy Whittle
 * This notice must stay intact for use
 *****************************************/
 
 //Generate transition CSS (transition=0 to 23)
 document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.7,transition=12) }</STYLE>');
 
 //Uncomment the next line for fading rollovers instead of dissolving:
 document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.7) }</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;
 }
 
 function redon(imgName, imgSrc)
 {
 onCick="turnOn('car_rr');"
 
 }
 
 //Specify name of participating images, plus paths to their onMouseover replacements:
 Rollover("rr",  "rr_on.png");
 Rollover("ijm", "ijm_on.png");
 Rollover("rsp", "rsp_on.png");
 Rollover("as", "as_on.png");
 Rollover("car1",  "car1.jpg");
 Rollover("car2", "car2.jpg");
 Rollover("car_rr", "car_rr.jpg");
 Rollover("car_gr", "car_gr.jpg");
 Rollover("car_bl", "car_bl.jpg");
 
 </script>
 
 <script language="javascript" type="text/javascript">
 function btn_on_1( img )
 {
 document.btn1.src = img;
 }
 function btn_on_2( img )
 {
 document.btn2.src = img;
 }
 function btn_on_3( img )
 {
 document.btn3.src = img;
 }
 function btn_on_4( img )
 {
 document.btn4.src = img;
 }
 function imgChangeCar( img )
 {
 document.car.src = img;
 }
 function lights_on( img )
 {
 document.car.src = img;
 }
 </script>
 </head>
 <body>
 <table border="0" cellpadding="10" summary="">
 <tr>
 <td width="110" rowspan="1" colspan="1">
 <img id="btn1"
 onclick="lights_on('carimgs/car_rr.jpg')"
 onmouseover="btn_on_1('carimgs/rr_on.png'); turnOn('car_rr')"
 onmouseout="btn_on_1('carimgs/rr_off.png'); imgChangeCar('carimgs/car1.jpg')"
 src="carimgs/rr_off.png" alt="rr turned off" border="0" name="btn1"></img></br></br>[/CODE]

I am having trouble with one item. Most things are working.

1) when I mouseover the button(btn1) the button image changes.

2) whe I click the button the car image changes from car1.jpg to car_rr.jpg

but onmouse over the car1.jpg image does not transition using the fade script and the function turnOn, thus fading in car1.jpg to car2.jpg

can anyone point me in the right direction?

Thanks

@iONicauthorDec 14.2009 — #Alright, I give up...

Also in #JavaScript _↴

how to vonvert char to int?Javascript Login website instant messenger script...

Success!

Help @iONic spread the word by sharing this article on Twitter...

Tweet This

Images and js script

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Images and js script

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴