Link For Image Transition

amitamberker · March 23, 2009

hey...i have the following js code for image transition. i would like incorporate links [urls] for those 7 different files [images]. how do i do it?

<html><head><script LANGUAGE="javascript"></SCRIPT></head><body><img src="images/01.jpg" name="slide" style="filter:blendTrans(duration=3)" width="320" height="240"><script>animation();</script></body></html>

justsomeguy · March 23, 2009

Now that is some seriously old code. Those if statements checking document.all are targeting Internet Explorer 4, circa 1997. The check for document.images is apparently checking if the browser supports images.You need to add a link around the image, and give it an ID. e.g.:<a id="slide_link"><img ...></a>You also need to give each image object a link attribute, I'll just call it href. e.g.:Image1.href = "http://www.google.com/";Then, to actually change the URL, before or after this line:document.images.slide.src=eval("Image"+step+".src")You can change the URL like this:document.getElementById('slide_link').setAttribute('href', eval('Image' + step + '.href'));

amitamberker · March 24, 2009

hey justsomeguy... sort of i am bit confused and lost. could you please show it to me placing on the code/script itself? and then if that is some seriously old code, i would like to know about new code for the same sort of image transition effect...

Now that is some seriously old code. Those if statements checking document.all are targeting Internet Explorer 4, circa 1997. The check for document.images is apparently checking if the browser supports images.You need to add a link around the image, and give it an ID. e.g.:<a id="slide_link"><img ...></a>You also need to give each image object a link attribute, I'll just call it href. e.g.:Image1.href = "http://www.google.com/";Then, to actually change the URL, before or after this line:document.images.slide.src=eval("Image"+step+".src")You can change the URL like this:document.getElementById('slide_link').setAttribute('href', eval('Image' + step + '.href'));

justsomeguy · March 24, 2009

If you want it to work in all browsers, I would recommend that you just use something like jquery. The code there will only work in IE, it's the only browser that uses those filters.I'd get an example of image transitions using jquery for you, but apparently I can no longer right-click. I guess I'll reboot. If you do a Google search for jquery image effects you should find several examples.

justsomeguy · March 24, 2009

Here's a tutorial about using jquery to crossfade between images:http://jqueryfordesigners.com/image-cross-fade-transition/

amitamberker · March 25, 2009

hey justsomeguy... feeling hard/difficult to understand - http://jqueryfordesigners.com/image-cross-fade-transition/ tutorial about using jquery to crossfade between images. let's proceed with the earlier once.

You need to add a link around the image, and give it an ID. e.g.:<a id="slide_link"><img ...></a>

like this?<a id="slide_link"><img src="images/01.jpg" name="slide" style="filter:blendTrans(duration=3)" width="320" height="240"></a>

You also need to give each image object a link attribute, I'll just call it href. e.g.:Image1.href = "http://www.google.com/";

like this?<script LANGUAGE="javascript"><!--Image1 = new Image();Image1.src = "images/01.jpg"Image1.href = "http://www.google.com/";

Then, to actually change the URL, before or after this line:document.images.slide.src=eval("Image"+step+".src")You can change the URL like this:document.getElementById('slide_link').setAttribute('href', eval('Image' + step + '.href'));

like this?if (document.all)slide.filters.blendTrans.apply()document.getElementById('slide_link').setAttribute('href', eval('Image' + step + '.href')); document.images.slide.src=eval("Image"+step+".src")if (document.all)slide.filters.blendTrans.play()whichimage=step

justsomeguy · March 25, 2009

Yeah, you've got it right.

amitamberker · March 26, 2009

Yeah, you've got it right.

but it's not working

can i send you the html file?

justsomeguy · March 26, 2009

Can you just post it here? Check for Javascript errors. It would be best to install Firebug for Firefox and develop using that, it generates much better error messages than IE does.

amitamberker · March 27, 2009

Can you just post it here? Check for Javascript errors. It would be best to install Firebug for Firefox and develop using that, it generates much better error messages than IE does.

here we gooo...<html><head><title>SlideShow</title><script LANGUAGE="javascript"></SCRIPT></head><body style="margin-top:0px"><table width="128" style="height: 160px" align="center"> <tr> <td> <a id="slide_link"><img src="images/01.jpg" name="slide" style="filter:blendTrans(duration=2)" border="0" /></a> <script>animation();</script></td> </tr></table></body></html>

justsomeguy · March 27, 2009

Change the images to generic objects instead.Image1 = new Object();

amitamberker · March 28, 2009

Change the images to generic objects instead.Image1 = new Object();

like this?Image1 = new Object();Image1.src = "images/01.jpg"Image1.href = "#";Image2 = new Object();Image2.src = "images/02.jpg"Image2.href = "#";Image3 = new Object();Image3.src = "images/03.jpg"Image3.href = "#";Image4 = new Object();Image4.src = "images/04.jpg"Image4.href = "#";Image5 = new Object();Image5.src = "images/05.jpg"Image5.href = "#";

amitamberker · March 31, 2009

hey justsomeguy... where are you? could you please confirm?

