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)

Code:

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

Code:

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

Code:

<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

Code:

        <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"
.......

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

**jscheuer1** · 01-20-2014, 07:44 PM

Code:

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