Sequence mouseover

**Denn-0** · 02-12-2012 06:12 AM

Hi there.

I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on.

I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term.

There's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mouseover script that would probably make you laugh.

Thanks.

**JMRKER** · 02-13-2012 09:23 AM

It would be more helpful if you provides SOME code attempt, even if it is only the images.
As it is, you will need to modify this to your needs as this is just a SWAG as to your needs.

Code:

<!DOC HTML>
<html>
<head>
<title> Valentines </title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=256670

//<![CDATA[
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'];
var imgCount = -1;
function changeImg() {
  imgCount++;
  if (imgCount < imgList.length) {
    document.getElementById('mainImg').src = baseURL+imgList[imgCount];
  } else {
    alert('Happy Valentine');
  }
}

window.onload = function() {
  changeImg();
}
//]]>
</script>

</head>
<body>
Click on image<br>
<img src="" id="mainImg" onclick="changeImg()">
</body>
</html>

Happy Valentine to you too!

Thread: Sequence mouseover

Thread Tools

Display

Sequence mouseover

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions