PDA

View Full Version : random image and autosize



piddle
01-19-2014, 01:44 PM
How to combine two scripts?
(on page load opens a random image autosize that have link)



<script language="JavaScript">
<!--

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="01.jpg"
myimages[2]="02.jpg"
myimages[3]="03.jpg"
myimages[4]="04.jpg"
myimages[5]="05.jpg"
myimages[6]="06.jpg"
myimages[7]="07.jpg"
myimages[8]="08.jpg"
myimages[9]="09.jpg"
myimages[10]="10.jpg"


var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>


image auto size:

<html>
<head>
<title>Start</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img.small{width:300px;}
img.large{width:100%;}
</style>
<script type="text/javascript">
window.onload = function()
{
var obj=document.getElementById('wrap').getElementsByTagName('img');
for(var start=0;start<obj.length;start++)
{obj[start].onclick=function()
{this.className = (this.className != 'small')? 'small': 'large';}
}
}
</script>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<div id="wrap">
<img src="02.jpg" class="large" width="160" height="156"></div>
</body>
</html>

jscheuer1
01-19-2014, 03:58 PM
Have you tried it? It looks like it would work:


<html>
<head>
<title>Start</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img.small{width:300px;}
img.large{width:100%;}
</style>
<script type="text/javascript">
window.onload = function()
{
var obj=document.getElementById('wrap').getElementsByTagName('img');
for(var start=0;start<obj.length;start++)
{obj[start].onclick=function()
{this.className = (this.className != 'small')? 'small': 'large';}
}
}
</script>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<div id="wrap">
<img src="02.jpg" class="large" width="160" height="156"><br>
<script language="JavaScript">
<!--

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="01.jpg"
myimages[2]="02.jpg"
myimages[3]="03.jpg"
myimages[4]="04.jpg"
myimages[5]="05.jpg"
myimages[6]="06.jpg"
myimages[7]="07.jpg"
myimages[8]="08.jpg"
myimages[9]="09.jpg"
myimages[10]="10.jpg"


var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img class="large" src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>
</div>
</body>
</html>

piddle
01-19-2014, 06:56 PM
almost ok
I made a small change.
the pictures still missing links


<html>
<head>
<title>Start</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img.small{width:300px;}
img.large{width:100%;}
</style>
<script type="text/javascript">
window.onload = function()
{
var obj=document.getElementById('wrap').getElementsByTagName('img');
for(var start=0;start<obj.length;start++)
{obj[start].onclick=function()
{this.className = (this.className != 'small')? 'small': 'large';}
}
}
</script>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<div id="wrap">
<script language="JavaScript">
<!--

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="01.jpg"
myimages[2]="02.jpg"
myimages[3]="03.jpg"
myimages[4]="04.jpg"
myimages[5]="05.jpg"
myimages[6]="06.jpg"
myimages[7]="07.jpg"
myimages[8]="08.jpg"
myimages[9]="09.jpg"
myimages[10]="10.jpg"


var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img class="large" src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>
</div>
</body>
</html>

jscheuer1
01-20-2014, 04:54 AM
the pictures still missing links

Which links?

piddle
01-20-2014, 06:08 PM
something like that

......
myimages[4]="04.jpg"
myimages[5]="05.jpg"
myimages[6]="06.jpg"
myimages[7]="07.jpg"
.......

<p><a href="04.htm" target="sisu"><img src="04.jpg"></a></p>
<p><a href="05.htm" target="sisu"><img src="05.jpg"></a></p>
<p><a href="06.htm" target="sisu"><img src="06.jpg"></a></p>
<p><a href="07.htm" target="sisu"><img src="07.jpg"></a></p>

jscheuer1
01-20-2014, 07:44 PM
<html>
<head>
<title>Start</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img.small{width:300px;}
img.large{width:100%;}
</style>
<script type="text/javascript">
window.onload = function()
{
var obj=document.getElementById('wrap').getElementsByTagName('img');
for(var start=0;start<obj.length;start++)
{obj[start].onclick=function()
{this.className = (this.className != 'small')? 'small': 'large';}
}
}
</script>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<div id="wrap">
<script>

function random_imglink(){
var myimages = [];
//specify random images below. You can have as many as you wish
myimages[0]={img: "01.jpg", link: "01.htm"}
myimages[1]={img: "02.jpg", link: "02.htm"}
myimages[2]={img: "03.jpg", link: "03.htm"}
myimages[3]={img: "04.jpg", link: "04.htm"}
myimages[4]={img: "05.jpg", link: "05.htm"}
myimages[5]={img: "06.jpg", link: "06.htm"}
myimages[6]={img: "07.jpg", link: "07.htm"}
myimages[7]={img: "08.jpg", link: "08.htm"}
myimages[8]={img: "09.jpg", link: "09.htm"}
myimages[9]={img: "10.jpg", link: "10.htm"}


var ry=Math.floor(Math.random()*myimages.length)

document.write('<a href="'+myimages[ry].link+'" target="sisu"><img class="large" src="'+myimages[ry].img+'" border=0></a>')
}
random_imglink()

</script>
</div>
</body>
</html>

piddle
01-22-2014, 06:12 PM
the code works!
thanks
(code is a tiny part of one NGO project)