Member Avatar for kimayarani

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
  • 90 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.