• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 348
  • Last Modified:

How to put a link in a Java image array

Hi all i have a java image array
i would like to attach a link to each of the items in the array
the code is below could you please tell me how i do this
i have tried a few things but dones seem to work

the first code is a idea i had and didnt work

the 2nd is the working code with out the link
<!-- 
  Adby Designs
  By Adam Wolarczuk
  July 2011
-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">


	<head>
		<title>ORIA - Index</title>
	
		<meta http-equiv="content-script-type" content="text/javascript">
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<link href ="settings.css" rel="stylesheet"  >
			<style type="text/css">
				ul.a {list-style-type:none;}
				
			</style>
			<script type="text/javascript"><!--

				var img_array=new Array();
				img_array[0]="bc_melbourne_cup_60.png";
				img_array[1]="bc_oktoberfest_60.png";
				img_array[2]="bc_pro_am_60.png";
				
				
				    
				var linkURL = new Array();
				linkURL[0]="http://www.google.com";
				linkURL[1]="http://www.yahoo.com";
				linkURL[2]="http://www.webreference.com";
				
				for (i=0; i<links.length; i++) {
				document.write("<li>"+img_array[i].link(linkURL[i])+"</li>");

				var steps=15;			// How many steps would you like for fading?. Max is 100, min is 1.
				var gap=75;			// How long would you like the delay between each frame (in 1/1000 ths of a second)? Min is 1, max should be no more than 10000 (10 seconds).
				var show_img_gap=3000;		// How long would you like to show the image for before it starts to fade out again.
				var hide_img_gap=75;		// How long would you like to hide the image for before it starts to fade in again.

				steps=(steps<1 || steps>100)?15:Math.round(steps);
				gap=(gap<1)?75:Math.round(gap);
				show_img_gap=(show_img_gap<1)?75:Math.round(show_img_gap);
				hide_img_gap=(hide_img_gap<1)?75:Math.round(hide_img_gap);

					function controler_of_fade(){

				n=0;
  				m=0;
  				img_num=0;
  				fading="in";
  				fade();
				
				

			}

				function fade(){

  				document.getElementById("fader").src=img_array[img_num];

  				m=Math.round(n/steps*100);


  				document.getElementById("fader").style.filter="alpha(opacity="+m+")";	// IE fade.
  				document.getElementById("fader").style.MozOpacity=m/100;		// Gecko fade.
  				document.getElementById("fader").style.Opacity=m/100;			// Standards fade.

  				n+=(fading=="in")?1:(-1);

  				if(n==steps+1){
    				n-=2;
    				fading="out";
    				setTimeout("fade()",show_img_gap);
  				}
  				else if(n==0){
   					 fading="in";
    				img_num++;
    			if(img_num==img_array.length){img_num=0;}
    				setTimeout("fade()",hide_img_gap);
  				}
  				else{
   	 				setTimeout("fade()",gap);
  				}

				}
//--></script>

			
	</head>

<body onload="controler_of_fade();">

					<a href="https://www.google.com"><img src="bc_melbourne_cup_60.png" id="fader" alt="" width="371px" height="228px"></a>
             
            		<script type="text/javascript"><!--
						document.getElementById("fader").style.filter="alpha(opacity=0)";
						document.getElementById("fader").style.MozOpacity=0;
						document.getElementById("fader").style.Opacity=0;
				//--></script>

			
	</body>
</html>

Open in new window

<!-- 
  Adby Designs
  By Adam Wolarczuk
  July 2011
-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">


	<head>
		<title>ORIA - Index</title>
	
		<meta http-equiv="content-script-type" content="text/javascript">
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<link href ="settings.css" rel="stylesheet"  >
			<style type="text/css">
				ul.a {list-style-type:none;}
				
			</style>
			<script type="text/javascript"><!--

				var img_array=new Array();
				img_array[0]="bc_melbourne_cup_60.png";
				img_array[1]="bc_oktoberfest_60.png";
				img_array[2]="bc_pro_am_60.png";
				img_array[3]="images/out.png";
				


				var steps=15;			// How many steps would you like for fading?. Max is 100, min is 1.
				var gap=75;			// How long would you like the delay between each frame (in 1/1000 ths of a second)? Min is 1, max should be no more than 10000 (10 seconds).
				var show_img_gap=3000;		// How long would you like to show the image for before it starts to fade out again.
				var hide_img_gap=75;		// How long would you like to hide the image for before it starts to fade in again.

				steps=(steps<1 || steps>100)?15:Math.round(steps);
				gap=(gap<1)?75:Math.round(gap);
				show_img_gap=(show_img_gap<1)?75:Math.round(show_img_gap);
				hide_img_gap=(hide_img_gap<1)?75:Math.round(hide_img_gap);

					function controler_of_fade(){

				n=0;
  				m=0;
  				img_num=0;
  				fading="in";
  				fade();

			}

				function fade(){

  				document.getElementById("fader").src=img_array[img_num];

  				m=Math.round(n/steps*100);


  				document.getElementById("fader").style.filter="alpha(opacity="+m+")";	// IE fade.
  				document.getElementById("fader").style.MozOpacity=m/100;		// Gecko fade.
  				document.getElementById("fader").style.Opacity=m/100;			// Standards fade.

  				n+=(fading=="in")?1:(-1);

  				if(n==steps+1){
    				n-=2;
    				fading="out";
    				setTimeout("fade()",show_img_gap);
  				}
  				else if(n==0){
   					 fading="in";
    				img_num++;
    			if(img_num==img_array.length){img_num=0;}
    				setTimeout("fade()",hide_img_gap);
  				}
  				else{
   	 				setTimeout("fade()",gap);
  				}

				}
//--></script>

			
	</head>

<body onload="controler_of_fade();">

					<a href="https://www.google.com"><img src="bc_melbourne_cup_60.png" id="fader" alt="" width="371px" height="228px"></a>
             
            		<script type="text/javascript"><!--
						document.getElementById("fader").style.filter="alpha(opacity=0)";
						document.getElementById("fader").style.MozOpacity=0;
						document.getElementById("fader").style.Opacity=0;
				//--></script>

			
	</body>
</html>

Open in new window

0
awolarczuk
Asked:
awolarczuk
  • 6
  • 4
  • 3
1 Solution
 
Gurvinder Pal SinghCommented:
may be you can simply try setting a onclick event to the image element
0
 
awolarczukAuthor Commented:
gurvinder372: cool but will that still go through the images like this
if you wouldnt mind uysing my code as a example
0
 
ldavis07Commented:
You could try to create a "href" link to attach to each one of those and create separate file and then use the "_target" syntax to allow you to put it where you would like it to go
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
awolarczukAuthor Commented:
ldavis07:  Thanks for the suggestion is there ny way you could use my code and  test it for me
0
 
ldavis07Commented:
This is something right out of w3schools.com. Hope it helps you. I can not test it because i dont have the index file nor the other files on my computer to test it out.

<img src="image_w3default.gif" alt="W3Schools"
onmouseout="alert('Visit W3Schools!')" />
0
 
ldavis07Commented:
if that does not work here is a longer version that might just sort yours out . This is what i was referring to as for the target :)

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif"
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif"
}
</script>
</head>

