Newbie having trouble w onclick function

Yv · 23-03-2011 4:34pm #1

Hi all,

First things first - I'm not a web developer, I'm a photographer who's put together a simple portfolio website. I'm having trouble with one page, where I showcase my retouching skills. I figured the most effective way to display the before & after images was to use a rollover function, and this is working properly, as you can see:
http://yvonneryanphotography.com/retouching.html

However, it then struck me that anyone using a touchscreen device will not be able to trigger it... :$

So I've been trying to change it to an OnClick function instead, but I'm having trouble figuring it out, as I don't really have a notion about JavaScript! Ideally the image would revert to the original when the mouse is released, or on a second click. (I've got a fairly good grasp of HTML, if that helps.)

This is the script I was using for the rollovers, & I'd like to use something similar rather than making the images clickable & putting the command in an <a> tag. Am I making any sense?!

(credit goes to Daniel Nolan for the script - lifesaver)

/*
	Standards Compliant Rollover Script
	Author : Daniel Nolan
	http://www.bleedingego.co.uk/webdev.php
*/

function initRollovers() {
	if (!document.getElementById) return
	
	var aPreLoad = new Array();
	var sTempSrc;
	var aImages = document.getElementsByTagName('img');

	for (var i = 0; i < aImages.length; i++) {		
		if (aImages[i].className == 'imgover') {
			var src = aImages[i].getAttribute('src');
			var ftype = src.substring(src.lastIndexOf('.'), src.length);
			var hsrc = src.replace(ftype, '_o'+ftype);

			aImages[i].setAttribute('hsrc', hsrc);
			
			aPreLoad[i] = new Image();
			aPreLoad[i].src = hsrc;
			
			aImages[i].onmouseover = function() {
				sTempSrc = this.getAttribute('src');
				this.setAttribute('src', this.getAttribute('hsrc'));
			}	
			
			aImages[i].onmouseout = function() {
				if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
				this.setAttribute('src', sTempSrc);
			}
		}
	}
}

window.onload = initRollovers;

I'd really appreciate some help on this - thanks for reading!

amen · 23-03-2011 7:12pm

The roll over is working as the javascript captures two events the onmouseover event when mouse moves over the image to show the new image and the onmouseout event when the mouse moves away from the image to show the original image.

the onclick event is fired when the user clicks the object/image/button which would change the image to new image but there would be no easy way to change back to the original image.

You might be better have a demo button that shows a popup with both images side by side?

Freddio · 23-03-2011 10:29pm

<html>
<head>
<script language="javascript">
function image_swap() {
    if (document.getElementById("image_div").innerHTML == "<a href=\"javascript:void(0);\" onclick=\"image_swap();\"><img src=\"image1.jpg\"></a>") {
    document.getElementById("image_div").innerHTML = "<a href=\"javascript:void(0);\" onclick=\"image_swap();\"><img src=\"image2.jpg\"></a>";
    } else {
    document.getElementById("image_div").innerHTML = "<a href=\"javascript:void(0);\" onclick=\"image_swap();\"><img src=\"image1.jpg\"></a>";
    }
}
</script>
</head>
<body>


<div id="image_div"><a href="javascript:void(0);" onclick="image_swap();"><img src="image1.jpg"></a></div>

</body>
</html>

Newbie having trouble w onclick function

Comments