JavaScript img src changer based on hover and unhover

Sorry the demo doesn’t work, if the images existed it would.

Use two files
../icondatalink.png
and
../iconhoverdatalink.png

This is a dynamic image src changer based on hover and unhover.
Here is a quick example. http://jsfiddle.net/3tn2w/

<html>
<img id=”my-img” src=”../icondatalink.png” onmouseover=”hover(this);” onmouseout=”unhover(this);” />
</html>

<script>

function hover(element) {
var path = element.getAttribute(“src”);
var ext = “hover”;

var path = [path.slice(0, 9), ext, path.slice(9)].join(”);
element.setAttribute(‘src’, path);
}

function unhover(element) {
var path = element.getAttribute(“src”);
var ext = “hover”;
path = path.replace(ext,””);
element.setAttribute(‘src’, path);
}
</script>

Please follow and like us: