JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Help with Javascript please - refresh images with links

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Apr 2008
Posts: 3
Reputation: rowads80 is an unknown quantity at this point 
Solved Threads: 0
rowads80 rowads80 is offline Offline
Newbie Poster

Help with Javascript please - refresh images with links

 
0
  #1
Apr 5th, 2008
Hi,

Using Dreamweaver, I'm trying to implement code on my page so that the images refresh upon loading, and each image links to a different page....

I'm also trying to have it so images will rotate on the page and link to other pages within my site.

please help!

email: >email snipped<
thank you!
Last edited by MattEvans; Apr 7th, 2008 at 5:51 am. Reason: removed email address
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 22
Reputation: HenryGR is an unknown quantity at this point 
Solved Threads: 3
HenryGR's Avatar
HenryGR HenryGR is offline Offline
Newbie Poster

Re: Help with Javascript please - refresh images with links

 
0
  #2
Apr 6th, 2008
As far as I understand, what you need is 1) to create a functions that is called every time your page is loaded; tht's achieved with the onload="myfunction()" attribute within the <body> tag. and 2) the function needs to hold an array of pictures that can be presented randomly.
Am I correct? How much programming experience you have?
You keep going, have a Nice day!
Henry.

Before printing this message, make sure is necessary.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 3
Reputation: rowads80 is an unknown quantity at this point 
Solved Threads: 0
rowads80 rowads80 is offline Offline
Newbie Poster

Re: Help with Javascript please - refresh images with links

 
0
  #3
Apr 6th, 2008
1) to create a functions that is called every time your page is loaded; tht's achieved with the onload="myfunction()" attribute within the <body> tag. and 2) the function needs to hold an array of pictures that can be presented randomly.
Am I correct?

that is correct...and I need to have the pictures link to .html pages within my site.

How much programming experience you have?

very little. i'm a beginner.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 22
Reputation: HenryGR is an unknown quantity at this point 
Solved Threads: 3
HenryGR's Avatar
HenryGR HenryGR is offline Offline
Newbie Poster

Re: Help with Javascript please - refresh images with links

 
0
  #4
Apr 6th, 2008
OK!, I wrote a simple code that you may customize. It is created for 10 rolling pictures, but the number can easily be incremented just by adding more picture definition lines, the code will automatically adapt.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYP-E html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>My page</title>
  6. <script language="JavaScript" type="text/javascript">
  7. 	function mainelem(src,texto,url,targ,ancho) {
  8. 		this.src	= src;
  9. 		this.texto = texto;
  10. 		this.url = url;
  11. 		this.targ =	targ;
  12. 		this.ancho = ancho;
  13. 	}
  14. //
  15. 	var	elemActual = 0;
  16. 	var	topeElems =	100;
  17. 	var	i =	0;
  18. 	var	numElementos = 0;
  19. 	var	elementos =	new	Array(topeElems);
  20. 	elementos[i] = new mainelem("picture1.jpg","Alt text for pic1","linkto1.htm","_self",250); i++
  21. 	elementos[i] = new mainelem("picture2.jpg","Alt text for pic2","linkto2.htm","_self",250); i++
  22. 	elementos[i] = new mainelem("picture3.jpg","Alt text for pic3","linkto3.htm","_self",250); i++
  23. 	elementos[i] = new mainelem("picture4.jpg","Alt text for pic4","linkto4.htm","_self",250); i++
  24. 	elementos[i] = new mainelem("picture5.jpg","Alt text for pic5","linkto5.htm","_self",250); i++
  25. 	elementos[i] = new mainelem("picture6.jpg","Alt text for pic6","linkto6.htm","_self",250); i++
  26. 	elementos[i] = new mainelem("picture7.jpg","Alt text for pic7","linkto7.htm","_self",250); i++
  27. 	elementos[i] = new mainelem("picture8.jpg","Alt text for pic8","linkto8.htm","_self",250); i++
  28. 	elementos[i] = new mainelem("picture9.jpg","Alt text for pic9","linkto9.htm","_self",250); i++
  29. 	elementos[i] = new mainelem("picture0.jpg","Alt text for pic0","linkto0.htm","_self",250); i++
  30. 	numElementos = i;
  31.  
  32. 	function setnextcontent() {
  33. 		var	indice;
  34. 		var	aux;
  35.  
  36. 		if (elemActual >= (numElementos	- 1)) {
  37. 			indice = 0;
  38. 		}
  39. 		else {
  40. 			indice = parseInt(elemActual) +	1;
  41. 		}
  42. 		elemActual = indice;
  43. 		var	elem = elementos[indice];
  44. 		document.getElementById("fotoPpal").src	= elem.src;
  45. 		document.getElementById("fotoPpal").alt	= elem.texto;
  46. 		document.getElementById("fotoPpal").width = elem.ancho;
  47. 		document.getElementById("refPpal").href	= elem.url;
  48. 		document.getElementById("refPpal").target =	elem.targ;
  49. 		document.getElementById("masInfo").innerHTML = elem.texto;
  50. 	}
  51. 	function ponContenidoPpalRandom() {
  52. 		var	indice;
  53. 		var	aux;
  54.  
  55. 		indice = Math.round(Math.random()*(numElementos-1))+0;
  56. 		elemActual = indice;
  57.  
  58. 		var	elem = elementos[indice];
  59. 		document.getElementById("fotoPpal").src	= elem.src;
  60. 		document.getElementById("fotoPpal").alt	= elem.texto;
  61. 		document.getElementById("fotoPpal").width = elem.ancho;
  62. 		document.getElementById("refPpal").href	= elem.url;
  63. 		document.getElementById("refPpal").target =	elem.targ;
  64. 		document.getElementById("masInfo").innerHTML = elem.texto;
  65. 	}
  66. </script>
  67. <body id="homebody" onLoad="ponContenidoPpalRandom();">
  68. <div align="center">
  69.   <div align="center" style="width:250px; overflow:hidden; "> <a id="refPpal" href="#" target="_blank" ><img id="fotoPpal" alt="default image" border="0" width="250" src="default.jpg" /></a> </div>
  70.   <div id="masInfo" class="bodytext" align="center">
  71.     <!-- Photo caption -->
  72.     &nbsp;</div>
  73.   <script language="JavaScript"	type="text/javascript">setInterval("setnextcontent();",5000);</script>
  74. </div>
  75. </body>
  76. </html>

