0

I am working in dreamweaver and want to have a page that opens with pictures that change to a new one every time that you mouse over.

There are around 3 or 4 different pictures, and after the last one, it can go back to the beginning. Or, it could also be completely random.

I have no problem getting it to change once, using behaviours, it is the additional swap images that I can't figure out.

Anyone got advice?

Thanks,
Kimaya

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by Airshow
0

Kimayarani,

I'm not too familiar with Dreamweaver but think you need a custom script.

Something like this maybe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<script>
onload = function(){
	var img = document.getElementById('myImg');
	var rollovers = [
		{src:'path/to/images/image_a.jpg', alt:'image_a.jpg'},
		{src:'path/to/images/image_b.jpg', alt:'image_b.jpg'},
		{src:'path/to/images/image_c.jpg', alt:'image_c.jpg'},
		{src:'path/to/images/image_d.jpg', alt:'image_d.jpg'},
		{src:'path/to/images/image_e.jpg', alt:'image_e.jpg'}
	];
	var currentImg = 0;
	if(img){
		img.onmouseover = function(){
			currentImg = ++currentImg % rollovers.length;
			img.src = rollovers[currentImg].src;
			img.alt = rollovers[currentImg].alt;
		};
	} 
};
</script>
</head>

<body>
<img id="myImg" src="path/to/images/image_a.jpg" alt="image_a.jpg" />
</body>
</html>

Just adjust the contents of rollovers to suit.

Airshow

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.