Trip is in denial? CSS vs HTML

Question from the new guy (;)):

How would I go about making a random image from a list appear whenever somebody hits refresh on my website? You know, like a different picture would show everytime they pressed refresh. Anyone?
 
Actually, there is an easy way to do it. I don't remember right off the top of my head, but let me dig it out...
Code: 
// This function returns a random number for the variable num, which is specified when you use the function.
// You type rand(x) to use the function, where X is the number of iterations, as you will see later.
// (These comments are for your educational purposes and you can change them as you see fit.)
function rand(num)
{
return (Math.floor(Math.random() *num));
}

// Math.random() gives you a random number between 0 and 1, so you multiply it by the variable num to get something close to the iteration you want.
// Math.floor then rounds that number down, no matter what it is.  It could be 24.999999, it would still become 24.
// And return simply returns the result to the Javascript interpretor.

// I used to use the following code to write a random quotation to the screen.
// You can change the array name (quip in this case) to whatever you like, hopefully something more descriptive like randomImage, randImg, or even img... or broccoliAndLimaBeans, if you like.
// I removed the quotations, but you should replace what I put in with the path to your image.
// (Yeah, I only had 4 quotations... sad, huh? ^_^)
var quip = new Array(3);
quip[0] = "Formerly quotation 1";
quip[1] = "Formerly quotation 2";
quip[2] = "Formerly quotation 3";
quip[3] = "Formerly quotation 4";

// This code will randomly store the value of the ith entry of the array quip into a string called quote.
// Again, you can change the variable names (quip, quote, rand, etc.).
quip.length++;
var i = quip.length -1;
var quote = quip[rand(i)];

// Finally, this will put your image in place.
// Be sure to watch those quotation marks... if you open with single hashes, close with them.  If you use double hashes, close with them.  If your code contains double hashes, use single hashes to contain it, and vice versa.
// If you need to use a single hash and a double has, you can do it the long way ('HTML' + "'" + 'more HTML') or the short way (\' or \").
document.write('<img src="' + quote + '" />');
Hope this helps!

You can still see this script in action at my old site, jabber.1accesshost.com at the bottom of the page.
 
Arden, you need to rid that page of the JS and image maps. You're undercutting the purpose of CSS/XHTML using them. The simple mouseovers can be easily accomplished with CSS anyways, so why use JS?
 
Javascript and CSS work well together. Granted, CSS can do a lot of the stuff Javascript was used to do, but there are still good uses for Javascript.
 
So I have been working a little bit more on that menu I had been working on earlier and threw it into the site it's going to go. The address is here - http://kao.sytes.net/freshsqueeze/new/temp.html.
I only have a few problems left.
  • Safari 1.0 applies the background top left wrong, and makes the very top of the image on the first and last list items disappear, and also that makes the image too short to cover all the way to the bottom.
  • I can't figure out how to center the whole menu regardless of how big the text size is. The menu can take about three command-plus, after which the text gets too big and the menu has to wrap to another line. I want to center it regardless of how big it is, and whether it wraps or not.
Those are the two biggest issues I am trying to fix, here is what the site that I am 'improving' looks like.
 
Hey Trip, glad to see a new CSS zealot is on its way to webdesign glory. Check the ALA (A List Apart) link Mr K gave. As usual, Mr K gave the best link around.

A bit o Javascript and CSS can do miracles. Check my place for the power of CSS design switching : www.phnk.com
 
Love the site toast! And thanks for the comments! :)

Now could somebody quickly help me out? If you're around right now and want to look over my new code send me an IM at: TannerSite (on AIM). I've got a preview webpage that needs some help. :D
 
Well, you were on AIM when I got on, but I hadn't read this yet, so next time we see each other, drop me a line.

MD: Okay, I'll look into it. I know there are ways for me to improve the menu, but I made that in Photoshop and Imageready and pretty much left it. I'll check it out at some point.

My new domain is www.jabmulti.uni.cc (same site, same host, just new domain).
 
Ok, so I almost got this whole menu to go. I would like if someone could check it in Safari 1.1, on panther seeing that I don't have access to it, thanks. It works almost flawlessly in mozilla, and in safari there is just one bug that is getting in the way of really using the menu. The bug is that safari seems to apply the background: url(...) no-repeat top left; wrong, and if I change it to background: url(...) no-repeat bottom left; it looks right, but then it displays wrong in every other browser.
In IE 5.2.2 mac is doesn't work too well, but I can work on it. Also in IE 6 PC it doesn't look great -- but it sure will work.
If you could help me with the problem I am having in safari, that would be key, because the problems in IE I sure could be able to fix.
Thanks, here is the url http://kao.sytes.net/freshsqueeze/new/temp.html!
 
Try breaking that background definition into smaller pieces, like {background: url(...) top left; background-repeat: no-repeat}.
 
You must log in or register to reply here.
Back
Top