[RESOLVED] I'm sure this is simple

whatsthis

Could someone tell me how to change this code so that the picture changes when the mouse is over (or clicked) on the image. Not change after delay.

// Comma separated list of images to rotate
var imgs = new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 5000;
var counter = 0;

vertmonkee

This is all javascript.

leatherback

vertmonkee wrote:
This is all javascript.

😃

hehe

Yeah, I noticed too.

Anyway.. Why don't you just grab a rollover script, instead of a delayed script, if that is what you need? I avoid javascript, as I can't see the use of it (I know, my sites are boring), but on any javascript coding site you can for sure download udles of them.

edit
ok, I could help myself. Went to google, typed in javascript rollover, oened the first pages that looked usefull, and am giving to you kow:
http://www.joemaller.com/js-singleroll.shtml
/edit

vertmonkee

I have to aggree with you leatherback. Javascript does frustrate me a bit. I read a book on it and it seems that after every example they say "This doesn't work for such and such browser" or "People can just stop this working" etc.

And you always have to check for brwoser versions and platforms etc.

I much prefer PHP where i know it is installed on the server and dont have to worry about the user's platform and browser.

It just seems a lot cleaner.

leatherback

@vertmonkey:
Yeah,.. Some people still live in the 90-ies, where blinking and flashing was cool. 🙂 But then again.. My site is boring 🙂

And yet you do not tell us where we find your site?

vertmonkee

The first site i ever did i used dreamweaver, but it has been changed since http://www.theboardinghouse.co.uk and I am working on my first ever PHP and MYSQL site, the working version can be seen at http://ttphp.open.ac.uk/~idl27/skatespots

I'm still pretty new to it all, but feel like I am getting there.

leatherback

cool site. I assume you still need to style it (Otherwise.. Please check it out in mozilla, since the layout does horrible things on my laptop..).

I think you will like this toy for your site, instead of the dropdown:

http://www.backspace.com/mapapp/

bogu

Get this line out of your script:

setTimeout('randomImages()', delay);

An call randomImages() function on witch event u want, onclick, onmouseover ...

gamber

whats this,
are you familiar with CSS? A simple CSS, non-Javascrpt solution would be to define the hover attribute to what you want to change. In this case CSS is simple, quick and uses very little overhead.

Here is a variation, that starts with the image opaque, then changes to non-opaque when you hover over it. This goes in the style heading or your css file

img.fade {
	filter:alpha(opacity=50);   

	-moz-opacity: .5;   

	opacity: .5;
}

img.fade:hover {
	filter:alpha(opacity=100);   

	-moz-opacity: 1.0;   

	opacity: 1.0;
}

Here is the html tag, in this case set up as a link

<a href="#"><img class="fade" src="images/yourimage.gif" alt="fading picture" border="0"/></a>

To have it change a couple of other attributes, such as size, add the changes to your css.

This solution works great if you have many images, and all you wish to change is the attributes of the image.

If you have a one, or a very few, images, consider the swap with the hover attribute in css.

bogu

Assuming he's doing this fade thing only for IE ....

gamber

working and tested in Firefox, Opera & IE so I don't see a problem here

Coding to swap single images can be posted if you wish

whatsthis

Thanks chaps

I wasn't expecting so many replies so quickly.
Maybe I should have explained my application better. Its for a car club so members can save images and a description. Viewers can then search and see a thumbnail of the cars. I have written a file upload script in php for upto 5 images. Then I've created a thumbnail of 100x100 of the first image and saved all the images at 300x300. It creates a folder and saves the folderID in a mysql table. All this works great BUT..... When I show the images in a php slideshow with the description the pages refreshes everytime the viewer selects the next image. As I am showing the slides and the description this flickering is annoying. With javascript this doesnt happen.

So I need a slideshow at the top of the screen with a next and previous link to show the next images from a folder.

I have not looked a css yet, will this also cause the page to refresh or just the image ?

Thanks

bogu

gamber wrote:
working and tested in Firefox, Opera & IE so I don't see a problem here

I tested and is working I dont know why I had the idea that filter works only in IE ...

So, I'm sorry ...

MarkR

bogu wrote:
I tested and is working I dont know why I had the idea that filter works only in IE ...

The "filter" style does only work in IE - it's completely been invented by Microsoft.

To achieve the same effect (opacity, anyway) in mozilla, you have to use -moz-opacity (which as its name implies, is Mozilla-specific anyway itself).

There isn't a standard way of applying opacity to things (yet, that is widely supported), so we have to use nonstandard ones.

Mark

whatsthis

This thread was a question on getting a slideshow to work without refreshing the page each time an image is viewed.

bogu

Did u try what I wrote above in my first post?

whatsthis

Yes thanks Bogu

Unfortunately I was thrown off track by the negative comments about javascript. I am using Dreamweaver for the site and find php easy to include but can't stop the refresh flashing. I got the javascript running but when I started to change it the stupid thing stopped. I haven' done any javascript before so need to find out how to include navigation links.

I'm going to try again this week-end. I need to get it finished before the world cup oops just noticed Romania aren't there this time. Sorry

bogu

whatsthis wrote:
I'm going to try again this week-end. I need to get it finished before the world cup oops just noticed Romania aren't there this time. Sorry

:p
This doesnt mean I'm not going to watch the world cup, but I'll be neutral on all the games ...

vertmonkee

whatsthis,

i know i put in some negative opinions on javascript but dont be put off, it can do some good things. There are just a few frustrations in it for me.

Also dreamweaver generates javascript that is known to be lengthy and difficult for humans to read and decipher.

If you really want to do javascript www.w3schools.com has a good starting tutorial. Or CSS is another good option.

As with most computer based jobs on the web there are many different langauges and ways of acheiving the same or similar thing.

And if you all want you can join my england world cup winners party.

whatsthis

Thanks vertmonkey - I'm off there now to take a butchers. Played all week-end with countless javascript & php slideshows with various levels of success.

The part I'm stuck on is server driven and browser driven. With a PHP script it is easy to get the folder information (famous/interesting/people/me.jpg) into the script but the page refreshes with each new image. With javascript the page doesn't refresh but I can't get the folder information from mysql table into the script.

I've found this script which gets the information I need

<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(.jpg$)|(.png$)|(.jpeg$)|(.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

It gets the array I need but I can't get the array it into the javascript. And when I define $dirname as the results from mysql it doesn't want to know.

Shall stick with it

Put me name down for the England world cup winners party !