• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 353
  • 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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

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