Jump to content

Random picture every time you refresh page. fit to screen


ievi

Recommended Posts

Hello so I made an array and it works fine when you refresh the page the image changes but at lower screen resolutions the image cuts of the edge. With my basic code it worked fine I was wondering what I was doing wrong.

 

This was my old code which was just one image and at lower resolutions it would still fit on the screen <center><img src="my image url" width=47%> </center>

 

But when I use my array it cuts of I want to make the image center and just put width=47% like the top code but not sure where to put it

 

<script language="JavaScript"><!--function random_imglink(){var myimages=new Array()myimages[1]="my image url"myimages[2]="my image url"myimages[3]="my image url"myimages[4]="my image url"myimages[5]="my image url"myimages[6]="my image url"var ry=Math.floor(Math.random()*myimages.length)if (ry==0)ry=1document.write('<img src="'+myimages[ry]+'" width=47%')}random_imglink()//--></script>
If you could help me it would be much appreciated
Edited by ievi
Link to comment
Share on other sites

Instead of using width attributes, center tags, and document.write, you should use some modern methods. Use CSS instead of width attributes and center tags. Instead of document.write, you should have an img tag already on the page with an ID and you can target that with getElementById and change the src attribute.

  • Like 1
Link to comment
Share on other sites

Try experimenting with something like this...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"><title>title</title><style>@media (min-width: 700px) {#wrap{width:47%;margin:0 auto;text-align:center;border:1px solid #ddd;}}@media (min-width: 401px) and (max-width: 699px) {#wrap{width:68%;margin:0 auto;text-align:center;border:1px solid #ddd;}}@media (max-width: 400px) {#wrap{width:98%;margin:0 auto;text-align:center;border:1px solid #ddd;}}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';var myimages = []; // global arrayvar lastimg;       // globalwindow.onload = init;function init() {  myimages[0]="dog.jpg";  myimages[1]="cat.jpg";  myimages[2]="frog.jpg";  myimages[3]="bird.jpg";  random_imglink();}function random_imglink(){  var ry;  do{    ry = Math.floor(Math.random()*myimages.length);//obtain a random index  }while(lastimg==ry); // don't repeat the last image   document.getElementById('photoshow').src = myimages[ry];  document.getElementById('photoshow').alt = myimages[ry] + ' not found';  setTimeout(random_imglink, 2000); // 2 seconds  lastimg = ry;}</script></head><body><div id="wrap"><img src="dog.jpg" id="photoshow" alt="photoshow"/></div></body>    </html>
  • Like 1
Link to comment
Share on other sites

Oh, for that you'll have to figure out the code!

 

Actually you can just strip the function down to...

function random_imglink(){  var ry = Math.floor(Math.random()*myimages.length);//obtain a random index    document.getElementById('photoshow').src = myimages[ry];  document.getElementById('photoshow').alt = myimages[ry] + ' not found';}
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...