PDA

View Full Version : 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
<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 ;)


<!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
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:


<!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>