the onLoad="ponContenidoPpalRandom();" within the body tag, will show one randomly selected picture at every load and pictures will hence appear consecutively every half a second.

Hope this helps.
You keep going, have a Nice day!
Henry.

Before printing this message, make sure is necessary.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 2
Reputation: kaha is an unknown quantity at this point 
Solved Threads: 0
kaha kaha is offline Offline
Newbie Poster

Re: Help with Javascript please - refresh images with links

 
0
  #5
May 10th, 2009
This was almost exactly what I was looking for!!

However I don't want the pictures to change every half second just when the page is refreshed. Not very good with coding, but I took out a bit of coding that i thought was right to eliminate to make a new picture only appear when the page is reloaded.
I'm also trying to make the text underneath the picture to link...but i'm only destroying the code when i do that...
Can anybody help me alter this code so
1) The pictures are not changing every half second
2) Make the the text underneath the picture link as well as the picture.

Thanks a lot!!
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 836
Reputation: Airshow is on a distinguished road 
Solved Threads: 120
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Help with Javascript please - refresh images with links

 
0
  #6
May 13th, 2009
Refactoring Henry's code into a more familiar pattern (and building in a bit of flexibility), we get this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <script language="JavaScript" type="text/javascript">
  2. var	randomImage = function(){
  3. 	var	elementos = [];
  4. 	return {
  5. 		add : function(src, texto, url, targ, ancho){
  6. 			elementos.push({src:src, texto:texto, url:url, targ:targ, ancho:ancho});
  7. 		},
  8. 		setElemIDs : function(linkID, imgID, captionID){
  9. 			this.linkElem = (document.getElementById) ? document.getElementById(linkID) : document.all[linkID];
  10. 			this.imgElem = (document.getElementById) ? document.getElementById(imgID) : document.all[imgID];
  11. 			this.captionElem = (document.getElementById) ? document.getElementById(captionID) : document.all[captionID];
  12. 		},
  13. 		random : function(interval, captionLink){
  14. 			interval = (!interval) ? null : interval;
  15. 			captionLink = (!captionLink) ? false : true;
  16. 			indice = Math.min( Math.floor(Math.random()*(elementos.length)), elementos.length-1 );
  17. 			if(this.linkElem){
  18. 				this.linkElem.href = elementos[indice].url;
  19. 				this.linkElem.target = elementos[indice].targ;
  20. 			}
  21. 			if(this.imgElem){
  22. 				this.imgElem.src = elementos[indice].src;
  23. 				this.imgElem.alt = elementos[indice].texto;
  24. 				this.imgElem.width = elementos[indice].ancho;
  25. 			}
  26. 			if(this.captionElem){
  27. 				if(captionLink) {
  28. 					this.captionElem.firstChild.href = elementos[indice].url;
  29. 					this.captionElem.firstChild.innerHTML = elementos[indice].texto;
  30. 				}
  31. 				else{
  32. 					this.captionElem.innerHTML = elementos[indice].texto;
  33. 				}
  34. 			}
  35. 			if(interval !== null) { setInterval('randomImage.random(' + interval + ', ' + captionLink + ');', interval); }
  36. 		}
  37. 	};
  38. }();
  39. randomImage.add("picture1.jpg", "Alt text for pic1", "linkto1.htm", "_self", 250);
  40. randomImage.add("picture2.jpg", "Alt text for pic2", "linkto2.htm", "_self", 250);
  41. randomImage.add("picture3.jpg", "Alt text for pic3", "linkto3.htm", "_self", 250);
  42. randomImage.add("picture4.jpg", "Alt text for pic4", "linkto4.htm", "_self", 250);
  43. randomImage.add("picture5.jpg", "Alt text for pic5", "linkto5.htm", "_self", 250);
  44. randomImage.add("picture6.jpg", "Alt text for pic6", "linkto6.htm", "_self", 250);
  45. randomImage.add("picture7.jpg", "Alt text for pic7", "linkto7.htm", "_self", 250);
  46. randomImage.add("picture8.jpg", "Alt text for pic8", "linkto8.htm", "_self", 250);
  47. randomImage.add("picture9.jpg", "Alt text for pic9", "linkto9.htm", "_self", 250);
  48. randomImage.add("picture0.jpg", "Alt text for pic0", "linkto0.htm", "_self", 250);
  49.  
  50. onload = function(){
  51. 	randomImage.setElemIDs("refPpal", "fotoPpal", "masInfo");
  52. 	randomImage.random(null, false);
  53. }
  54. </script>
