Jump to content
Sign in to follow this  
ievi

Random picture every time you refresh page. fit to screen

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thank a lot davej. I have made some changes and it works perfectly. I wanted to know though how do I make the image only change when the page is refreshed?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...