like this?Image1 = new Object();Image1.src = "images/01.jpg"Image1.href = "#";Image2 = new Object();Image2.src = "images/02.jpg"Image2.href = "#";Image3 = new Object();Image3.src = "images/03.jpg"Image3.href = "#";Image4 = new Object();Image4.src = "images/04.jpg"Image4.href = "#";Image5 = new Object();Image5.src = "images/05.jpg"Image5.href = "#";

jesh · March 31, 2009

Have you tried his suggestion? Does it work for you?

justsomeguy · March 31, 2009

hey justsomeguy... where are you?

Sorry, I have a life. Did you actually try the code to see what happens like a normal programmer would, or are you waiting for me to tell you what's going to happen? Your browser is going to make a better debugger than myself.

amitamberker · March 31, 2009

Sorry, I have a life. Did you actually try the code to see what happens like a normal programmer would, or are you waiting for me to tell you what's going to happen? Your browser is going to make a better debugger than myself.

no worries... yup! i can understand. yeah, i tried the code as per your guide and it worked great in my ie7 browser. did not check on mozilla and google chrome. but upon clicking on the images, it opens-up in same window. how do i make it open in a new window? i guess, perhaps i should add something at:~~~~~~~~~~~~~~~~~~~~Image1 = new Object();Image1.src = "images/01.jpg"Image1.href = "#";Image1-------------------~~~~~~~~~~~~~~~~~~~~

justsomeguy · March 31, 2009

You can just add a target to the link:<a id="slide_link" target="_blank">A window name of _blank means to always open a new window. If you give it another name it will open the window with that name if it doesn't exist, and reuse the same window for the other links pointing to the same name.

amitamberker · April 1, 2009

You can just add a target to the link:<a id="slide_link" target="_blank">A window name of _blank means to always open a new window. If you give it another name it will open the window with that name if it doesn't exist, and reuse the same window for the other links pointing to the same name.

okay gotch you. so it should be like this...<a id="slide_link" target="_blank"><img src="images/01.jpg" name="slide" style="filter:blendTrans(duration=2)" border="0" /></a><script>animation();</script>justsomeguy, something has happened to my notebook and hence i cannot try it on this desktop since the required html file is in notebook. will try it out as soon as i am back on my notebook.thanks and stay blessed...

amitamberker · April 2, 2009

You can just add a target to the link:<a id="slide_link" target="_blank">A window name of _blank means to always open a new window. If you give it another name it will open the window with that name if it doesn't exist, and reuse the same window for the other links pointing to the same name.

hey justsomeguy... it's working great. just wondering how to place the js code which is between <head>xxx</head> tag into an external test.js file? i mean, something similar like:

CSS.css File.email { font-family: Verdana; margin-top: 0; margin-bottom: 0; font-size: 11px; color: #FFFFFF; text-decoration: none;}.email:hover { font-family: Verdana; margin-top: 0; margin-bottom: 0; font-size: 11px; color: #C0C0C0; text-decoration: underline;}index.html File<head><link href="CSS.css" rel="stylesheet" type="text/css"></head><body><table width="128" style="height: 160px" align="center"><tr><td colspan="3"> <a class="email" href="index.html" title="abstract art">Abstract Gallery</a></td></tr></table></body>

justsomeguy · April 2, 2009

You can give a script tag a src attribute:http://www.w3schools.com/tags/att_script_src.asp

amitamberker · April 2, 2009

You can give a script tag a src attribute:http://www.w3schools.com/tags/att_script_src.asp

okay gotch you. so it would be like:<body><script type="text/javascript" src="test.js"></script></body>but can i place the script tag between head tags [just to be organized] instead of placing it in body tag? and how do i place the following code into test.js file instead of between head tags in html file? do i just need to remove the bolded once? Or?

<script LANGUAGE="javascript"></SCRIPT>

justsomeguy · April 2, 2009

Right, remove any non-Javascript code, it shouldn't have any HTML tags in the Javascript file. You can put a script tag in either the body or the head.

amitamberker · April 3, 2009

Right, remove any non-Javascript code, it shouldn't have any HTML tags in the Javascript file. You can put a script tag in either the body or the head.

yup! tried and it's working great... justsomeguy, can i retain the following comment tag in test.js file to differentiate or keep apart from one to another?or how about adding the following at the end of each scripts?window.onerror=animation~0~0~0~0~0~0~

jesh · April 3, 2009

You can't use comment lines like you've described. The following is how you write comments in java script:

/* This comment can span multiple lines	and is typically used to describe the purpose	of a function or to separate different	sections of your code like you've suggested */function aFunction(){	// This is a single line comment.	// To continue it on the next line, you have	// to keep using the double slashes in front of	// each line.}// If you want to use special characters, you can simply add// the double slashes in front of them:// ~0~0~0~0~0~0~

amitamberker · April 3, 2009

like this?/*Image1 = new Object();window.onerror=animation*//*2nd Script [Roll Over]*//*3rd Script [Menu]*/

Link For Image Transition

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived