Rollover with a twist.

mpalmer12345 · Mar 1, 2004

Rollover with a twist.

I am trying to do the basic rollover image idea, but with the twist that if you click on the mouse, the images are swapped. So if rollover with image 1 as base, image 1 -> image 2; if click then rollover, image 2 -> image 1. Also the reverse: if rollover with image 2 as base, image 2 -> image 1; if click then rollover, image 1 -> image 2.

Here's the code I got so far, which works except for the image swap.

<HTML><HEAD>
<SCRIPT language="JavaScript">

var bin01 = 0;

if (document.images) {
var Inside01 = new Image();
var Outside01 = new Image();
Inside01.src = "Inside01x.jpg";
Outside01.src = "Outside01x.jpg";
}

function binswitch(bin01) {
bin01 = (bin01 + 1) % 2;
}

function act11(imgName) {
if (bin01 == 0) {

if (document.images) {
document.images.advan0.src = eval(imgName + ".src");
}
}
if (bin01 == 1) {
if (document.images) {
document.images.advan1.src = eval(imgName + ".src");
}
}
}

</SCRIPT>
<title>Inside | Outside 01 2004 / (c) mwp</title>
</HEAD>
<BODY bgcolor="#EFFFFF">

<div align="center"> <a href="" onmouseover="act11('Inside01')" onMouseOut="act11('Outside01')" onClick="binswitch('bin01')";>
<IMG SRC="Outside01x.jpg" NAME="advan0" BORDER="0"></a> </div>
</HTML>

wray · Mar 2, 2004

An interesting challenge.

Tactical problem: the act11() function references "advan1". There is no "advan1".

Strategic problem: the direct reference to specific JPGs by mouseover/out looks like it will undo any switch toggling.

Perhaps something like this --

Code:

var gSwitch = 1;
var agSrc = new Array("Inside01x.jpg","Outside01x.jpg");

function toggle(switch) {
  return (1 - switch);
}

function showImage(img,switch) {
  img.src = agSrc[switch];
}

function changeImage(img,switch) {
  switch = toggle(switch);
  showImage(img,switch);
}

called by --

Code:

<div align="center">
<img src="Outside01x.jpg"
    onmouseover="showImage(this,toggle(gSwitch));"
    onmouseout="showImage(this,gSwitch);"
    onclick="changeImage(this,gSwitch);" />
</div>

Dropped the <a> to eliminate any conflicts with hover. The "this" parameter passes the source object to the event handler.

mpalmer12345 · Mar 2, 2004

Thanks for responding! Yeah, the advan1 was a second mouseover image I removed to make the example clearer.

The <a href part was kept in because when I took it out I couldn't seem to get the mouseover effect to work when I moved into the image from the right side or the left, only top and bottom. Leaving it in let me go in from all directions. I don't pretend to know why.

You propose an ingenious solution, wray, but the code doesn't seem to function, as far as I can tell. I am trying it out and I get no activity on the screen at all.

(I assume the /> at the end is a typo for >? Either way it dont' work.)

wray · Mar 3, 2004

Try this --

Code:

  var gSwitch = 1;
  var agSrc   = new Array("Inside01x.jpg","Outside01x.jpg");

function toggle(iSwitch) {
  return (1 - iSwitch);
}

function showImage(oImg,iSwitch) {
  oImg.src = agSrc[iSwitch];
}

function changeImage(oImg,iSwitch) {
  gSwitch = toggle(iSwitch);
  showImage(oImg,iSwitch);
}

called by --

Code:

<p>
We start Outside, mouseover to Inside. Clicking toggles.
<img src="Outside01x.jpg"
    alt="image to toggle"
    onmouseover="showImage(this,toggle(gSwitch));"
    onmouseout ="showImage(this,gSwitch);"
    onclick    ="changeImage(this,gSwitch);" />
</p>

"switch" is reserved by JavaScript, changed to "iSwitch". changeImage() now directly accesses the global "gSwitch", dodging some kind of call-by-reference / call-by-value misunderstanding. Added the <p> to explain a bit and to get everything by the W3C XHTML validator. "/>" is also required for validation. It closes the open <img> tag standing in for the non-existing </img>.

Again, interesting problem. For extra credit change the mouse pointer to a hand on mouseover.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Rollover with a twist.

mpalmer12345

Programmer

wray

Technical User

mpalmer12345

Programmer

wray

Technical User

Similar threads

Part and Inventory Search

Sponsor