Website help. Need help a particular code.

Riokenn · January 2010

So I have been working on my website so I can get a job and ya know, market myself out there. Just wondering if any of you guys know of a code that would let me put a picture on the front page (index) and whenever someone refreshes the page a new picture of mine would pop up every time. Of course it would be getting the pictures from a folder I designate it to.

So if anyone would please help me out or point me in the right direction as to where I could get this I'd really appreciate it.

PirateJon · January 2010

The "internets" call that an image rotator.

http://www.google.com/search?hl=en&q=javascript+random+image+rotator

Riokenn · January 2010

Thanks for the tip. But man is putting this code in here is a real pain in the ass.

Szechuanosaurus · January 2010

Riokenn wrote: »

Thanks for the tip. But man is putting this code in here is a real pain in the ass.

Why?

flatlinegraphics · January 2010

ooo another connecticutter.

when posting questions reguarding code, please post the code or a link to a live version. otherwise, we cannot guess what is going on. there is no one way of doing what you want, and some methods/scripts may work better or worse than others.

Eat it You Nasty Pig. · January 2010

you can just write a little script that outputs a random text string, and use img tags for all the strings

here is one that I copied from somewhere and saved long ago:

<SCRIPT LANGUAGE="Javascript"><!--

function text() {
};

text = new text();
number = 0;

// textArray
text[number++] = " <img src=random1.jpg /> "
text[number++] = " <img src=random1.jpg /> "
text[number++] = " <img src=random1.jpg /> "

increment = Math.floor(Math.random() * number);

document.write(text[increment]);

//--></SCRIPT>

just stick that into whatever container you're using to align the images

Tejs · January 2010

I'm assuming you are not using server side code at all, and I'm also assuming a file structure like this.

root
 |
 -- index.html
    RotatorImages
    |
    -- Image1.jpg
    -- Image2.jpg
    -- Image3.jpg

I've put together a one-off script for you to use. (ImageRotator.js)

function randomImage(elementId)
{var images=new Array();
// Modify Below This Line
images.push('RotatorImages/Image1.jpg');
images.push('RotatorImages/Image2.jpg');
images.push('RotatorImages/Image3.jpg');
// Do Not Modify Below This Line
var element=document.getElementById(elementId);if(element!=null)element.src=images[Math.floor(Math.random()*images.length);];}

Your HTML would look something like this (validated HTML with W3C):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<script type="text/javascript" language="javascript" src="ImageRotator.js"></script>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
		<title>Welcome to my Page!</title>
	</head>
	<body onload="randomImage('myRotatingImage');">
		<span>Welcome to my awesome website! Click <a href="javascript:void(0);">here</a> to see more about my work.</span><br/>
		<img src="RotatorImages/Image1.JPG" id="myRotatingImage" alt="My Sample Work" />
	</body>
</html>

When you need to add images or remove images, simply add/remove lines from the javascript file. Extracting the javascript to an external file will allow the client to cache the file saving you bandwidth (every little bit counts) - the JS file has already been fairly minified. You can also rotate multiple images with this solution by using additional randomImage(...) function calls targeting other image tags. If the user has a browser that has JavaScript disabled (which is unlikely), you at least show the first image on your page.

Riokenn · January 2010

Ugh, all this coding is making my brain hurt. So I shall post pictures to hopefully relieve the stress im having.

OK so this picture is the index of my site. The red highlighted box is where I want images to be and rotate whenever someone visits my site and refreshes or just enters the page.

NOW If I understand coding for websites correctly in which I have no idea what im doing. I should replace with the code people posted a couple of days ago.

Also note that I have been fiddling with other peoples method of doing this and so far its not working. And I really have no idea how to code. Did this all with Fireworks and Dreamweaver.

Tejs · January 2010

Dreamweaver BAD. Looking through that HTML and Javascript is painful. The screenshot you provided is fairly simple to do with just straight HTML in notepad.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>My Cool Webpage</title>
		<script type="text/javascript" language="javascript">
			function rotateImages()
			{
				var images = new Array();

				images.push('images/image1.jpg');
				images.push('images/image2.jpg');
				images.push('images/image3.jpg');

				var rotatingImage = document.getElementById('rotatingImage');

				if(rotatingImage != null)
					rotatingImage.src = images[Math.floor(Math.random()*images.length)];
			}
		</script>
	</head>
	<body style="background-color: #333333;" onload="rotateImages();">
		<div style="margin: 10px; margin-top: 40px;">
			<div style="float: left; width: 133px;">
				<a href="YourLinkHere.html">
					<img src="YourImageHere.jpg" alt="Home" onmouseover="this.src='YourImageHereMouseover.jpg';" onmouseout="this.src='YourImageHere.jpg';" />
				</a>
				<br/>
				<br/>
				<a href="YourLinkHere.html">
					<img src="YourImageHere.jpg" alt="Gallery" onmouseover="this.src='YourImageHereMouseover.jpg';" onmouseout="this.src='YourImageHere.jpg';" />
				</a>
				<br/>
				<br/>
				<a href="YourLinkHere.html">
					<img src="YourImageHere.jpg" alt="About Me" onmouseover="this.src='YourImageHereMouseover.jpg';" onmouseout="this.src='YourImageHere.jpg';" />
				</a>
				<br/>
				<br/>
			</div>
			<div style="float: left; width: 858px; margin-left: 10px;">
				<img src="YourImageHere.jpg" id="rotatingImage" alt="Image Hover Text" />
			</div>
		</div>
	</body>
</html>

This should be basically what you are looking for. On mouse over of the buttons on the left, you can select a new image, and when you load the page, a random selection from the javascript specified will be displayed.

Simply replace the sample URLs and Image names with the appropriate names from the files you have created. So "YourImageHere.jpg" would be "HomeButton.jpg" or whatever.

As for learning HTML, it's actually very easy. Javascript can throw you for a loop, but basic HTML is very easy to pick up and learn, and isn't really even programming - it's just markup. Visit w3schools to learn all the basics.

Riokenn · January 2010

I know that HTML is probably hells times better than Dreamweaver. But im just doing what they taught me in...web design class....yeah. *sob*

As for the code I don't think thats what I am looking for. I just want different images to appear in that box each time someone visits the page. Not when they mouse over the left side buttons. (I believe I understood it that way. And if not I apologize and use this helpful code.)

SkyCaptain · January 2010

Riokenn wrote: »

I know that HTML is probably hells times better than Dreamweaver. But im just doing what they taught me in...web design class....yeah. *sob*

As for the code I don't think thats what I am looking for. I just want different images to appear in that box each time someone visits the page. Not when they mouse over the left side buttons. (I believe I understood it that way. And if not I apologize and use this helpful code.)

They use Dreamweaver to teach web design these days? Ugh... get yourself over to http://www.w3schools.com/html/DEFAULT.asp, download NotePad++, and start learning real HTML and CSS.

Eat it You Nasty Pig. · January 2010

there's nothing wrong with using dreamweaver, especially as a teaching tool

just don't let it write any code for you

Jasconius · January 2010

Riokenn, you should engage yourself in the time honored tradition of hiring one of your fellow students who is better at this than you to help you. Assuming you are at a school with an actual web major.

I take it you are an artist, and sometimes you get a little exchange going where you slip them 40 bucks, they fix your site, and they get to list you on their work examples.

That's the easy way. I know from sitting in on student portfolio classes that graphic artists of the non-web sort really don't want to be bothered with code.

Other than that... perhaps check out flashden.net and you might get lucky and find an image rotater for free.

SkyCaptain · January 2010

Dyscord wrote: »

there's nothing wrong with using dreamweaver, especially as a teaching tool

just don't let it write any code for you

Any would be web design student should start with HTML and CSS in NotePad++. Dreamweaver can't account for all the inconsistencies between browsers and how CSS is implemented.

Jasconius · January 2010

Well clearly he's not a web design student. Which one of his posts didn't make that completely evident?

