Learning HTML :)

manic111 · 18 Nov 2008 at 16:03

Right, I'm currently trying to work out how to rotate a series of 5 images on a page in a random sequence. I've found this Javascript code to do it.

<script language="Javascript">

</script>

The problem is that I know nothing about Javascript (sort of figured I would try to become competent with HTML and CSS before learning anything else). Is there a way to do this using HTML? If not, how do you choose where on your page this Javascript code positions your picture? Or would you just place it inside a div like you would if you were putting one picture there?

SimonCHere · 18 Nov 2008 at 16:25

You would stick that code where you want the image to appear. the "Document.write("" line actually writes a the image tag to you page.

I'm not sure what you're tying to do with your images but this will only pick a random image once when the page first loads.

Simon

manic111 · 18 Nov 2008 at 17:15

Ok cool. Effectively I have a logo with 5 different "taglines", each saved as a different JPEG image, and want a different one to display each time the page is loaded.

t31os · 18 Nov 2008 at 17:43

I'd suggest using PHP for random images, it's a lot easier to grasp and you won't need to worry about anyone who has javascript disabled.

Like this one, there are many PHP scripts for this....

*edit image removed, was hotlinked..

Refresh the page and the image will change, i'll edit out the link within 24 hours as i'm hotlinking for example's sake.

With these scripts, you simply have a PHP file, lets say 'rotate.php' is the rotation script, then whenever you want to call that script, you just use...

Code:

<img src="pathtofile/rotate.php" border="0" alt="Random Image" />

Seems the one i've shown above actually rotates itself over time to, check the image URL for where to find it, if it's what you're looking for.

manic111 · 18 Nov 2008 at 18:58

I've just spent the last 45 mins fiddling with the Javascript one, and finally have it working-would show you, but I haven't sorted my hosting out yet. I may play around with the PHP script tomorrow, but at the moment I'm happy enough with the way it's working! Site's going well too, so cheers for the help. Hopefully I'll be done with it in a few days, depending on how much time I give it, so you can see the results of your hard work

manic111 · 20 Nov 2008 at 14:55

Right, I'm getting there! Two problems at the moment. Firstly, how do I get my paragraph text in my "main" div to be centred vertically as well as horizontally? I've tried a few things and can't work it out.

Secondly (and this is really bugging me) when I shrink my browser window horizontally, for some reason my "main" div ends up at the bottom right hand corner of the screen, with a long way to scroll down to it. I assume that this is because the other 4 divs are floating above it, but can't work out why this would happen. If anything, I want the "left" and "right" divs to shrink before the "main" div shrinks at all. As it is though, they don't seem to shrink at all, while my "main" div shrinks then vanishes!

Here is the code so far. Cheers again for the help!

Code:

<html>
<head>
<title>HomePage</title>
<style type="text/css">

body { margin:0; padding:0; background-color:#000000; width:100%; height:100%; 
font size:em; max-height:1200px; max-width:1900px; min-height:480px; min-width:600px }

p,h1,h2,body,a { font-family:"times new roman"; margin: 0; }

