So I've followed this tutorial and now have a picture in the left upper corner that changes each time I refresh my page. Now, all I simply wanna do is to move the randomizing picture to the center of the page. This is the code I'm using. <script type="text/javascript" src="randompics.js"></script> </head> <body> <script type="text/javascript"> randomImg(); </script> Simply what I want to do is position the randomImg(); where I want to on my site. How do I do it?
You need to use CSS not JS to accomplish this. Place this code in the head of your document. You need to change where I have commented the values to match your requirements. <style type="text/css"> img{ position:absolute; top:50%; left:50%; margin-left:-342px; /* image width / 2 */ margin-top:-234px; /* image height / 2 */ } </style> Code (markup): This code will apply the same rule to all images within your web page, so change it to a class or something if need be.
Is it possible to put an ID on the randomizing image? I've tried but don't know how to do it. Oh and another thing. I've added text beneath the randomizing image, and when I pasted the code the text is stuck in the upper left corner and the picture is in the middle... Each text belongs to a certain image, so when the image reloads the text will change as well. How do I get the text to follow since it's part of the array.
This is very possible and not too hard to accomplish. Post the JavaScript you have and I will create something for you.
Ok, here's the array function: function randomImg(){ var myImages = new Array(); myImages[1] = "ett.jpg"; myImages[2] = "tva.jpg"; myImages[3] = "tre.jpg"; myImages[4] = "fyra.jpg"; var myLinks = new Array(); myLinks[1] = "link1"; myLinks[1] = "link 2"; myLinks[1] = "link 3"; myLinks[1] = "link 4"; var myTexts = new Array(); myTexts[1] = "<h1>Hello this is cool osv nu ska jag<br /> skriva en massa for att fa en storre text</h1>"; myTexts[2] = "Mej kan du inte hemma"; myTexts[3] = "Har du kalas"; myTexts[4] = "Skola en bootlegger"; var rnd = Math.floor(Math.random() * myImages.length); if (rnd == 0){ rnd = 1; } document.write('<a href="'+myLinks[rnd]+'"><img src="'+myImages[rnd]+'" /></a><p>'+myTexts[rnd]+'</p>');
And here's the site: <!doctype html> <html> <head> <style type="text/css"> body {background-image:url(background.jpg);} #logobild {background-color; color:black; width:500px; height:100px; border-color:black; border-padding:4px; border-styleutset; position: absolute; top: 60px; left: 700px; } </style> <style type="text/css"> img{ position:absolute; top:50%; left:50%; margin-left:-300px; /* image width / 2 */ margin-top:-234px; /* image height / 2 */ border-color:black; border-padding:4px; border-styleutset; } </style> <script type="text/javascript" src="randompics.js"></script> </head> <body> <script type="text/javascript"> randomImg(); </script> </body> </html>
Hey, Try this code, this should be enough to get you started you can play around with the values to get it looking how you want. <!doctype html> <html> <head> <style type="text/css"> body { background-image:url(background.jpg); } #logobild {background-color; color:black; width:500px; height:100px; border-color:black; border-padding:4px; border-styleutset; position: absolute; top: 60px; left: 700px; } #container{ padding:0 0 40px 0; } #container #caption-container{ color:#000; font-size:13px; text-align:center; display:block; width:400px; position:absolute; bottom:20px; left:50%; margin-left:-200px; background:#efefef; } #container #image-container img{ position:absolute; top:50%; left:50%; margin-left:-343px; /* image width / 2 */ margin-top:-234px; /* image height / 2 */ border-color:black; border-padding:4px; border-styleutset; } </style> <script type="text/javascript"> function randomImg(){ var myImages = new Array(); myImages[1] = "squirrel2.jpg"; myImages[2] = "squirrel2.jpg"; myImages[3] = "squirrel2.jpg"; myImages[4] = "squirrel2.jpg"; var myLinks = new Array(); myLinks[1] = "link1"; myLinks[1] = "link 2"; myLinks[1] = "link 3"; myLinks[1] = "link 4"; var myTexts = new Array(); myTexts[1] = "<h1>Hello this is cool osv nu ska jag<br /> skriva en massa for att fa en storre text</h1>"; myTexts[2] = "Mej kan du inte hemma"; myTexts[3] = "Har du kalas"; myTexts[4] = "Skola en bootlegger"; var rnd = Math.floor(Math.random() * myImages.length); if (rnd == 0){ rnd = 1; } // set image document.getElementById('image-container').innerHTML = '<img src="'+myImages[rnd]+'" />'; // set caption document.getElementById('caption-container').innerHTML = '<p>'+myTexts[rnd]+'</p>'; } </script> </head> <body> <div id="container"> <div id="image-container"></div> <div id="caption-container"></div> </div> <script type="text/javascript"> // call the function once the dom has been loaded randomImg(); </script> </body> </html> Code (markup):
Some advice: 1) Put the script in an anonymous function, that way it's not polluting the global namespace. 2) since it's likely you'd want to position both the IMG and the P, use a single wrapper instead of the two huggy suggested. 3) If you use objects inside an array, it gets simpler to declare all your values. 4) start your index at zero instead of one. It's easier to do random()*(length-1) than to use an if statement. 5) InnerHTML and document.write have a performance hit -- there's a reason we've been told to stop using them; as such the elements should be added using the DOM. Which would go a little something like this: <script type="text/javascript"> /* I highly suggest that you put this in a external file and call it right before </body> -- it will run fastest/smoothest from there. */ (function(){ var IMGList = [ { href : 'link1', src : 'ett.jpg', text : 'Hello this is cool osv nu ska jag<br /> skriva en massa for att fa en storre text' },{ href : 'link2', src : 'tva.jpg', text : 'Mej kan du inte hemma' },{ href : 'link3', src : 'tre.jpg', text : 'Har du kalas' },{ href : 'link4', src : 'frya.jpg', text : 'Skola en bootlegger' } ], d = document, target = d.getElementById('imageContainer'), tA = target.appendChild(d.createElement('a')); with (IMGList[Math.floor(Math.random()*(IMGList.length-1))]) { tA.href = href; tA.appendChild(d.createElement('img')).src = src; target.appendChild( d.createElement('p') ).appendChild( d.createTextNode(text) ); } })(); </script> Code (markup): All you need is a DIV#imageContainer that you can put anywhere in your code and position however you like with the CSS. THAT SAID, this reeks of doing something client-side that has no business being done client side in javascript, since it doesn't gracefully degrade and it's a waste of bandwidth. I would advise doing this server-side with something like PHP or ASP instead. In PHP that would be more like this: <?php $IMGList = [ [ 'href' => 'link1', 'src' => 'ett.jpg', 'text' => 'Hello this is cool osv nu ska jag<br /> skriva en massa for att fa en storre text' ],[ 'href' => 'link2', 'src' => 'tva.jpg', 'text' => 'Mej kan du inte hemma' ],[ 'href' => 'link3', 'src' => 'tre.jpg', 'text' => 'Har du kalas' ],[ 'href' => 'link4', 'src' => 'frya.jpg', 'text' => 'Skola en bootlegger' ] ]; $IMGItem = &$IMGList[rand(0,count($IMGList)-1)]; echo ' <div id="imageContainer"> <a href="', $IMGItem['href'], '"> <img src="', $IMGItem['src'], '" /> </a> <p>', $IMGItem['text'], '</p> <!-- #imageContainer --></div>'; ?> Code (markup): Which would work regardless of if scripting is enabled/disabled... and as someone who by default browses with scripting OFF by default and only enables it on a per-site basis (Thanks Opera, though I do it in FF/Chrome too with the 'noscript' plugins/extensions) I'm sensitive to "javascript for nothing".