Tejs · January 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>[COLOR="DarkSlateGray"]My Cool Webpage[/COLOR]</title>
		<script type="text/javascript" language="javascript">
			function rotateImages()
			{
				var images = new Array();

				[COLOR="Lime"]images.push('images/image1.jpg');
				images.push('images/image2.jpg');
				images.push('images/image3.jpg');[/COLOR]

				var rotatingImage = document.getElementById('rotatingImage');

				if(rotatingImage != null)
					rotatingImage.src = images[Math.floor(Math.random()*images.length)];
			}
		</script>
	</head>
	<body style="background-color: #333333;" [COLOR="DarkOrange"]onload="rotateImages();"[/COLOR]>
		<div style="margin: 10px; margin-top: 40px;">
			<div style="float: left; width: 133px;">
				<a href="[COLOR="MediumTurquoise"]YourLinkHere.html[/COLOR]">
					<img src="[COLOR="Purple"]YourImageHere.jpg[/COLOR]" alt="Home" onmouseover="this.src='[COLOR="Yellow"]YourImageHereMouseover.jpg[/COLOR]';" onmouseout="this.src='[COLOR="Purple"]YourImageHere.jpg[/COLOR]';" />
				</a>
				<br/>
				<br/>
				<a href="[COLOR="MediumTurquoise"]YourLinkHere.html[/COLOR]">
					<img src="[COLOR="Purple"]YourImageHere.jpg[/COLOR]" alt="Gallery" onmouseover="this.src='[COLOR="Yellow"]YourImageHereMouseover.jpg[/COLOR]';" onmouseout="this.src='[COLOR="Purple"]YourImageHere.jpg[/COLOR]';" />
				</a>
				<br/>
				<br/>
				<a href="[COLOR="MediumTurquoise"]YourLinkHere.html[/COLOR]">
					<img src="[COLOR="Purple"]YourImageHere.jpg[/COLOR]" alt="About Me" onmouseover="this.src='[COLOR="Yellow"]YourImageHereMouseover.jpg[/COLOR]';" onmouseout="this.src='[COLOR="Purple"]YourImageHere.jpg[/COLOR]';" />
				</a>
				<br/>
				<br/>
			</div>
			<div style="float: left; width: 858px; margin-left: 10px;">
				<img src="[COLOR="Red"]images/image1.jpg[/COLOR]" id="rotatingImage" alt="Image Hover Text" />
			</div>
		</div>
	</body>
</html>

Yah, this should do what you want it to do. I apologize if I am assuming too much experience on your part - it sounds like you are just at the intro level and I've been at this for years =D

I've color coded what should be replaced to help you understand. The button mouseovers and the image rotator are completely separate. You don't mouseover the buttons to get the image to change - that's what the rotateImage function does, and that is called onload in the 'body' tag.

DarkSlateGray - Page Title
Lime - For each image you want to rotate, simply copy and add a line like the ones shown here.
MediumTurquoise - Replace these with the links to your other pages.
Purple - Place the url to the button images here (the initial state, when they are not being moused over).
Yellow - Place the url to the button mouseover images here.
Red - Place the first image url from your set here, so if the user has JavaScript disabled, at least you show them an image instead of nothing.
DarkOrange - This is what loads a random image and displays it. Nothing else.

Enc · January 2010

Have you considered using a content management system such as Joomla or Wordpress? I know the Wordpress system has addons that will allow you to do what you want to do with little to no code on your end. It will probably look better than building it yourself if you don't have the necessary skills to do so.

Riokenn · January 2010

Tejs wrote: »

Yah, this should do what you want it to do. I apologize if I am assuming too much experience on your part - it sounds like you are just at the intro level and I've been at this for years =D

I've color coded what should be replaced to help you understand. The button mouseovers and the image rotator are completely separate. You don't mouseover the buttons to get the image to change - that's what the rotateImage function does, and that is called onload in the 'body' tag.

DarkSlateGray - Page Title
Lime - For each image you want to rotate, simply copy and add a line like the ones shown here.
MediumTurquoise - Replace these with the links to your other pages.
Purple - Place the url to the button images here (the initial state, when they are not being moused over).
Yellow - Place the url to the button mouseover images here.
Red - Place the first image url from your set here, so if the user has JavaScript disabled, at least you show them an image instead of nothing.
DarkOrange - This is what loads a random image and displays it. Nothing else.

Awwww, now I feel a bit offended. I understood what to replace with what and understood what those meant.

I just misunderstood what you told me before. But now that you cleared up my question I shall try it out and hope it works. Thanks Tejs

SkyCaptain · January 2010

Jasconius wrote: »

Well clearly he's not a web design student. Which one of his posts didn't make that completely evident?

Riokenn wrote: »

I know that HTML is probably hells times better than Dreamweaver. But im just doing what they taught me in... web design class....yeah. *sob*

8-)

Jasconius · January 2010

Having a web design class does not mean you are majoring in web design. They put everyone in web design class these days if they are even remotely related to art, or digital media. Usually these classes are designed for those people, and as such they use Dreamweaver because it's easy. #youloseagain

SkyCaptain · January 2010

Nice attempt at backpedaling. He's a student and he's taking a web design class. 8-)

Anyway... buh bye now and forever.

Penny Arcade

Quick Links

Website help. Need help a particular code.

Posts