<body>
<a href="http://www.w3schools.com" target="_blank" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1" /></a>
</body>
</html>
0
 
awolarczukAuthor Commented:
ldavis07:
HI doing this will kill my code and will not allow for my image to fade from one to another


thanks other thoughts
0
 
awolarczukAuthor Commented:
i fixed this
0
 
Gurvinder Pal SinghCommented:
Sorry, I could reply on time, it has been quite busy few weeks for me off lately.

what was the resolution?
0
 
awolarczukAuthor Commented:
<!--
  Adby Designs
  By Adam Wolarczuk
  July 2011
-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">


      <head>


<script language="JavaScript1.2">

var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6

// place your images, text, etc in the array elements here
var items = new Array();
    items[0]="<a href='link.htm' ><img alt='image0 (9K)' src=' bc_oktoberfest_60.png' height='288' width='371' border='0' /></a>"; //a linked image
    items[1]="<a href='link.htm'><img alt='image1 (9K)' src='bc_pro_am_60.png' height='288' width='371' border='0' /></a>"; //a linked image
    items[2]="<a href='link.htm'><img alt='image2 (9K)' src='bc_melbourne_cup_60.png' height='288' width='371' border='0' /></a>"; //a linked image
 
function rotater() {
    document.getElementById("placeholder").innerHTML = items[current];
    current = (current==items.length-1) ? 0 : current + 1;
    setTimeout("rotater()",howOften*1000);
}

function rotater() {
    if(document.layers) {
        document.placeholderlayer.document.write(items[current]);
        document.placeholderlayer.document.close();
    }
    if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
        if(document.all)
            placeholderdiv.innerHTML=items[current];

    current = (current==items.length-1) ? 0 : current + 1; //increment or reset
    setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//-->
</script>
</head>


<body>

<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>

</boby>
</html>
0
 
Gurvinder Pal SinghCommented:
but where are you setting the link to an image?
0
 
awolarczukAuthor Commented:
items[0]="<a href='link.htm' ><img alt='image0 (9K)' src=' bc_oktoberfest_60.png' height='288' width='371' border='0' /></a>"; //a linked image
0
 
Gurvinder Pal SinghCommented:
Good. Nice and simple solution.
You can improve on it by
-- giving the styling (width and height) in style tag.
-- remove border attribute, since its deprecated.

Good luck
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now