/    Sign up×
Community /Pin to ProfileBookmark

Sequence mouseover

Copy linkTweet thisAlerts:
Feb 12.2012

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.

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERFeb 13.2012 — 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.
<i>
</i>&lt;!DOC HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Valentines &lt;/title&gt;
&lt;script type="text/javascript"&gt;
// From: http://www.webdeveloper.com/forum/newreply.php?do=postreply&amp;t=256670

//&lt;![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 &lt; imgList.length) {
document.getElementById('mainImg').src = baseURL+imgList[imgCount];
} else {
alert('Happy Valentine');
}
}

window.onload = function() {
changeImg();
}
//]]&gt;
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
Click on image&lt;br&gt;
&lt;img src="" id="mainImg" onclick="changeImg()"&gt;
&lt;/body&gt;
&lt;/html&gt;

Happy Valentine to you too! ?
×

Success!

Help @Denn-0 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...