The great thing now is that you can control the behaviour without having to rewrite the code.

See the line right at the bottom, randomImage.random(null, false); . That's the flexible bit. The parameters are as follows:

randomImage.random(interval, captionLink);
  • interval : time in milliseconds between automatic "rollovers". Set to   null  for no rollover.
    • 

  • captionLink : true = caption is a clickable link; false = caption is text only.
    •
Examples:
  • randomImage.random(null, false); //No rollovers, text-only caption
  • randomImage.random(5000, false); //5 second rollovers, text-only caption
  • randomImage.random(null, true); //No rollovers, caption is clickable
  • randomImage.random(7000, true); //7 second rollovers, caption is clickable
Should keep everyone happy. Well, I doubt it but here's hoping.

Airshow
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 2
Reputation: kaha is an unknown quantity at this point 
Solved Threads: 0
kaha kaha is offline Offline
Newbie Poster

Re: Help with Javascript please - refresh images with links

 
0
  #7
May 16th, 2009
Oh great this is perfect! Thanks Airshow.
I actually found another code that I used cause I had to get it working so quickly. It works pretty good, the only thing is that the caption under the picture doesn't link, but the neat thing is that it is short and sweet. So that had to do for now. But I might update now with your help here.
Anyways if anyone would like to use the code I used it's here:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. var img_rnd = new Array ("image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg");
  3. var text_rnd = new Array ("Text 1", " Text 2", " Text 3", "Text 4");
  4. var i = Math.round(3 * Math.random());
  5.  
  6. document.write('<a href=link.html><img class=border src="' + img_rnd[i] + '"</a><br/>' + text_rnd[i]);
  7. </script>



•
•
•
•
Originally Posted by Airshow View Post
Refactoring Henry's code into a more familiar pattern (and building in a bit of flexibility), we get this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <script language="JavaScript" type="text/javascript">
  2. var	randomImage = function(){
  3. 	var	elementos = [];
  4. 	return {
  5. 		add : function(src, texto, url, targ, ancho){
  6. 			elementos.push({src:src, texto:texto, url:url, targ:targ, ancho:ancho});
  7. 		},
  8. 		setElemIDs : function(linkID, imgID, captionID){
  9. 			this.linkElem = (document.getElementById) ? document.getElementById(linkID) : document.all[linkID];
  10. 			this.imgElem = (document.getElementById) ? document.getElementById(imgID) : document.all[imgID];
  11. 			this.captionElem = (document.getElementById) ? document.getElementById(captionID) : document.all[captionID];
  12. 		},
  13. 		random : function(interval, captionLink){
  14. 			interval = (!interval) ? null : interval;
  15. 			captionLink = (!captionLink) ? false : true;
  16. 			indice = Math.min( Math.floor(Math.random()*(elementos.length)), elementos.length-1 );
  17. 			if(this.linkElem){
  18. 				this.linkElem.href = elementos[indice].url;
  19. 				this.linkElem.target = elementos[indice].targ;
  20. 			}
  21. 			if(this.imgElem){
  22. 				this.imgElem.src = elementos[indice].src;
  23. 				this.imgElem.alt = elementos[indice].texto;
  24. 				this.imgElem.width = elementos[indice].ancho;
  25. 			}
  26. 			if(this.captionElem){
  27. 				if(captionLink) {
  28. 					this.captionElem.firstChild.href = elementos[indice].url;
  29. 					this.captionElem.firstChild.innerHTML = elementos[indice].texto;
  30. 				}
  31. 				else{
  32. 					this.captionElem.innerHTML = elementos[indice].texto;
  33. 				}
  34. 			}
  35. 			if(interval !== null) { setInterval('randomImage.random(' + interval + ', ' + captionLink + ');', interval); }
  36. 		}
  37. 	};
  38. }();
  39. randomImage.add("picture1.jpg", "Alt text for pic1", "linkto1.htm", "_self", 250);
  40. randomImage.add("picture2.jpg", "Alt text for pic2", "linkto2.htm", "_self", 250);
  41. randomImage.add("picture3.jpg", "Alt text for pic3", "linkto3.htm", "_self", 250);
  42. randomImage.add("picture4.jpg", "Alt text for pic4", "linkto4.htm", "_self", 250);
  43. randomImage.add("picture5.jpg", "Alt text for pic5", "linkto5.htm", "_self", 250);
  44. randomImage.add("picture6.jpg", "Alt text for pic6", "linkto6.htm", "_self", 250);
  45. randomImage.add("picture7.jpg", "Alt text for pic7", "linkto7.htm", "_self", 250);
  46. randomImage.add("picture8.jpg", "Alt text for pic8", "linkto8.htm", "_self", 250);
  47. randomImage.add("picture9.jpg", "Alt text for pic9", "linkto9.htm", "_self", 250);
  48. randomImage.add("picture0.jpg", "Alt text for pic0", "linkto0.htm", "_self", 250);
  49.  
  50. onload = function(){
  51. 	randomImage.setElemIDs("refPpal", "fotoPpal", "masInfo");
  52. 	randomImage.random(null, false);
  53. }
  54. </script>
The great thing now is that you can control the behaviour without having to rewrite the code.

See the line right at the bottom, randomImage.random(null, false); . That's the flexible bit. The parameters are as follows:

randomImage.random(interval, captionLink);
  • interval : time in milliseconds between automatic "rollovers". Set to   null  for no rollover.
    • 

  • captionLink : true = caption is a clickable link; false = caption is text only.
    •
Examples:
  • randomImage.random(null, false); //No rollovers, text-only caption
  • randomImage.random(5000, false); //5 second rollovers, text-only caption
  • randomImage.random(null, true); //No rollovers, caption is clickable
  • randomImage.random(7000, true); //7 second rollovers, caption is clickable
Should keep everyone happy. Well, I doubt it but here's hoping.

Airshow
Last edited by peter_budo; May 17th, 2009 at 4:32 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 119
Reputation: JugglerDrummer is an unknown quantity at this point 
Solved Threads: 15
JugglerDrummer's Avatar
JugglerDrummer JugglerDrummer is offline Offline
Junior Poster

Re: Help with Javascript please - refresh images with links

 
0
  #8
May 17th, 2009
You might want to look into setInterval() to get things to happen every second.
92% of all statistics are made up on the spot.

If you found a post helpful, please click the "give XXX reputation" link, to show your appreciation to those who helped you. Thanks! :D
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp animate array automatically beta box bug calendar cart checkbox class codes column cookies createrange() css cursor date debugger decimal design dom download dropdown editor element embed enter error explorer firefox focus frameworks getselection google gwt hint html htmlform ie7 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math menu microsoft mimic mp4 object onmouseover parent paypal php player position post problem programming progressbar prototype redirect regex runtime safari scale scriptlets search select session shopping size sql text textarea toggle variables w3c website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC