Dynadot โ€” .com Registration $8.99

Javascript Question

Spaceship Spaceship
Watch

travinb

Established Member
Impact
1
Hi,

I wanted to know how to make an image rotator (with links) through javascript..is it possible to make one?

Basically every time the page is refreshed I want a new image with its link to come in the others place..

In the hope that I am not asking for too much..and looking for some really helpful tips...

thanks..
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
AfternicAfternic
I don't know much about JS, but it is possible in PHP and actually better.

PHP:
<?php

$imageList = array("pic1", "pic2", "pic3", "pic4");

echo '<img src="'.$imageList[array_rand($imageList)].'">';

?>

This takes a random picture from the array. Just change the filenames under pic1, pic2, pic3, pic4.



PHP:
<?php

$extAllowed = array("jpg", "gif", "png", "JPG", "GIF", "PNG");

$imageDir = 'img/';

$dirConn = opendir($imageDir);
while ($file = readdir($dirConn)) {
 	$ext = explode(".", $file);
	if (in_array($ext[1], $extAllowed)) {
		$imageList[] = $file;
	}
}
closedir($imageDir);

echo '<img src="'.$imageDir.'/'.$imageList[array_rand($imageList)].'">';

?>

This one takes a random file from a directory. Just change the $imageDir variable to the folder that has your pictures.


Of course, these files are all shown randomly and not in any order. If you needed to do this in order, you would need to have some kind of counter in either a file or database keeping track of what picture was shown last.
 
0
•••
Thanks Derek...
I wouldn't need a counter and random images are just fine...
My only issue is will I be able to hyperlink the images?
Is there someway that can be added to the picture..

Thanks for the help.. this is really cool though perhaps not what I am looking for...

or else is there anyway I can rotate php files instead of images.. I can then include the images with their links to within those files.. as in ad1.php, ad2.php instead of pic1 pic2...
 
0
•••
PHP:
<?php

$extAllowed = array("jpg", "gif", "png", "JPG", "GIF", "PNG"); // this is the list of recognised file extensions (without the .)

$imageDir = 'img/'; // the folder in which all the images are

$dirConn = opendir($imageDir);
while ($file = readdir($dirConn)) {
     $ext = explode(".", $file);
    if (in_array($ext[1], $extAllowed)) { // checking if the loaded file's extension is in the list of allowed extensions
        $imageList[] = $file;
    }
}
closedir($imageDir);

echo '<img src="'.$imageDir.'/'.$imageList[array_rand($imageList)].'">'; // display the image on the page.

?>
That is it commented slightly to help you understand.

To rotate php files, merely change
PHP:
$extAllowed = array("jpg", "gif", "png", "JPG", "GIF", "PNG");
AND
echo '<img src="'.$imageDir.'/'.$imageList[array_rand($imageList)].'">';
to
PHP:
$extAllowed = array("PHP");
AND
include $imageList[array_rand($imageList)];
If this is the case, you might want to rename some of the variables appropriately.

Joe
 
Last edited:
0
•••
PHP:
<?php

/**
 * Danltn | http://danltn.com
 * No warranty is given to code used
 */

$imgs = array(
"pic1.gif" => "http://google.com",
"pic2.gif" => "http://msn.com",
"pic3.gif" => "http://example.com",
);

$image = array_rand($imgs);
$url = $imgs[$image];

echo "<a href='$url'><img src='$image' border='0'></a>";

?>
 
0
•••
Thanks guys..this is great
will surely work with these now.. and will get back to you on this..
 
0
•••
No problem travinb. You got it perfect Danltn. Thanks for the assist.
 
0
•••
since you want javascript
http://free-javascript.blogspot.com/2007/05/bannerimage-rotator.html

travinb said:
Hi,

I wanted to know how to make an image rotator (with links) through javascript..is it possible to make one?

Basically every time the page is refreshed I want a new image with its link to come in the others place..

In the hope that I am not asking for too much..and looking for some really helpful tips...

thanks..
 
0
•••
Unstoppable Domains
Domain Recover
DomainEasy โ€” Payment Flexibility
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back