anonymous_bosch

I am using resized images as thumbnail links. I want the thumbnails to be 100px by 100px but I want the images to be resized so that their smaller dimension becomes the 100px edge and the other dimension gets cropped evenly from either end. For example, if the "src" image is 600px wide by 800px high, I want the thumbnail image to crop to 100px wide and 100px high in such a way that the original image would show up as though 100px had been removed from both top and bottom and then the whole thing was reduced in size by 600%. Here's an example of what I have so far for each image: <img src="img/image01" alt="Image Title" height="100px" width="100px"> This is allowing me to efficiently scale the images to 100px by 100px, but they're being distorted by being forced into a square shape when most of them are rectangular. Is there an easy solution I can paste into each <img> tag? I would also be open to using CSS.

I'll have to look into that. In the meantime, good news: I've gotten the other stuff up and running. I'd love to post a link but I'm not sure of the etiquette here...do people do that? My website is my online portfolio (I'm an artist) and it contains my CV, which in addition to my full name has my address and stuff.

I want you to imagine my blank stare at that last piece of advice. Can you please explain what that means?

Hah I just caught that right before you posted it.

Thanks again. 1. Filenames and extensions are exact matches. I'm a stupid novice when it comes to understanding and writing js and css, but some of those examples you gave are the kind of rookie mistakes I can safely say I don't make. Been using a computer for a while now.2. Currently I'm viewing the local file in Chrome while editing in Sublime Text. I'll upload to the web and see if it works there.3. Relevant ID references are as follow: [line 18] #intro {[line 42] document.getElementById("intro").style.backgroundImage = str;[line 242] <div class="intro"> Line 42 is copied, in its entirety, above. I also copied it in its entirety in my first post from this morning. That's line 42 on my end, mind you, because there's a bunch of other stuff in my html file that you're not seeing because it's not relevant to this discussion. The point being, can we identify an issue with that line, as my browser seems to be doing? I was given this piece of code (see above) by davej: window.onerror = function(m, u, l){ alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l); return true; } ...which structured the error message I'm getting: "Uncaught TypeError: Cannot read property 'style' of null". Finally, davej gave me a whole bunch of code earlier, which I basically copied and pasted into my html and then changed things like filenames so that they'd point to the right places, but I'm still wondering if this part: var randimages = ["images/image01.jpg", "images/image02.jpg", "images/image03.jpg"]; ...can be done so that instead of me having to type out each filename in quotes, I can just point it to a directory or folder? Like: var randimages = [ create array from contents of "images/" ] (contents of brackets above are descriptive, I know that's not viable code!) ==UPDATE== I tried copying and pasting davej's code into a new html file. I saved that file to my desktop and also created a folder on the desktop called "images", into which I placed three jpg images to match the filenames in the example. It worked perfectly when I opened the html locally in Chrome. So what's tripping me up? Could there be some conflicting code somewhere with an external js file?

Thanks again! I really appreciate your help with all this. I'm still getting the same error message re line 42. Is it possible the "str" property style is erroneous, or something adjacent to it? I created the example with just three images on purpose, to make sure it works, but thanks for showing me how to automatically adjust to the number of images in the array. I would have probably had to ask how to place that anyway. The tutorial on the W3Schools site doesn't show how to nest the ".length" part into another function, or if it does, again...you know, I'm dumb. I'm also pretty certain the image locations are correct. Those quoted paths (e.g. "images/image01.jpg") are used elsewhere on the same page without issue.

Thanks so much! But it didn't work: "Javascript Error: Uncaught TypeError: Cannot read property 'style' of null URL: Line Number: 42" I omitted the URL for privacy reasons. Line 42, in this case, is: document.getElementById("intro").style.backgroundImage = str;

Thanks...maybe I'm undercaffeinated but I still can't figure out how to apply this. The W3Schools site is good for helping me get an understanding of the basics, when I'm thinking clearly, but I'm still not sure whether you're telling me I can't point any part of a script to files in a folder, or assign them index numbers that way. I want to know if I can I do something like this, and if not, what needs to change: <head> ... <script> var randimages = new Array("folder/image01.jpg" "folder/image02.jpg" "folder/image03.jpg"); document.getElementById("intro").innerHTML = randimages[Math.floor((Math.random() * 3) + 0)]; </script> <style> div.intro { height: 800px; width: 800px; opacity: 0.5; position: relative; left: 200px; } </style> </head> <body> <div id="intro"> <p>Text goes here</p> </div> </body>

I'm trying to create a section on a page where it displays a random image from a given folder on page load. I also want this image section to be somewhat transparent, so that the text in front of it is readable. Very sorry if I bungle the terminology, I'm relatively new at this: 1. What code should I use, or how do I write the code, to automatically load a random image from a folder as a <div> section "background-image" on page load? I know how to do this for one specific image, but I don't know how to point to folder full of images and then have it select one at random each time the page loads. 2. How do I make it so that the text on the page is centered within the boundaries of the image, and the image is somewhat transparent so that the dark grey background of the page causes the image to appear darker, in turn making the lighter text in front readable? Can all this be done using embedded CSS or will I need to learn some basic Javascript (at least for #1)? My website is set up so that the index.html page is in the root folder, and the images I want to randomly load are in a folder within that one called "img/". If you post any examples, I'd really appreciate it if they are either annotated so that an idiot like me could figure out how to apply them, or already formatted to suit my folder structure. Please be aware that it's also already running Bootstrap and Swipebox externally, so I'm trying to be mindful of overlapping labels that might cause this whole thing not to work. Thanks for reading!