Method of switching at random and displaying image (PHP and Javascript)

It is insipid that the same image is always displayed on a top screen of the homepage and the blog. It is the troublesome one to sometimes replace the image. The method that switched the image at random and displayed was tested.

Method of switching at random and displaying image with PHP

Because it came to be able to display the method that switches the image at random with the word press and PHP on the homepage and displays well when trying and erring, it introduces it. Whenever it accessed the page, it became feeling that differed the picture file and was quite good.

<?php
$rand_img[] = "<img src=\"http://hogehoge.jp/****/img1.jpg\" alt=\"img1‚alternative text\" title=\"img1‚description\" />";
$rand_img[] = "<img src=\"http://hogehoge.jp/****/img2.jpg\" alt=\"img2‚alternative text\" title=\"img2‚description\" />";
$rand_img[] = "<img src=\"http://hogehoge.jp/****/img3.jpg\" alt=\"img3‚alternative text\" title=\"img3‚description\" />";
srand(microtime()*1000000);
$rand_num = rand(1, $n = count($rand_img));
$rand_num -= 1;
echo "$rand_img[$rand_num]";
?>

The picture file is prepared in some measure like this, and is enumerated since the second line. The picture file is OK even if it doesn't fill in from http or it fills it in by the relative path. Alt and title are considerably even if it is not. It fills it in if necessary.

Even if it changes it into another favorite name, rand_img and rand_num are OK.

Method of switching at random and displaying image with Javascript

In the environment for which PHP cannot be used, the same operation can be done by using Javascript.

<script type="text/javascript">
<!--
var max_no = 3; //maximum number of images
var rand_no = Math.floor(Math.random() * max_no);

if(rand_no == 0){
document.write('<img src="http://hogehoge.jp/***/img1.jpg" alt="img1‚alternative text" title="img1‚description" />');
}
else if(rand_no == 1){
document.write('<img src="http://hogehoge.jp/***/img2.jpg" alt="img2‚alternative text" title="img2‚description" />');
}
else if(rand_no == 2){
document.write('<img src="http://hogehoge.jp/***/img3.jpg" alt="img3‚alternative text" title="img3‚description" />');
}//-->
</script>
<noscript><img src="http://hogehoge.jp/***/img1.jpg" alt="img1‚alternative text" title="img1‚description" style="margin:0" /></noscript>

After the number of sheets of the set image is set in Javascript according to the number of images, the line that records information in the image is added as well as the time of PHP.

It is necessary to consider the environment for which Javascript cannot be used with Javascript. The image displayed with the noscript tag is specified.

Difference of operation of PHP and Javascript

Operation might be different because it operates on the browser side in Javascript though the display action doesn't depend on a browser because it operates by the servers end in PHP according to a browser.

Moreover, it is necessary to consider the environment for which Javascript cannot be used with Javascript.

I plan to specify neither width nor the height attribute of the picture file.

Pros and cons seem to be in width of the img file and a specified problem of the height attribute. I also had thought that specifying it by consideration to an old browser like Netscape Navigator 4 was indispensable up to now. However, I changed to no specification. Width of the img file and the specification of the height attribute are originally arbitrary in XHTML1.0 and HTML4.01. In a word, it is acceptable even if it doesn't specify it.

Advantage in which width and height are not specified

Because it is not necessary to describe it because neither width nor the height attribute are specified, time can be saved. Moreover, it becomes small though the size of the file is also a little.

When a big advantage replaces the image with another one, the correction of the HTML file becomes unnecessary. When it trims by editing the image and the number of pixels for the image changes even a little, it is necessary to correct not only the replacement of the picture file but also the HTML file. Otherwise, the fineness ratio of the image changes.

Neither width nor the height attribute are automatically input in Expression Web3 that began to be used recently though width and the height attribute are automatically input in the homepage builder. It is thought that this might become a standard in the future.

Disadvantage in which width and height are not specified?

The display area is secured before the image is read when width and height are specified for the img element. It was said that the display was slow because the display area was secured when the image was read when not specifying it. However, it seems not to be able to say indescribably because there is information that not specifying it was fast to display, too.