/    Sign up×
Community /Pin to ProfileBookmark

image rolloff replacement

Copy linkTweet thisAlerts:
Oct 30.2013

Tried searching and I can’t find anything that works.

I want to have a designated area that changes images on roll over and then when you roll off restores back to the original image.

Here’s what I have so far.

Javascript:

function swap(image) {
document.getElementById(“main”).src = image.href;
}

HTML:

<a onclick=”swap(this); return false;” href=”image.png”>
<img src=”image_s.png”></img>
</a>

<div style=”width:300px; height:300px;”><img id=”main” src=”image_s.png”></div>

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@peezyOct 30.2013 — It would be simpler to do it with CSS instead of JS. Here is how you could do it with CSS.
[CODE]

<style>
#image{
background:url(image.png) no-repeat;
width:256px;
height:256px;
}
#image:hover{
background:url(swap_image.php) no-repeat;
}

</style>

<body>

<div id="image"></div>

</body>
[/CODE]

However, to answer your question, instead of onclick try onmouseover='swap(image)' and onmouseout='swap(image)'

[CODE]

<script>

function swap(image){
var img = "images/" + image; //If you have a Image Folder.
document.getElementById('image').src=img;
};

</script>

<html>

<img id="image" src="img.png" onmouseover="swap('new_img.png')" onmouseout="swap('img.png')">


</html>
[/CODE]

I tested this way on my localhost and it seems to be working.
Copy linkTweet thisAlerts:
@choganauthorOct 31.2013 — thanks! Will plug it in later and test it out.
×

Success!

Help @chogan 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...