ievi Posted March 4, 2015 Share Posted March 4, 2015 (edited) 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 March 4, 2015 by ievi Link to comment Share on other sites More sharing options...
justsomeguy Posted March 4, 2015 Share Posted March 4, 2015 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. 1 Link to comment Share on other sites More sharing options...
davej Posted March 4, 2015 Share Posted March 4, 2015 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> 1 Link to comment Share on other sites More sharing options...
ievi Posted March 4, 2015 Author Share Posted March 4, 2015 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? Link to comment Share on other sites More sharing options...
davej Posted March 5, 2015 Share Posted March 5, 2015 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';} 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now