a { color:#3399ff; text-weight:bold; }

a:hover { color:#003399; text-decoration:underline; }

p { font-size:1.2em; color: #000000; padding: 15px; text-align: center; }

h1 { font-size:1.9em; color: #000000; text-align: center; padding: 15px; }

h2 { font-size:2.6em; color: #ffffff; padding:0; text-align:left; margin-left:15px;
 margin-top:15px; }

h3 { font-size:2.4em; color: #ffffff; padding:0; }

#header { position: relative; float: left; width: 60%; height: 15%; color: #000000; min-width:350px;
 min-height:110px; max-height:200px; margin-top:15px; }

#left { position: relative; float: left; width: 20%; height: 100%; color: #000000; max-height:900px; 
min-width: 20px; }

#right { position: relative; float: right; width: 20%; height: 100%; color: #000000; max-height:900px;
min-width: 20px; }

#main { position: relative; float:left; width: 60%; height: 75%; 
background-color: #ffffff; min-width: 650px; min-height: 450px; max-height: 1200px; max-width: 1900px}

#footer { position: relative; clear:left; width:60%; height:10% color: #000000; min-width:350px; }

.align-right { float:right; margin: 0 0 0 0;}

.header { vertical-align:bottom; margin:0; position:absolute; bottom:0px; float:right; right: 0px; }

.align-left { float:left; margin: 0 0 0 0; position:relative; }

.bottom { bottom:0; left:0; }

</style>
</head>

<body>
<div id="right">
</div>
<div id="left">
</div>
<div id="header">


<script language="Javascript">
<!--
 var imlocation = "images/";
 var currentdate = 0;
 var image_number = 0;
 function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
 }
 image = new ImageArray(6)
 image[0] = 'brightsmall.jpg'
 image[1] = 'colourfulsmall.jpg'
 image[2] = 'focussedsmall.jpg'
 image[3] = 'not black and whitesmall.jpg'
 image[4] = 'yellow mellowsmall.jpg'
 image[5] = 'font.jpg'
 var rand = 60/image.length
 function randomimage() {
 	currentdate = new Date()
 	image_number = currentdate.getSeconds()
 	image_number = Math.floor(image_number/rand)
 	return(image[image_number])
 }
 document.write("<img src='" + imlocation + randomimage()+ "'>");
//-->
</script>


<class="header">
</div>

<div id="main">

<img src="images/0032.jpg" alt="My Image Description" class="align-right" width=250 height=350 />
<img src="images/aboutmelink.jpg" alt="Link To About Me" class="align-left" width=100 height=60 />
<img src="images/cvlink.jpg" alt="Link To C.V." class="align-left" width=100 height=60 />
<img src="images/bloglink.jpg" alt="Link To Blog" class="align-left" width=100 height=60 />
<img src="images/contactlink.jpg" alt="Link To Contact" class="align-left" width=100 height=60 />
<img src="images/aboutmelinkr.jpg" alt="About Me" class="header" width=100 height=60 />

<br><br><br><br>

<p> hellodasgasgasdg <br> safgasdfgasggh <br> asdgastgsaghas <br> bargasdfgsgt </p>

</div>

<div id="footer">
</div>

</body>
</html>

t31os · 20 Nov 2008 at 18:38

I'll have to post back when i have time, but regarding the alignment issue.

Give the main div the following in CSS..

vertical-align: middle;

NOTE: For XHTML compliant code do your BR and IMG like so...

<br />

<img src="yourimage" alt="youralttext" />

Simply put, anything that doesn't have a closing tag, like other HTML tags needs to end with a space followed by a / then your closing or right-pointing arrow.

So this would also apply to <hr /> for example.

NOTE: I'd still recommend PHP for image rotation, it's easier to use and adapt and will work for non-javascript users. With a decent PHP one you wouldn't even need to actually give the image names either, you just plonk the script in the same directory as the images you want to rotate then link to the script as i explained in my last post.

manic111 · 20 Nov 2008 at 19:40

Awesome, cheers mate. I've got the other issue sorted, at least in part, by having a bit more of a fiddle. I'll have a gander at the PHP stuff later, as I can't seem to upload the Javascript script properly anyway!

Edit: I'm also having another problem; I have 4 images which serve as links along the top of my "main" div. I want these images to sit next to each other, with no space in between them. In Opera, Chrome and Firefox, they do this. However, in IE they have little gaps in between, which is both frustrating and looks pretty poor. Is there any way to iron this out, or is it just an IE bug that I have to live with? Have a look at my other thread (here) for a link to the site, and the latest code.

Thanks a lot again, you've been fantastic!

t31os · 20 Nov 2008 at 20:51

Try this in your CSS.

img {border:0;padding:0;margin:0;}

IE will assume default values for some tags, where other browsers won't. I will not assume that will fix your problem, but each browser does treat code differently, it's something you get use to in time.

t31os · 20 Nov 2008 at 20:54

http://marknichols.net84.net/ said:
Website Under Review

You see this page, because the system administrator of 000webhost.com is currently checking this website for malicious content. This redirect will be removed once we will finish manually checking all files on this account. As far we check over 100 websites, it can take about 2-4 hours to complete. If you are the owner of this website, you will get email confirmation once it's done. If you are a visitor - please come back later.
www.000webhost.com is a free web hosting provider and all free hosting providers suffer from abusers. Around 5% of users signup here just to start hacking or phishing website or make other damage. So, in order to survive, we must monitor what our users are hosting.
We are sorry for any inconveniences, but checking all content manually, it is the only way to provide you with the most secure and reliable service. If you have found any illegal website on our network, you can report it here.

Seems your page is down.

manic111 · 20 Nov 2008 at 23:28

t31os said:
Try this in your CSS.

img {border:0;padding:0;margin:0;}

IE will assume default values for some tags, where other browsers won't. I will not assume that will fix your problem, but each browser does treat code differently, it's something you get use to in time.

Nope, still have those annoying white edges to pictures in IE...Microsoft, eh?!!

The website is back up now, I assume that they took it down while it was checked over as I only signed up for the hosting today.

Cheers again

t31os · 21 Nov 2008 at 05:22

Might just be how IE renders images side by side, or it could be a SPACE in the code.

Lots of ways you could re-work it.

For the buttons you have there, you could do it without images. Larger different font etc.....

You should try to only use images for graphical work, anything that is going to display text should be done with text. Not saying you have to, but it's better practice.

3 black boxes with text in them - makes more sense to do that using CSS then creating images for something that's not necessary.

If the layout you have now is how you want it i can proberly chuck together some code for you to work from. If this is a personal project for you to learn from though i'll leave you to it, and just let me know where you need help....

manic111 · 21 Nov 2008 at 10:49

Yep, I'd rather do it myself to be honest mate. Want to be able to say "I did that" when I'm done, and have the knowledge that goes with it! I'm away all weekend, but when I get back I'll read up on doing the whole box thing. One thing that I've already struggled with is how to put divs inside divs. (I assume that this is what you do when making the boxes with text in them-you just make a div of that size and background colour?) It just doesn't seem to position wheere I want it-either seems to get lost "behind" the main div, or simply not be anywhere!

Thanks for the help again, I'll let you know how it goes.