Random image - link target

**matt punga** · 05-07-2008, 04:20 AM

This may be a really simple question, but if someone could help me out please:

I am using this script -

<SCRIPT LANGUAGE="JavaScript">

var dt = new Date();
var sec = dt.getSeconds();

if (sec<=20) { var banner="<IMG SRC= images/assoc1.jpg>"; document.write
(banner.link("http://www.42below.com")) ;}

else if (sec<=40) { var banner="<IMG SRC= images/assoc2.jpg>"; document.write
(banner.link("http://www.bloomsberry.com")) ;}

else { var banner="<IMG SRC= images/assoc3.jpg>"; document.write
(banner.link("http://www.stolengirlfriendsclub.com")) ;}

</SCRIPT>

to display random images when people go on the site. they link ok but i can't work out how to set the target to blank.

as a side - i also can't work out how to put this within the head and locate it in the body so this whole script is in a table cell.

any help appreciated.

ta

**rangana** · 05-07-2008, 05:01 AM

Code:

<script LANGUAGE="JavaScript">

if (sec<=20) { var banner="<IMG SRC= images/assoc1.jpg>"; document.write
(banner.link("http://www.42below.com")) ;}

Highlighted are deprecated

Here's a "modern" random image script with link

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
img{border:0;}
table{margin:auto;}
td{border:1px solid #222;}
</style>

<script type="text/javascript">
/***************************************/
/* Author: Raymond Angana
/* rangana in DDForums
/* Title: Random Image Script
/**************************************/
function rangRand()
{
delay=10000; //This is computed per milliseconds 1000 equals 1second
/****************************************Edit values here for your pictures*******************/

var pic1='<a href="http://www.42below.com"><img src="images/assoc1.jpg" alt="myimage"></a>';

var pic2='<a href="http://www.bloomsberry.com"><img src="images/assoc2.jpg" alt="myimage"></a>';

var pic3='<a href="http://www.stolengirlfriendsclub.com"><img src="images/assoc2.jpg" alt="myimage"></a>';

/********************************************End of Edit*********************************/

var rangPics=[pic1,pic2,pic3]; // Add all the picture variables in this array.

   rangRandom=Math.floor(Math.random()*rangPics.length);
   document.getElementById('show').innerHTML=rangPics[rangRandom];
setTimeout('rangRand()',delay);
}
window.onload=rangRand;
</script>

</head>
<body>
<table>
<tr>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td id="show"></td>
</tr>
<tr>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
</tr>
</table>
</body>
</html>

You can control where you want the image to appear, just take not of your <td>'s id. In my case, it's show.

Hope that helps

**matt punga** · 05-07-2008, 05:16 AM

THANK YOU

now i can stop denting my desk with my head

**jscheuer1** · 05-07-2008, 01:58 PM

Hey rangana, innerHTML is even worse than document.write - it was never part of any standard, and as far as I know, document.write is still a fully supported part of ECMAScript. The language attribute has been deprecated. If you want to use modern techniques that are a part of the standard, use the DOM.

However, for something as simple as a random link and/or image, you can have an existing link and/or image tag and just change their attributes (like href, src, and alt, etc.). That way, there can easily be a fall back for non-javascript enabled browsers.

**matt punga** · 05-07-2008, 09:34 PM

hi john,

so are you able to give me a script that will work for this?

ta

matt

**matt punga** · 05-07-2008, 09:38 PM

ideally i would like it so that each time you go to a different page a different image shows up (and stays like that) - not that the image changes every x seconds.

this script will be used on a few pages so i don't want the same image appearing first everytime.

any ideas?

thanks

**rangana** · 05-08-2008, 12:00 AM

Oh....john, thank you for reminding me from my sloppy coding skills.

http://www.webstandards.org/2006/04/13/dom-builder/

**jscheuer1** · 05-08-2008, 04:37 AM

Originally Posted by matt punga

hi john,

so are you able to give me a script that will work for this?

ta

matt

I was addressing my remarks to rangana. However, something could be worked out. I didn't mean to say that I disapproved of rangana's code either. I was basically just calling him on his misuse of the term 'deprecated'. And I was suggesting alternatives to innerHTML if he were as concerned as he seemed to be about avoiding all methods that might at some point stop being supported.

It is my opinion that unless you are likely to migrate to genuine strict XHTML (which is quite different than just slapping an XHTML strict DOCTYPE on an HTML page - a popular but misguided practice), there is nothing wrong with innerHTML for something like this. It will continue to be supported virtually forever for pages parsed as HTML with javascript. The only real problem for innerHTML in such an environment is its unexpected results in certain complex situations. This little image script isn't one of those.

**jscheuer1** · 05-09-2008, 04:27 PM

This should work out:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Random Image-Link w/Cookie - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
table {
margin:auto;
}
td {
border:1px solid #222;
}
/* Random Image-Link w/Cookie Styles */
 /* common style for javascript and non-javascript */
.ads { /* set to width and height of image(s) */
width:100px;
height:50px;
}
.ads img {
border:0;
display:block;
width:100px; /* set to width and height of image(s) */
height:50px;
}
 /* javascript only */
.ads #randomLnk {
visibility:hidden; /* keeps image from displaying empty image token or alt value until loaded */
}
 /* non-javascript only */
#ads {
display:none; /* keeps javascript image division from showing when javascript is disabled */
}
/* End Random Image-Link w/Cookie Styles */
</style>

<script type="text/javascript">

/* Random Image-Link w/Cookie ©2008 John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums/
   username:jscheuer1  This Notice Must Remain for Legal Use
   */

var rpic = {

imgLnks:[ /* 'Image', 'Link', */
'images/assoc1.jpg', 'http://www.42below.com',
'images/assoc2.jpg', 'http://www.bloomsberry.com',
'images/assoc3.jpg', 'http://www.stolengirlfriendsclub.com' //NOTE - no comma after last link entry
],
imgId:'randomPic', lnkId:'randomLnk', divId:'ads',

///////////////////// Stop Editing /////////////////////

diag:false, // default - false (use 'alert' to track selected index numbers, 'kill' to kill the cookie, or 'alert kill' for both)
prep:function(){
document.write('<style type="text/css">#'+rpic.divId+' {display:block;}<\/style>');
},
reveal:function(){
document.getElementById(rpic.lnkId).style.visibility='visible';
},
doit:function(){
var r=rpic, n=Math.floor(Math.random()*(r.imgLnks.length/2))*2;
if(/alert/.test(r.diag))
	alert(n+' '+r.taste('randomNum')); // Diagnostic use only
if(r.taste('randomNum'))
	while(r.sift(n))
	n=n<=r.imgLnks.length-4? n+2 : 0;
if(/alert/.test(r.diag))
	alert(n); // Diagnostic use only
document.getElementById(r.imgId).onload=r.reveal;
document.getElementById(r.imgId).src=r.imgLnks[n++];
document.getElementById(r.lnkId).href=r.imgLnks[n--];
r.bake('randomNum', (r.taste('randomNum')? r.taste('randomNum')+'::'+n : n))
if(/kill/.test(r.diag))
	r.eat('randomNum'); // Diagnostic use only
},
sift:function(n){
var r=rpic, na=r.taste('randomNum').split('::');
if(na.length*2>=r.imgLnks.length){
	r.bake('randomNum', (na=r.taste('randomNum').replace(/^.*::(\d+)$/,'$1')));
	na=[na];
	na.length=1;
	}
for (var i = na.length-1; i > -1; --i)
	if(na.length*2<r.imgLnks.length && n==na[i])
		return true;
return false;
},
bake:function(name,value,days){
if (days){
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = '; expires='+date.toGMTString();
	}
else var expires = '';
document.cookie = name+'='+value+expires+'; path=/';
},
taste:function(name){
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
return null;
},
eat:function(name){
rpic.bake(name,'',-1);
}
};

rpic.prep();
window.onload=rpic.doit;

</script>

</head>
<body>
<table>
<tr>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td><noscript><div class="ads"><a href="http://www.42below.com"><img 
src="images/assoc1.jpg" alt="banner image" title=""></a></div></noscript>
<div class="ads" id="ads"><a id="randomLnk" href="#"><img 
id="randomPic" src="" alt="random banner" title=""></a></div></td>
</tr>
<tr>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
<td>Contents</td>
</tr>
</table>
</body>
</html>

Thread: Random image - link target

Thread Tools

Search Thread

Random image - link target

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions