Forum Moderators: open
<head>
<script type="text/javascript">
//<![CDATA[
var images=new Array();
images[0]="./images/learnline.jpg";
images[1]="./images/msdnadd.gif";
images[2]="./images/itstudentforumadd.gif";
function randomImage() {
var i=Math.floor(Math.random()*images.length);
document.getElementById("random").src=images[i];
}
onload=randomImage;
//]]>
</script>
</head>
<body>
<img id="random" src="" alt=""/>
</body>
Question:
Is it possible to make the images links?
If yes how do I make:
learnline.jpg - <a href="learnline.html>
msdnadd.gif - <a href="msdn.html">
itstudentforumadd.gif - <a href="forum.php">
Is it possible to have different images linking to different web pages.
<script type="text/javascript">
//<![CDATA[
var imageSets
[
["learnline.jpg","learnline.html"],
["msdnadd.gif" ,"msdn.html" ],
["learnline.jpg","forum.php"]
]function randomImage() {
var image = document.getElementById("random");
var set = imageSets[Math.floor(Math.random()*imageSets.length)];
image.src = './images' +set[0];
image.parentNode.href = set[1];
}onload=randomImage;
//]]>
</script>
i am only a beginner to javascript so can you please explain if i need to make changes.
image.src = './images[b][blue]/[/blue][/b]' +set[0];Try that.
var imageSets [b][blue]=[/blue][/b]
The code that I have is below:
<script type="text/javascript">
//<![CDATA[
var imageSets=
[
["learnline.jpg","learnline.html"],
["msdnadd.gif","msdn.html"],
["itstudentforumadd.gif","forum.php"]
]
function randomImage() {
var image = document.getElementById("random");
var set = imageSets[Math.floor(Math.random()*imageSets.length)];
image.src = './images/' +set[0];
image.parentNode.href = set[1];
}
onload=randomImage;
//]]>
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;}
#main{position:relative;margin:100px auto;}
.ph{position:absolute;left:40%;height:2em;width:8em;display:none;margin:0;padding:1em;}
.p1{background:#dee;}
.p2{background:#eed;}
.p3{background:#edd;}
.p4{background:#dde;}
</style>
<script type="text/javascript">
window.onload=randPhoto;
function randPhoto(){
var photo_divs=new Array('photo1','photo2','photo3');
var targ=Math.floor(Math.random()*photo_divs.length);
document.getElementById(photo_divs[targ]).style.display="block";
}
</script>
</head>
<body>
<p>
<a href="#" onclick="location.reload();">Roll 'em</a>
</p>
<div id="main">
<div id="photo1" class="ph p1">
<a href="#" onclick="return false;">First photo & link</a>
</div>
<div id="photo2" class="ph p2">
<a href="#" onclick="return false;">Second photo & link</a>
</div>
<div id="photo3" class="ph p3">
<a href="#" onclick="return false;">Third photo & link</a>
</div>
<noscript>
<div id="photo4" class="ph p4" style="display:block;">
<a href="#" onclick="return false;">Default photo & link</a>
</div>
</noscript>
</div>
</body>
</html>
